JavaScript脚本编码规范

1、键入文字键入文字JavaScript 脚本编码规范20132013 年年 0808 月月 0101 日日键入文字键入文字修改记录修改记录文件编号版本号拟制人/修改人拟制/修改日期更改理由主要更改内容（写要点即可）201308010900011.0刘杰2013-08-01初稿目录目录1前言 .42关于标签 .43脚本嵌入规则.53.1文件方式 .53.2脚本段方式 .54快速参考 .55命名规范 .65.1脚本段下的命名 .65.2组件下的命名.66特殊命名规范.87变量 .88布局 .98.1缩进 .98.2每行长度 .98.3块 .98.4空白 .118.5注释 .118.6参数注释 .12

2、8.7方法注释 .129其他建议 .139.1对象及数组的使用 .139.2逗号操作符 .139.3字符串限定符.139.4赋值表达式 .139.5恒等运算符和相等运算符 .13键入文字键入文字9.6减少 DOM 访问 .149.7始终使用分号.149.8EVAL 、SETINTERVAL、SETTIMEOUT.141 前言软件的长期价值直接源于其编码质量。在它的整个生命周期里，一个程序可能会被许多人阅读或修改。如果一个程序可以清晰的展现出它的结构和特征，那就能减少在以后对其进行修改时出错的可能性。所有的 JavaScript 代码都是暴露给公众的，所以我们更应该保证其质量。本规范的宗旨就是让

3、程序员写出的代码都是整洁并可供他人容易阅读的，尽量做到保证代码至少在IE6 以上和 FireFox 浏览器上的可用性及健壮性。2 脚本嵌入规则JavaScript 在项目中的使用包含两种方式。第一种直接嵌入在 HTML 代码中，第二种建立单独的脚本文件，然后由 html 页面调用。2.1文件方式文件名全为小写字母，单词以下划线分割，后缀名使用*.js。通用代码放在项目根目录下的js 目录中，模块专属代码放在模块目录的 js 目录中。/js/common.js / 通用的脚本库文件路径文件编码使用 GBK。文件方式的调用只使用 type 和 src 属性，如下示例：2.2脚本段方式当某页面所使用

4、的脚本只在本页面中使用，在项目的其他模块中没有详细代码时，且方法并不是很多，长度并不是很长（总长度不超过 200 行）的情况下可以采用脚本段方式，如果脚本过长或在项目中多次调用，请把脚本归并到.js 文件在页面中调用。把脚本段放在标签中包含。尽量不要重复划分多个脚本段。以下是嵌入方式的例子：alert(sample);键入文字键入文字3 命名规范脚本变量及方法的使用避免缩写。3.1脚本段下的命名结构结构规则规则说明说明方法mixedCase多个单词组成复合词、首单词小写、其他单词首字母大写方法内变量mixedCase多个单词组成复合词、首单词小写、其他单词首字母大写页面变量UPPER_CASE

5、多个单词组成复合词、每个单词首字母都大写。或者使用全部大写、单词之间以下划线分割的方式。3.1.1变量命名1. 常量以及全局变量必须全部使用大写字母，单词之间用下划线分隔。var MMS_FRAME, LIMIT_TIME, ALERT_MESSAGE2. 方法内变量使用多个单词组成复合词，首单词小写，其他单词首字母大写。var arrSampleList, objSubmitButton 3. 对于指代 DOM 对象的变量名，尽量使用 elm、obj 或 elm、obj 开头命名。 var objSubmitButton = document.getElementById(btn_submi

6、t);function getCheckElement(name) var obj = document.getElementById(name); / 没有歧义的方法内部对象命名直接使用 objreturn obj;4. 对于指代字符串对象的变量名，尽量使用 str 或 str 开头命名。var strMaxsizeLimit = 已超过最大限制;function alertMessage(message) var str = message; / 没有歧义的方法内部字符串变量命名直接使用 str alert(str);5. 对于指代数字的变量名，尽量使用 num 或 num 开头命名。va

7、r numMaxCount = 300;function isMaxCount(size) var num = 1000; / 没有歧义的方法内部数字命名直接使用 numreturn (num size);键入文字键入文字6. 布尔值的变量命名前面加is，同理还可以为 has, can 或者 should。var isChecked, hasTowApple, canDoit; 7. 循环变量使用i, j, k （依次类推）等名称的变量。for (var i=0; i10; i+) .8. 用于返回结果变量使用 result 或者以 ret 开头的变量。function getName() v

