密级：内部1引言 (2)
1.1编写目的 (2)
1.2变更记录 (2)
1.3定义 (2)
1.4参考资料 (2)
2HTML (2)
2.1命名 (2)
2.2标签 (3)
2.3排版 (3)
2.4CSHTML (3)
3JS (3)
3.1组织 (3)
3.2命名 (4)
3.3变量 (4)
3.4方法 (4)
3.5对象及控件 (4)
3.6第三方库 (4)
3.7排版 (4)
3.8AJAX (5)
4CSS (5)
4.1组织 (5)
4.2命名 (5)
4.3兼容性 (5)
4.4第三方库 (6)
4.5排版 (6)
前台编码规范
1引言
1.1编写目的
帮助开发团队形成一致的前台编码风格，并指出某些容易引发BUG的不良编码习惯，预期读者为长沙安晨信息科技有限公司的全体开发人员。
1.2变更记录
版本号作者日期备注
1.0Aaron7/1/2014
1.1Aaron7/31/2014Add examples
1.2Aaron8/4/2014Update the format
1.3定义
术语定义备注
HTML Hypertext Markup Language
JS Javascript
CSS Cascading Style Sheet
1.4参考资料
2HTML
2.1命名
文件名采用帕斯卡命令法，所有单词首字母大写，词汇缩小可以全部大写，单词间不加任何连接符。
例如“UserLogin.cshtml”
∙文件名应见名知义，能清晰描述页面主要功能，例如“AddUser.cshtml”。
2.2标签
∙所有标签都应该正确关闭，例如“<div>…</div>”，无子元素及内容的标签，可根据W3C规范简化为自关闭标签，例如“<input…/>”，但有部分自关闭标签兼容性较
差，在无法确认的情况下，都应该使用双标签关闭。
例如<i/>标签在IE浏览器中可
能无法加载背景图片。
∙为确保兼容性及用户体验一致性，应尽量避免使用以下过时标签：<framework>，<br>，<xmg>，<i>，<u>，<font>。
此外，不要将<table>标签用于页面布局。
∙应尽量避免使用自定义标签名，以增强可读性和可维护性。
∙完整的独立*tml页面，应该内含<header>标签，并在<header>中登记keywords, description等信息，以便于搜索引擎收录。
2.3排版
∙HTML标记内部，不允许出现空行及无意义的空格。
∙应正确使用缩进来呈现嵌套关系，子元素应比父级元素缩进一个制表位。
但仅有内容无子标签的元素，可在同一行书写，例如“<button>Save</button>”。
∙如标签属性过多过长，可适当在标签内部换行，但同一页面，同类标签应采用大致相同的换行策略，切忌五花八门。
2.4CSHTML
∙向控件赋值应尽量直接使用标准的Model，ViewData或ViewBag，如非必要，不要使用@{}嵌入块，尤其是不要在嵌入块中进行无意义的重复引用，例如“@{var
test=@ViewBag.Test;}”。
∙@Html生成器存在多个兼容性问题，应谨慎使用，简单的控件应尽可能使用原生html 标签。
例如@Html.DropDownList在绑定已有选中值的数据源时，会丢失已选中项。
3JS
3.1组织
∙应尽可能将JS代码写入独立的JS文件中，而不要直接嵌入页面，以增强缓存利用率及可维护性。
∙相同或类似算法应尽可能统一到同一个方法中，以提高可维护性。
尤其是不允许在Creat和Edit页面之间直接Copy相关JS代码。
∙在页面中引用JS文件时，应将引用标签写在<body>标签之后。
∙项目正式发布时，应将所有JS文件转化为mini版本。
3.2命名
∙文件名全部小写（词汇缩写也小写），各单词间用“-”为连接符。
例如“jquery-overlay-1.0.js”
∙方法名，变量名均采用骆驼命名法，第一个单词小写，之后的单词首字母大写，各单词间不加任何连接符。
例如“userId”
∙所有变量及方法名都应见名知义，除i,j,k等约定俗成用于集合遍历的临时变量名以外，不允许使用无意义的单个字母做为变量名或方法名。
3.3变量
∙JS有着非常糟糕的内存及作用域管理机制，如非绝对必要，不要声明全局变量。
3.4方法
∙为提高兼容性，尽可能少使用return false;应以e.preventDefault();代替。
3.5对象及控件
∙公司目前无专职前台工程师，JS平均水平偏低。
而JS自定义对象及控件语法比较复杂，为增强项目可维护性，应尽量避免使用自定义对象及控件，在必要情况下，也应先与整个团队协商。
3.6第三方库
∙为增强可维护性，原则上各项目都采用Jquery或AngularJS framework为基础库，以确保所有人都能看懂相关代码。
∙在项目中引入第三方JS插件时，应与整个团队协商，并认真评估兼容性。
∙如无绝对正当的理由，同一个项目中，不应该出现同一JS库的不同版本。
∙项目中引用的任何第三方JS文件均应存放于独立文件夹中，并不得直接修改原始文件，如果需要扩充或修改第三方API，应写在另外的文件中。
如引用的第三方JS库较多，应在项目根目录下维护一份清单。
∙应尽可能使用CDN来引用第三方库，以改善访问体验。
3.7排版
∙JS代码块中不应该出现无意义的空行，尤其是不允许毫无规律地随意换行。
∙为增强兼容性，每一个完整的语句末尾都应加上分号。
∙按约定俗成的JS编码风格，左花扩号置于代码块的右上角。
∙在进行链式方法调用时，推荐采用一行一个方法的书写方式，以增强可读性，例如：Item
.find(‘’)
.attr(‘’,’’)
.appendTo();
3.8AJAX
∙原则上当采用AJAX提交数据时，不要再使用form表单，以防止重复提交，造成资源浪费。
4CSS
4.1组织
∙为增强可维护性，任何情况下，都不要直接使用内联样式，也不要在页面header中加入<style>标签，应将所有样式都写入独立的CSS文件中。
∙原则上，同一个项目使用同一个CSS文件，但各模块分别维护的代码块，应使用注释声明包裹起来，以增强协同性。
∙在页面中引用CSS文件时，应将引用标签置于<header>标签内部。
∙项目正式发布时，应将所有CSS文件转化为mini版本。
4.2命名
∙文件名全部小写（词汇缩小也小写），各单词间用“-”为连接符。
例如“all-pages.css”
∙标签名，属性名，class名全部用小写，各单词间用“-”为连接符，例如“button.save-change{font-size:16px;}”
4.3兼容性
∙为增强兼容性，应尽可能减少使用CSS3特性。
例如“first-nth-child”属性在IE8以下浏览器无法加载
∙为增强兼容性，应尽可能减少使用important声明。
∙为增强兼容性，应尽量避免使用标签类型选择器。
4.4第三方库
∙推荐使用bootstrap为前台css框架，当前最新稳定版本为3.0。
∙项目中引用的任何第三方CSS文件均应存放于独立文件夹中，并不得直接修改原始文件，如果需要扩充或修改第三方样式，应写在另外的文件中。
如引用的第三方CSS 库较多，应在项目根目录下维护一份清单。
∙应尽可能使用CDN来引用第三方库，以改善访问体验。
4.5排版
∙按约定俗成的CSS编码风格，左花括号应位于代码块的左侧。
∙CSS文件中，不应出现无意义的换行或空格。