JavaScript 编写规范

约定

  1. [强制] js文件统一使用UTF-8编码
  2. [强制] 所有js代码设立严格模式:统一在文件第一行添加 'use strict ';
  3. [强制] 产品页面中的所有js代码必须遵循CommonJs规范
  4. [强制] 所有代码必须经过混淆压缩后方可上线
  5. [强制] 获取DOM元素时必须通过J钩子获取
  6. [强制] 文件命名统一使用小写'.js',多个单词间用中划线分隔

html代码段

  <input class="j_Name" type="text" name="name">

js代码段

'use strict';

require('fecomponent/mobi-jswebview'); // 引入模块

$(function(){
  var $name = $('.j_Name');
  doSomething···
});

代码格式

  1. [强制] 采用2个空格进行缩进
  2. [强制] 语句末尾必须有分号 ; ,(帮助分清楚语句的起止,且降低风险)
  3. [强制] js中所有引号均使用单引号
  4. [强制] 每行字符不得超过100个字符,过长时使用换行
  5. [强制] 注释:产品页面代码中顶部必须加文件注释:提供文件的大体内容,有依赖关系和兼容性信息的也要在注释中说明,
/*
 * 文件大体内容
 * 依赖与兼容性信息[非必需项]
 */

[建议] if / else / for / while / function / switch / do / try / catch / finally 关键字后,加一个空格,在同一行插入 { 且在 { 后面进行换行

[建议] 逗号后面添加一个空格,如

var array = [1, 2, 3];  
function getName(userId, option) {  
  //
}

[建议] 初始化过长换行缩进

// 数组、对象初始化(数据较短):[],{}前后不加空格,',',':'后面加一空格
var arr = [1, 2, 3];  
var obj = {a: 1, b: 2, c: 3}; 

// 占用多行时, 缩进2个空格,不要为了让代码好看些而手工对齐
var inset = {  
  top: 10,
  right: 20,
  bottom: 15,
  left: 12
};

[建议] 代码片段间换行

// 使用空行来划分一组逻辑上相关联的代码片段
doSomethingTo(x);  
doSomethingElseTo(x);  
andThen(x);

nowDoSomethingWith(y);

andNowWith(z);

通用命名规范

  • [强制] 通过 J钩子 获取DOM元素,变量名以 $ 开头,遵循小驼峰法命名规则
  var $spuList = $('.j_SpuList');
  • [强制] 申明变量必须加上var 关键字,变量命名为英文,要具有实际的意义(即不要是a,b这种太过随意的变量)且遵循小驼峰法命名规则
  • [强制] 常量使用全部大写字符并用下划线分隔,如: NAMESLIKETHIS
  • [强制] 类的命名使用大驼峰命名规则,如:Amount, EventHandle
  • [建议] 函数与方法的命名必须为动词或者是动宾短语,如:obj.checkUser()

[建议] 特殊命名规范

  • 前面加 "is" 的变量名 应该 为布尔值,同理可以为 "has", "can" 或者 "should"等
  • "initialize" 或者 "init" 作为变量名应为已经实例化(初始化)完成的类或者其他类型的变量
  • 带有 "num" , "count","amount"等 开头的变量名约定为数字(对象)
  • 重复变量建议使用 "i", "j", "k" (依次类推)等名称的变量
  • 补充用语必须使用补充词,例如: get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end,等等

语法特性

变量:

  • [强制] 变量必须在声明初始化以后才能使用
  • [强制] 变量在使用前必须通过 var 定义,这样避免变量污染全局环境,且每个 var 只能声明一个变量
// 建议
var name;  
var age;

// 不建议
var name, age;  
  • [建议] 相关的变量集应该放在同一代码块中
  • [建议] 同一个函数内部,局部变量的声明置于顶端

[建议] 循环

  • 不要在循环体中包含函数表达式,事先将函数提取到循环体外,因为循环体中的函数表达式,运行过程中会生成循环次数个函数对象
  • 对循环内多次使用的不变值,在循环外用变量缓存
  • 对有序集合进行遍历时,缓存 length,虽然现代浏览器都对数组长度进行了缓存,但对于一些宿主对象和老旧浏览器的数组对象,在每次 length 访问时会动态计算元素个数,此时缓存 length 能有效提高程序性能
  • 对有序集合进行顺序无关的遍历时,使用逆序遍历。逆序遍历可以节省变量,代码比较优化
// 缓存
var width = wrap.offsetWidth + 'px';  
for (var i = 0, len = elements.length; i < len; i++) {  
  var element = elements[i];
  element.style.width = width;
  // ......
}

// 逆序遍历
var len = elements.length;  
while (len--) {  
  var element = elements[len];
  // ......
}

[强制] for-in 循环

  • 只用于 object/map/hash 的遍历
  • 用 for-in 循环遍历Array有时会出错, 因为它并不是从 0 到 length - 1 进行遍历, 而是所有出现在对象及其原型链的键值

函数申明:

  • [强制] 不要在块里面进行函数申明
  • [建议] 只允许在脚本的根语句或函数中声明函数. 如果确实需要在块中定义函数, 建议使用函数表达式来初始化变量,如:
// 禁止
if (x) {  
  function foo() {}
}
// 建议
if (x) {  
  var foo = function() {}
}

[建议] 闭包:

  • 可以使用闭包但是在使用闭包时需要小心。闭包保留了一个指向它封闭作用域的指针,所以,在给 DOM 元素附加闭包时,很可能会产生循环引用, 进一步导致内存泄漏。

[强制] 不要使用 with(){}

[强制] 不要修改内置对象的原型prototype

米奇

继续阅读此作者的更多文章