8、ar result; / 或者使用 retNameresult = sina;return result;9. 其他一些建议的约定，例如临时变量使用 tmp 或以 tmp 开头的命名；横向纵向坐标 x,y；捕获的错误变量 e；等等。10.表示数组的变量在单词前加 arr 进行修饰。var arrCity = 南京, 上海;11.避免使用否定的布尔变量名称，例如： isNotError, isNotFound 为非法3.1.2方法命名1. 方法命名使用多个单词组成复合词，首单词小写，其他单词首字母大写。function openWin() 2. 方法命名的第一个单词尽量使用动词。例如： get/

9、set, add/remove, create/destroy, start/stop, insert/delete, begin/end, 等等。function getName() function beginLoop() 键入文字键入文字3.2组件下的命名API 命名风格：结构结构规则规则说明说明Module（模块）lowercase小写的一个英文单词，不要使用多个单词组成Class（类）CamelCase多个单词组成复合词、每个单词首字母都大写public method（公共方法）mixedCase多个单词组成复合词、首单词小写、其他单词首字母大写public var（公共变量）mix

10、edCase多个单词组成复合词、首单词小写、其他单词首字母大写Constant（常量）CamelCase UPPER_CASE多个单词组成复合词、每个单词首字母都大写。或者使用全部大写、单词之间以下划线分割的方式。结构内部命名风格：结构结构规则规则private method（私有方法）_mixedCaseprivate var（私有变量）_mixedCasemethod args（方法参数）_mixedCase, mixedCaselocal vars（局部变量）_mixedCase, mixedCase1. 类名称必须为名词并使用骆驼命名规则：Account, EventHandler2.

11、 常量必须在对象（类）或者枚举变量的前部声明。枚举变量的命名必须要有实际的意义，并且其成员必须使用骆驼命名规则或使用大写：var NodeTypes = Element : 1, DOCUMENT: 23. 当变量名为一个缩写词时，不要使用全大写方式：getInnerHtml(), getXml(), XmlDocument4. 方法的命名应该为一个动词或者动词短语：obj.getSomeValue()5. 公有类的命名必须使用混合名称（mixedCase）命名。6. 私有类的变量属性成员必须使用混合名称（mixedCase）命名，并前面下下划线（_）：键入文字键入文字var MyClass

12、= function() var _buffer; this.doSomething = function() ;7. 变量如果设置为私有或者被有意定义为私有，则前面必须添加下划线：this._somePrivateVariable = statement;8. 通用的变量一般使用与其名字一致的类型名称：setTopic(topic) / 变量 topic 为 Topic 类型的变量9. 所有的变量名使用英文名称。10.变量如有较广的作用域（large scope），必须使用全局变量；此时可以设计成一个类的成员。相对的如作用域较小或为私有变量则使用简洁的单词命名。 11.如果变量有其隐含的返回

13、值，则避免使用其相似的方法： getHandler(); / 避免使用 getEventHandler()12.公有变量必须清楚的表达其自身的属性，避免字义含糊不清，例如： MouseEventHandler，而非 MseEvtHdlr。请再次注意这条规定，这样做得的好处是非常明显的。它能明确的表达表达式所定义的含义。例如： dojo.events.mouse.Handler / 而非 dojo.events.mouse.MouseEventHandler13.类/构造函数 可以使用 扩展其基类的名称命名，这样可以正确、迅速的找到其基类的名称： EventHandler组件下的特殊命名规范组件

14、下的特殊命名规范1. 术语 initialize 或者 init 作为变量名应为已经实例化（初始化）完成的类或者其他类型的变量。2. 错误类建议在变量名称后加上 Exception 或者 Error。3. 方法如果返回一个类，则应该在名称上说明返回什么；如果是一个过程，则应该说明做了什么。 4 变量的定义及使用1. 变量必须声明后再使用，必须使用 var 声明变量。键入文字键入文字错误name = jack; / 未声明变量直接使用错误name = jack; var name = rose; / 声明语句在使用语句之后正确var name; / 此处不能省略name = jack; 2. 建

