【腾讯前端代码规范】DevelopmentCodes

Web技术中心代码规范

前言

软件的长期价值直接源于其编码质量。在它的整个生命周期里，一个程序可能会被许多人阅读或修改。若是一个程序能够清晰的展示出它的结构和特征，那就能减小在之后对其进行修改时出错的可能性，编程规范能够帮助程序员们增长程序的健壮性。基本全部的前端代码都是暴露给公众的，因此咱们更应该保证其质量。

规范理念

Any violation to this guide is allowed if it enhances readability. 全部的代码都要变成可供他人容易阅读的。 --引用自Dojo Javascript 语法规范

规范详解

JS命名规范 1 必须使用 Tab 键进行代码缩进，以节约代码大小，建议设置编辑器的tab为4个空格的宽度（而不是4个空格） 2 接口风格 结构 规则 例如 类 驼峰式 ModuleClass() 公有方法 混合式 getPosition() 公有变量 混合式 frameStyle 常量 大写式 DEFAULT_FRAME_LAYOUT 3 其余建议风格，非必要 结构 规则 公有方法和属性 混合，例子：mixedCase 私有方法和属性 混合，例子：_mixedCase 方法（method）参数 混合，例子：mixedCase 本地（local）变量 混合，例子：mixedCase 4 全部语句结束后，必须使用 ; 号结束 5 全部变量必须是有意义的英文，严厉禁止拼音 6 变量容许使用公认英文缩写 7 类命名必须是驼峰式 8 常量必须全部单词大写，而且每一个单词间加下划线 9 枚举类型时，枚举的命名必须有意义，枚举与枚举成员必须以驼峰式 10 常量和枚举必须在最前端定义，merge 时注意，必须把常量与枚举定义的文件放在文件列表的第一位 11 变量内的简写单词若是在开头则全小写：xmlDocument，若是不在开头则全大写：loadXML！！！ 12 "on"只能用做事件的命名 13 函数开头必须是有意义的动词或动词短语 14 私有类的变量属性成员 建议 使用混合式命名，并前面下下划线 15 临时的全局变量放到一个全局的哈希表里，方便变量回收 16 全部全局变量必须初始化，尽可能少用全局变量 17 大括号前面不能有换行符 18 保留字以及特有的dom属性不能做为变量名 特殊命名约定 19 前面加 “is” 的变量名应该为布尔值，亦可以使用 “can” “has” “should” 20 前面加 ”str” 的变量名应该为字符串 21 前面加 “arr” 的变量名应该为数组 22 前面加 “num” 或 “count” 的变量名应该为数字 23 “o” 做为局部变量或参数，表示为Object 24 “e” 做为局部变量或参数，表示为Element 25 “evt” 做为局部变量或参数，表示为event 26 “err” 做为局部变量或参数，表示为error 27 重复变量建议使用 "i", "j", "k" （依次类推）等名称的变量(全世界公认) 28 能缩写的单词尽可能缩写 29 避免产生使人误解的布尔值 isNotNumber isNan 30 处理错误的变量，必须在后面跟着 “Error” 31 初始化用的函数 必须使用 “init” 开头，若是一个页面只有初始化能够单独使用 init() 32 尽可能作有意义的代码折行，不要让一行代码过长。(HTML 字符串除外) 33 操做符 建议 使用空格隔开 34 函数调用和方法 避免 使用空白 35 逗号（,） 建议 使用空白隔开。 36 不容许频繁使用 previousSibling 和 nextSibling 词法结构 37 普通代码段应该看起来以下： while(!isDone){ doSomething(); isDone = moreToDo(); } 38 变量定义方法以下： var a = null, b = 1, c = 0; 39 函数定义方法以下： var funcA = function(){ var a = 0; ... } 40 if 语句应该看起来像这样： if(someCondition){ statements; }else if(someOtherCondition){ statements; }else{ statements; } 41 for 语句应该看起来像这样： for(initialization; condition; update){ statements; } 42 while 语句应该看起来像这样： while(!isDone){ doSomething(); isDone = moreToDo(); } 43 do ... while 语句应该看起来像这样： do{ statements; }while(condition); 44 switch 语句应该看起来像这样： switch(condition){ case "A": statements; //注释 case "B": statements; break; default: statements; break; } 45 try ... catch 语句应该看起来像这样： try{ statements; }catch(ex){ statements; }finally{ statements; } 46 单行的 if - else，while 或者 for 语句也必须加入括号： if(condition){ statement; } while(condition){ statement; } for(intialization; condition; update){ statement; }

注释规范 47 一些你不打算给其余人使用的函数，建议添加 @ignore 让文档输出时能够忽略这段注释 48 一些相关的功能相关的函数，建议加上@see Function 来对上下文作索引 49 对于一些函数不建议或则须要注意的使用方法，必须加上 @deprecated做为提醒 50 每一个js文件的文件头都必须包含 @fileoverview @author, 建议加上@version 51 每一个函数都必须使用JsDoc 来注释他的用意 52 每一个带参数的函数必须包含 @param 53 每一个有返回值的函数必须包含 @return 54 构造函数必须加上 @constructor 55 继承函数建议加上 @base 表示其继承于哪一个类 56 经常使用全局变量建议使用 JsDoc 的注释方式 57 通常的变量及局部变量才用 // 方式进行注释，建议在须要作注释的语句的上一行 58 其余详情请参考 JsDoc 注释方法 其余 59 String 优化 循环体内的字符串累加使用join方式。 例如: var r= []; for (var i=0;i<100;i++){ r.push("hello"); } var k= r.join(""); 60 Switch 建议采用hash-table switch 能够才用 Object代替 例如: var a= { "1":doAction1, "2":doAction2, } function doAction1(){ }

function doAction2(){
}
a[1]();

61 不建议使用eval 不推荐使用eval来执行脚本。除非用来解释已经肯定安全的json数据。 62 不要使用Function构造器。 63 不要给setTimeout或者setInterval传递字符串参数。 64 注意 IE 的内存泄露问题 65 JavaScript代码独立 Javascript不该该被包含在HTML文件中,除非这是段特定只属于此部分的代码。在HTML中的JavaScript代码会明显增长文件大小，并且也不能对其进行缓存和压缩。

CSS命名规范 1 id和class命名采用该版块的英文单词或组合命名，并第一个单词小写，第二个单词首个字母大写，如：newRelease（最新产品/new+Release) 2 CSS样式表各区块用注释说明 3 尽可能使用英文命名原则 4 不用加中杠 5 尽可能不缩写，除非一看就明白的单词 通过组员激烈的讨论后，你们都比较偏向的命名方法以下： ID：统一采用驼峰式 ：　单字之间不以空格断开（例：camel case）或链接号（-，例：camel-case）、底线（_，例：camel_case）连结， Class 命名法：驼峰式或下划线 常见的CSS命名规则以下： 主要的 mian.css 模块 module.css 基本共用 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 友情连接：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 栏目：column 页面外围控制总体布局宽度：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 投票：vote 合做伙伴：partner 友情连接：link 版权：copyright (四)class的命名: (1)颜色:使用颜色的名称或者16进制代码,如 <!-- lang: css --> .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; } （2）字体大小,直接使用”font+字体大小”做为名称,如 <!-- lang: css --> .font12px { font-size: 12px; } .font9pt {font-size: 9pt; } (3)对齐样式,使用对齐目标的英文名称,如 <!-- lang: css --> .left { float:left; } .bottom { float:bottom; } (4)标题栏样式,使用”类别+功能”的方式命名,如

<!-- lang: css -->
.barnews { }    
.barproduct { }