1、Web技术中心代码规范前言软件的长期价值直接源于其编码质量。在它的整个生命周期里，一个程序可能会被许多人阅读或修改。如果一个程序可以清晰的展现出它的结构和特征，那就能减少在以后对其进行修改时出错的可能性，编程规范可以帮助程序员们增加程序的健壮性。基本所有的前端代码都是暴露给公众的，所以我们更应该保证其质量。规范理念Any violation to this guide is allowed if it enhances readability.所有的代码都要变成可供他人容易阅读的。-引用自 Dojo Javascript 语法规范规范详解JS 命名规范 必须使用 Tab 键进行代码缩进，以节约
2、代码大小，建议设置编辑器的 tab 为4个空格的宽度（而不是4个空格） 接口风格结构 规则 例如类 驼峰式 ModuleClass()公有方法 混合式 getPosition()公有变量 混合式 frameStyle常量 大写式 DEFAULT_FRAME_LAYOUT 其他建议风格，非必要结构 规则公有方法和属性 混合，例子：mixedCase私有方法和属性 混合，例子：_mixedCase方法（method ）参数 混合，例子：mixedCase本地（local ）变量 混合，例子：mixedCase 所有语句结束后，必须使用 ; 号结束 所有变量必须是有意义的英文，严厉禁止拼音 变量允许
3、使用公认英文缩写 类命名必须是驼峰式 常量必须所有单词大写，并且每个单词间加下划线 枚举类型时，枚举的命名必须有意义，枚举与枚举成员必须以驼峰式 常量和枚举必须在最前端定义，merge 时注意，必须把常量与枚举定义的文件放在文件列表的第一位 变量内的简写单词如果在开头则全小写：xmlDocument，如果不在开头则全大写：loadXML！ “on“只能用作事件的命名 函数开头必须是有意义的动词或动词短语 私有类的变量属性成员 建议 使用混合式命名，并前面下下划线 临时的全局变量放到一个全局的哈希表里，方便变量回收 所有全局变量必须初始化，尽量少用全局变量 大括号前面不能有换行符 保留字以及特有
4、的 dom 属性不能作为变量名特殊命名约定 前面加 “is” 的变量名应该为布尔值，亦可使用 “can” “has” “should” 前面加 ”str” 的变量名应该为字符串 前面加 “arr” 的变量名应该为数组 前面加 “num” 或 “count” 的变量名应该为数字 “o” 作为局部变量或参数，表示为 Object “e” 作为局部变量或参数，表示为 Element “evt” 作为局部变量或参数，表示为 event “err” 作为局部变量或参数，表示为 error 重复变量建议使用 “i“, “j“, “k“ （依次类推）等名称的变量(全世界公认) 能缩写的单词尽量缩写 避免产生
5、令人误解的布尔值 isNotNumber isNan 处理错误的变量，必须在后面跟着 “Error” 初始化用的函数 必须使用 “init” 开头，如果一个页面只有初始化可以单独使用 init() 尽量做有意义的代码折行，不要让一行代码过长。(HTML 字符串除外) 操作符 建议 使用空格隔开 函数调用和方法 避免 使用空白 逗号（,） 建议 使用空白隔开。 不允许频繁使用 previousSibling 和 nextSibling词法结构 普通代码段应该看起来如下：while(!isDone)doSomething();isDone = moreToDo(); 变量定义方法如下：var a
6、= null,b = 1,c = 0; 函数定义方法如下：var funcA = function()var a = 0;. if 语句应该看起来像这样：if(someCondition)statements;else if(someOtherCondition)statements;elsestatements; for 语句应该看起来像这样：for(initialization; condition; update)statements; while 语句应该看起来像这样：while(!isDone)doSomething();isDone = moreToDo(); do . while
7、 语句应该看起来像这样：dostatements;while(condition); switch 语句应该看起来像这样：switch(condition)case “A“: statements; /注释case “B“: statements;break;default:statements;break; try . catch 语句应该看起来像这样：trystatements;catch(ex)statements;finallystatements; 单行的 if - else，while 或者 for 语句也必须加入括号：if(condition) statement;while(c
8、ondition) statement;for(intialization; condition; update)statement;注释规范 一些你不打算给其他人使用的函数，建议添加 ignore 让文档输出时可以忽略这段注释 一些相关的功能相关的函数，建议加上see Function 来对上下文做索引 对于一些函数不建议或则需要注意的使用方法，必须加上 deprecated 作为提醒 每个 js 文件的文件头都必须包含 fileoverview author, 建议加上version 每个函数都必须使用 JsDoc 来注释他的用意 每个带参数的函数必须包含 param 每个有返回值的函数必
9、须包含 return 构造函数必须加上 constructor 继承函数建议加上 base 表示其继承于哪个类 常用全局变量建议使用 JsDoc 的注释方式 一般的变量及局部变量才用 / 方式进行注释，建议在需要做注释的语句的上一行 其他详情请参考 JsDoc 注释方法其他 String 优化循环体内的字符串累加使用 join 方式。 例如:var r= ;for (var i=0;i100;i+)r.push(“hello“);var k= r.join(“); Switch 建议采用 hash-tableswitch 可以才用 Object 代替 例如:var a= “1“:doActio
10、n1,“2“:doAction2,function doAction1()function doAction2()a1(); 不建议使用 eval不推荐使用 eval 来执行脚本。除非用来解释已经确定安全的 json 数据。 不要使用 Function 构造器。 不要给 setTimeout 或者 setInterval 传递字符串参数。 注意 IE 的内存泄露问题 JavaScript 代码独立Javascript 不应该被包含在 HTML 文件中,除非这是段特定只属于此部分的代码。在 HTML中的 JavaScript 代码会明显增加文件大小，而且也不能对其进行缓存和压缩。CSS 命名规范
11、 id 和 class 命名采用该版块的英文单词或组合命名，并第一个单词小写，第二个单词首个字母大写，如：newRelease（最新产品 /new+Release) CSS 样式表各区块用注释说明 尽量使用英文命名原则 不用加中杠 尽量不缩写，除非一看就明白的单词经过组员激烈的讨论后，大家都比较偏向的命名方法如下：ID：统一采用驼峰式 ： 单字之间不以空格断开（例：camel case）或连接号（-，例：camel-case） 、底线（_，例：camel_case）连结，Class 命名法：驼峰式或下划线常见的 CSS 命名规则如下：主要的 mian.css模块 module.css基本共用
12、base.css布局，版面 layout.css主题 themes.css专栏 columns.css文字 font.css表单 forms.css补丁 mend.css打印 print.css头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链
13、接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service注册：regsiter状态：status投票：vote合作伙伴：partner(二)注释的写法:/* Footer */内容区/* End Footer */(三)id 的命名:(1)页面结构容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：colu
14、mn页面外围控制整体布局宽度：wrapper左右中：left right center(2)导航导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题: title摘要: summary(3)功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的: current小技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download