15、议变量声明时做初始化，可用 null 值做初始化。3. 变量的定义要准确，不能产生歧义。4. 把有联系的变量尽量定义在一起。var day, week, month;var objButtonSetDay, objButtonSetWeek, objButtonSetMonth;5. 变量应该放在和他有关系的代码块中。function setName() var i = 0; / 此处的声明应该放置到 do some thing 下面. do some thing .var i = 0; / 放在此处使代码更紧凑，也更容易理解while (i 10) .6. 使变量具有最小的声明周期。不建议使

16、用的方式var tmp, arrBox = .;for (var i = 0; i 10; i+ ) tmp = arrBoxi;alert(tmp0);建议使用的方式var arrBox = .;for (var i = 0; i 10; i+ ) var tmp = arrBoxi; / tmp 变量只在循环体内使用，则在循环体内声明alert(tmp0);键入文字键入文字7. 条件表达式：a)应该尽量避免复杂的条件表达式，如有必要可以使用临时布尔变量。 / 不好的方式if (a = b & b = c & c = d) / 循环体太长或太复杂，不要使用此方式 alert(

17、ok);/ 建议的方式var isOk = (a = b & b = c & c = d);if (isOk) alert(ok);b)应避免在条件表达式中加入执行语句。if (a = b) / 不要使用if (a = b) / 正确5 布局5.1缩进缩进的单位为四个空格。避免使用 Tab 键来缩进，因为没有一个统一的 tab 长短标准。虽然使用空格会增加文件的大小，但在局域网中几乎可以忽略,且在最小化过程中也可被消除掉。整合在 HTML/JSP 中的代码段首缩进，应该和标签保持相同。5.2每行长度避免每行超过 150 个字符。当一条语句一行写不下时，请考虑折行。在运算符号，最

18、好是逗号后换行。在运算符后换行可以减少因为复制粘贴产生的错误被分号掩盖的几率。下一行应该缩进 8 个空格。var str = sample text + sample text line 2;5.3块1. 普通代码段应该看起来如下：while (!isDone) doSomething(); isDone = moreToDo();键入文字键入文字2. if 语句如下：if (someCondition) statements; else if (someOtherCondition) statements; else statements;3. for 语句如下：for (initializ

19、ation; condition; update) statements;4. while 语句如下：while (!isDone) doSomething(); isDone = moreToDo();5. do.while 语句如下：do statements; while (condition);6. switch 语句如下：switch (condition) case ABC: statements; /fallthroughcase DEF: statements; break;default: statements; /最后的 case 语句不需要使用 break7. try.c

20、atch.finally 语句如下：try statements; catch (e) statements;键入文字键入文字 finally statements;8. with 语句，不要使用不要使用 with 语句语句。9. 只有一条语句的 if-else, while 或 for 块不能省略，也不要放在同一行上书写：if (condition) statement; while (condition) statement; for (intialization; condition; update) statement; / 正确if (confition) statement;whi

21、le (condition) statement; for (intialization; condition; update) statement;5.4空白1. 保留字后面应该都跟上一个空格：var foo = function() 2. 逗号后面跟一个空格var foo = function(name, age, sex) 3. 冒号的前后各放一个空格var strPosition = (a b) ? top : bottom;4. for 语句的分号后跟一个空格for (var i = 0; i 20) return realname.substr(0, 15) + . + realn

22、ame.substr(realname.length-4, 4); else return realname;7 其他建议7.1对象及数组的使用使用代替 new Object()。使用代替 new Array()。当成员名是一组有序的数字时使用数组来保存数据。当成员名是无规律的字符串或其他时使用对象来保存数据。var arrCity = new Array(南京, 上海); / 不要这样写var arrCity = 南京, 上海; / 正确/ 不要这样写var objPerson = new Object();objP = jakson; objPerson.sex = m

23、ale;/ 正确Var objPerson = name : jakson, sex : male;7.2字符串限定符没有特殊理由的情况下统一使用单引号作为字符串的限定符。例如：var strIntro = Im a teacher. Say : ”hello!”;对于字符串中包含的单引号可以使用进行转义。键入文字键入文字7.3恒等运算符和相等运算符为了程序的可读性，建议少用相等运算符进行错值比较。var a; / 如果要明确比较 a 是 null/undefined/某类型值，不要使用=alert(a = null); / truealert(a = null); / falsealert(

24、a = undefined); / true7.4减少 DOM 访问三条指导建议：缓存已经访问过的元素var objButton = document.getElementById(button); / 在使用前置入变量for (var I = 0; I 10; I+) / 不要直接获取再操作document.getElementById(button).innerHTML += i.toString(); / 这样正确objButton.innerHTML += i.toString();离线更新节点, 再将它们添加到树中for (var i = 0; i items.length; i+)

25、 var item = document.createElement(li);item.appendChild(document.createTextNode(Option + i);list.appendChild(item);/ 上面这样的操作是很低效的/ 正确 var fragment = document.createDocumentFragment();for (var i=0; i items.length; i+) var item = document.createElement(li); item.appendChild(document.createTextNode(Opt

26、ion + i); fragment.appendChild(item);list.appendChild(fragment);避免使用 JavaScript 输出页面布局-应该是 CSS 的事儿element.style.backgroundColor = blue;element.style.color = red;element.style.fontSize = 12em;/ 尽量不要使用 javascript 同时更新一个元素的 style键入文字键入文字/ 应该定义 class，然后更新元素的 class .newStyle background-color: blue; color

27、: red; font-size: 12em; element.className = newStyle;7.5始终使用分号语句结束后请总是用分号结束它。var someItem = some string; / 这里的分号不要省略，虽然对有些浏览器不用分号也可以var doSomething = function() return something; / 这里的分号不要省略，虽然对有些浏览器不用分号也可以7.6eval 、setInterval、setTimeout我们知道 eval 给了我们接近 javascript 编译器的机会，我们可以执行一串给 eval 的字符串参数。实质上这样不

28、仅降低了你脚本的性能，而且它也会给那段字符串代码过于高的权限而导致安全问题，所以避免使用 eval。直接传递字符串给 setInterval 或是 setTimeout 是很低效代码也很难维护的，而且这也会遇到跟 eval 一样的问题，最好传递一个函数名称给它们。/ 不好的方式setInterval(document.getElementById(container).innerHTML += number: + i, 3000);/ 使用 function 更恰当setInterval(someFunction, 3000);8 代码示例8.1脚本段/ 当前页面的表单对象var MMS_FO

29、RM;/ 页面载入后的初始化操作window.onload = function() / 表单对象引用 MMS_FORM = document.forms0;/ 让所有name为mmsId的checkbox元素都选中function checkAllMmsid() for (var i = 0; i MMS_FORM.elements.length; i+) if (MMS_FORM. = mmsId) MMS_FORM.elementsi.checked = all.checked;键入文字键入文字 / 取消单个彩信推荐的表单/ mmsId 需提交的彩信idfun

30、ction singleCancel(mmsId) MMS_FORM.elementsmethod.value = cancel; MMS_FORM.elementsids.value = mmsId; MMS_FORM.submit();/ 选中的彩信推荐项目一次性提交取消function batchCancel() if (check(1) MMS_FORM.elementsmethod.value = cancel; MMS_FORM.submit(); /* * 检查用户选中彩信推荐checkbox的情况 * sign 0 推荐操作 1 取消推荐操作 * return 如果未选择或则不

31、存在选项则返回false * * chengyao 2009-09-01 */function check(sign) var strCheckedValue = ; var j = 0; if (typeof MMS_FORM.elementsmmsId != undefined) var countMmsid = MMS_FORM.elementsmmsId.length; / 是否存在目标选择元素 if (MMS_FORM.mmsId) / 是否多个选择元素 / chengyao 2009-09-03 因为可能存在没有元素的情况，故增加判断逻辑 if (MMS_FORM.elements

32、mmsId.length) for (var i = 0; i 1) strCheckedValue += ,; strCheckedValue += objMmsid.value; / 单个元素的情况 else if (MMS_FORM.elementsmmsId.checked) strCheckedValue += MMS_FORM.elementsmmsId.value; if (strCheckedValue = ) alert(请先选择信息); return false; MMS_FORM.ids.value = strCheckedValue; return true; else if (sign = 0) alert(没有可推荐的信息！); else alert(没有可取消推荐的信息！); return false;键入文字键入文字8.2脚本文件/* 文