1 语言特性
1.1 变量
[强制] 变量、函数在使用前必须先定义。
解释：
不通过 var 定义变量将导致变量污染全局环境。
示例：
// good
var name = 'MyName';
// bad
name = 'MyName';
原则上不建议使用全局变量，对于已有的全局变量或第三方框架引入的全局变量，需要根据检查工具的语法标识。
示例：
/* globals jQuery */
var element = jQuery('#element-id');
[强制] 每个 var 只能声明一个变量。
解释：
一个 var 声明多个变量，容易导致较长的行长度，并且在修改时容易造成逗号和分号的混淆。
示例：
// good
var hangModules = [];
var missModules = [];
var visited = {};
// bad
var hangModules = [],
missModules = [],
visited = {};
[强制] 变量必须 即用即声明，不得在函数或其它形式的代码块起始位置统一声明所有变量。
解释：
变量声明与使用的距离越远，出现的跨度越大，代码的阅读与维护成本越高。虽然JavaScript的变量是函数作用域，还是应该根据编程中的意图，缩小变量出现的距离空间。
示例：
// good
function kv2List(source) {
var list = [];
for (var key in source) {
if (source.hasOwnProperty(key)) {
var item = {
k: key,
v: source[key]
};
list.push(item);
}
}
return list;
}
// bad
function kv2List(source) {
var list = [];
var key;
var item;
for (key in source) {
if (source.hasOwnProperty(key)) {
item = {
k: key,
v: source[key]
};
list.push(item);
}
}
return list;
}
1.2 条件
[强制] 在 Equality Expression 中使用类型严格的 ===。仅当判断 null 或 undefined 时，允许使用 == null。
解释：
使用 === 可以避免等于判断中隐式的类型转换。
示例：
// good
if (age === 30) {
// ......
}
// bad
if (age == 30) {
// ......
}
[建议] 尽可能使用简洁的表达式。
示例：
// 字符串为空
// good
if (!name) {
// ......
}
// bad
if (name === '') {
// ......
}
// 字符串非空
// good
if (name) {
// ......
}
// bad
if (name !== '') {
// ......
}
// 数组非空
// good
if (collection.length) {
// ......
}
// bad
if (collection.length > 0) {
// ......
}
// 布尔不成立
// good
if (!notTrue) {
// ......
}
// bad
if (notTrue === false) {
// ......
}
// null 或 undefined
// good
if (noValue == null) {
// ......
}
// bad
if (noValue === null || typeof noValue === 'undefined') {
// ......
}
[建议] 按执行频率排列分支的顺序。
解释：
按执行频率排列分支的顺序好处是：
- 阅读的人容易找到最常见的情况，增加可读性。
- 提高执行效率。
[建议] 对于相同变量或表达式的多值条件，用 switch 代替 if。
示例：
// good
switch (typeof variable) {
case 'object':
// ......
break;
case 'number':
case 'boolean':
case 'string':
// ......
break;
}
// bad
var type = typeof variable;
if (type === 'object') {
// ......
}
else if (type === 'number' || type === 'boolean' || type === 'string') {
// ......
}
[建议] 如果函数或全局中的 else 块后没有任何语句，可以删除 else。
示例：
// good
function getName() {
if (name) {
return name;
}
return 'unnamed';
}
// bad
function getName() {
if (name) {
return name;
}
else {
return 'unnamed';
}
}
1.3 循环
[建议] 不要在循环体中包含函数表达式，事先将函数提取到循环体外。
解释：
循环体中的函数表达式，运行过程中会生成循环次数个函数对象。
示例：
// good
function clicker() {
// ......
}
for (var i = 0, len = elements.length; i < len; i++) {
var element = elements[i];
addListener(element, 'click', clicker);
}
// bad
for (var i = 0, len = elements.length; i < len; i++) {
var element = elements[i];
addListener(element, 'click', function () {});
}
[建议] 对循环内多次使用的不变值，在循环外用变量缓存。
示例：
// good
var width = wrap.offsetWidth + 'px';
for (var i = 0, len = elements.length; i < len; i++) {
var element = elements[i];
element.style.width = width;
// ......
}
// bad
for (var i = 0, len = elements.length; i < len; i++) {
var element = elements[i];
element.style.width = wrap.offsetWidth + 'px';
// ......
}
[建议] 对有序集合进行遍历时，缓存 length。
解释：
虽然现代浏览器都对数组长度进行了缓存，但对于一些宿主对象和老旧浏览器的数组对象，在每次 length 访问时会动态计算元素个数，此时缓存 length 能有效提高程序性能。
示例：
for (var i = 0, len = elements.length; i < len; i++) {
var element = elements[i];
// ......
}
[建议] 对有序集合进行顺序无关的遍历时，使用逆序遍历。
解释：
逆序遍历可以节省变量，代码比较优化。
示例：
var len = elements.length;
while (len--) {
var element = elements[len];
// ......
}
1.4 类型
1.4.1 类型检测
[建议] 类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 == null。
示例：
// string
typeof variable === 'string'
// number
typeof variable === 'number'
// boolean
typeof variable === 'boolean'
// Function
typeof variable === 'function'
// Object
typeof variable === 'object'
// RegExp
variable instanceof RegExp
// Array
variable instanceof Array
// null
variable === null
// null or undefined
variable == null
// undefined
typeof variable === 'undefined'
1.4.2 类型转换
[建议] 转换成 string 时，使用 + ''。
示例：
// good
num + '';
// bad
new String(num);
num.toString();
String(num);
[建议] 转换成 number 时，通常使用 +。
示例：
// good
+str;
// bad
Number(str);
[建议] string 转换成 number，要转换的字符串结尾包含非数字并期望忽略时，使用 parseInt。
示例：
var width = '200px';
parseInt(width, 10);
[强制] 使用 parseInt 时，必须指定进制。
示例：
// good
parseInt(str, 10);
// bad
parseInt(str);
[建议] 转换成 boolean 时，使用 !!。
示例：
var num = 3.14;
!!num;
[建议] number 去除小数点，使用 Math.floor / Math.round / Math.ceil，不使用 parseInt。
示例：
// good
var num = 3.14;
Math.ceil(num);
// bad
var num = 3.14;
parseInt(num, 10);
1.5 字符串
[强制] 字符串开头和结束使用单引号 '。
解释：
- 实际使用中，字符串经常用来拼接 HTML。为方便 HTML 中包含双引号而不需要转义写法。
示例：
var str = '我是一个字符串';
var html = '<div class="cls">拼接HTML可以省去双引号转义</div>';
[建议] 使用 数组 或 + 拼接字符串。
解释：
- 使用
+拼接字符串，如果拼接的全部是 StringLiteral，压缩工具可以对其进行自动合并的优化。所以，静态字符串建议使用+拼接。 - 在现代浏览器下，使用
+拼接字符串，性能较数组的方式要高。 - 如需要兼顾老旧浏览器，应尽量使用数组拼接字符串。
示例：
// 使用数组拼接字符串
var str = [
// 推荐换行开始并缩进开始第一个字符串, 对齐代码, 方便阅读.
'<ul>',
'<li>第一项</li>',
'<li>第二项</li>',
'</ul>'
].join('');
// 使用 `+` 拼接字符串
var str2 = '' // 建议第一个为空字符串, 第二个换行开始并缩进开始, 对齐代码, 方便阅读
+ '<ul>',
+ '<li>第一项</li>',
+ '<li>第二项</li>',
+ '</ul>';
[建议] 使用字符串拼接的方式生成HTML，需要根据语境进行合理的转义。
解释：
在 JavaScript 中拼接，并且最终将输出到页面中的字符串，需要进行合理转义，以防止安全漏洞。下面的示例代码为场景说明，不能直接运行。
示例：
// HTML 转义
var str = '<p>' + htmlEncode(content) + '</p>';
// HTML 转义
var str = '<input type="text" value="' + htmlEncode(value) + '">';
// URL 转义
var str = '<a href="/?key=' + htmlEncode(urlEncode(value)) + '">link</a>';
// JavaScript字符串 转义 + HTML 转义
var str = '<button onclick="check(\'' + htmlEncode(strLiteral(name)) + '\')">提交</button>';
[建议] 复杂的数据到视图字符串的转换过程，选用一种模板引擎。
解释：
使用模板引擎有如下好处：
- 在开发过程中专注于数据，将视图生成的过程由另外一个层级维护，使程序逻辑结构更清晰。
- 优秀的模板引擎，通过模板编译技术和高质量的编译产物，能获得比手工拼接字符串更高的性能。
- 模板引擎能方便的对动态数据进行相应的转义，部分模板引擎默认进行HTML转义，安全性更好。
- artTemplate: 体积较小，在所有环境下性能高，语法灵活。
- dot.js: 体积小，在现代浏览器下性能高，语法灵活。
- etpl: 体积较小，在所有环境下性能高，模板复用性高，语法灵活。
- handlebars: 体积大，在所有环境下性能高，扩展性高。
- hogon: 体积小，在现代浏览器下性能高。
- nunjucks: 体积较大，性能一般，模板复用性高。
1.6 对象
[强制] 使用对象字面量 {} 创建新 Object。
示例：
// good
var obj = {};
// bad
var obj = new Object();
[建议] 对象创建时，如果一个对象的所有 属性 均可以不添加引号，建议所有 属性 不添加引号。
示例：
var info = {
name: 'someone',
age: 28
};
[建议] 对象创建时，如果任何一个 属性 需要添加引号，则所有 属性 建议添加 '。
解释：
如果属性不符合 Identifier 和 NumberLiteral 的形式，就需要以 StringLiteral 的形式提供。
示例：
// good
var info = {
'name': 'someone',
'age': 28,
'more-info': '...'
};
// bad
var info = {
name: 'someone',
age: 28,
'more-info': '...'
};
[强制] 不允许修改和扩展任何原生对象和宿主对象的原型。
示例：
// 以下行为绝对禁止
String.prototype.trim = function () {
};
[建议] 属性访问时，尽量使用 .。
解释：
属性名符合 Identifier 的要求，就可以通过 . 来访问，否则就只能通过 [expr] 方式访问。
通常在 JavaScript 中声明的对象，属性命名是使用 Camel 命名法，用 . 来访问更清晰简洁。部分特殊的属性（比如来自后端的 JSON ），可能采用不寻常的命名方式，可以通过 [expr] 方式访问。
示例：
info.age;
info['more-info'];
[建议] for in 遍历对象时, 使用 hasOwnProperty 过滤掉原型中的属性。
示例：
var newInfo = {};
for (var key in info) {
if (info.hasOwnProperty(key)) {
newInfo[key] = info[key];
}
}
1.7 数组
[强制] 使用数组字面量 [] 创建新数组，除非想要创建的是指定长度的数组。
示例：
// good
var arr = [];
// bad
var arr = new Array();
[强制] 遍历数组不使用 for in。
解释：
数组对象可能存在数字以外的属性, 这种情况下 for in 不会得到正确结果。
示例：
var arr = ['a', 'b', 'c'];
// 这里仅作演示, 实际中应使用 Object 类型
arr.other = 'other things';
// 正确的遍历方式
for (var i = 0, len = arr.length; i < len; i++) {
console.log(i);
}
// 错误的遍历方式
for (var i in arr) {
console.log(i);
}
[建议] 不因为性能的原因自己实现数组排序功能，尽量使用数组的 sort 方法。
解释：
自己实现的常规排序算法，在性能上并不优于数组默认的 sort 方法。以下两种场景可以自己实现排序：
- 需要稳定的排序算法，达到严格一致的排序结果。
- 数据特点鲜明，适合使用桶排。
[建议] 清空数组使用 .length = 0。
1.8 函数
1.8.1 函数长度
[建议] 一个函数的长度控制在 50 行以内。
解释：
将过多的逻辑单元混在一个大函数中，易导致难以维护。一个清晰易懂的函数应该完成单一的逻辑单元。复杂的操作应进一步抽取，通过函数的调用来体现流程。
特定算法等不可分割的逻辑允许例外。
示例：
function syncViewStateOnUserAction() {
if (x.checked) {
y.checked = true;
z.value = '';
}
else {
y.checked = false;
}
if (a.value) {
warning.innerText = '';
submitButton.disabled = false;
}
else {
warning.innerText = 'Please enter it';
submitButton.disabled = true;
}
}
// 直接阅读该函数会难以明确其主线逻辑，因此下方是一种更合理的表达方式：
function syncViewStateOnUserAction() {
syncXStateToView();
checkAAvailability();
}
function syncXStateToView() {
y.checked = x.checked;
if (x.checked) {
z.value = '';
}
}
function checkAAvailability() {
if (a.value) {
clearWarnignForA();
}
else {
displayWarningForAMissing();
}
}
1.8.2 参数设计
[建议] 一个函数的参数控制在 6 个以内。
解释：
除去不定长参数以外，函数具备不同逻辑意义的参数建议控制在 6 个以内，过多参数会导致维护难度增大。
某些情况下，如使用 AMD Loader 的 require 加载多个模块时，其 callback 可能会存在较多参数，因此对函数参数的个数不做强制限制。
[建议] 通过 options 参数传递非数据输入型参数。
解释：
有些函数的参数并不是作为算法的输入，而是对算法的某些分支条件判断之用，此类参数建议通过一个 options 参数传递。
如下函数：
/**
* 移除某个元素
*
* @param {Node} element 需要移除的元素
* @param {boolean} removeEventListeners 是否同时将所有注册在元素上的事件移除
*/
function removeElement(element, removeEventListeners) {
element.parent.removeChild(element);
if (removeEventListeners) {
element.clearEventListeners();
}
}
可以转换为下面的签名：
/**
* 移除某个元素
*
* @param {Node} element 需要移除的元素
* @param {Object} options 相关的逻辑配置
* @param {boolean} options.removeEventListeners 是否同时将所有注册在元素上的事件移除
*/
function removeElement(element, options) {
element.parent.removeChild(element);
if (options.removeEventListeners) {
element.clearEventListeners();
}
}
这种模式有几个显著的优势：
boolean型的配置项具备名称，从调用的代码上更易理解其表达的逻辑意义。- 当配置项有增长时，无需无休止地增加参数个数，不会出现
removeElement(element, true, false, false, 3)这样难以理解的调用代码。 - 当部分配置参数可选时，多个参数的形式非常难处理重载逻辑，而使用一个 options 对象只需判断属性是否存在，实现得以简化。
1.8.3 空函数
[建议] 空函数不使用 new Function() 的形式。
示例：
var emptyFunction = function () {};
[建议] 对于性能有高要求的场合，建议存在一个空函数的常量，供多处使用共享。
示例：
var EMPTY_FUNCTION = function () {};
function MyClass() {
}
MyClass.prototype.abstractMethod = EMPTY_FUNCTION;
MyClass.prototype.hooks.before = EMPTY_FUNCTION;
MyClass.prototype.hooks.after = EMPTY_FUNCTION;
2 浏览器环境
2.1 DOM
2.1.1 元素获取
[建议] 对于单个元素，尽可能使用 document.getElementById 获取，避免使用document.all。
[建议] 对于多个元素的集合，尽可能使用 context.getElementsByTagName 获取。其中 context 可以为 document 或其他元素。指定 tagName 参数为 * 可以获得所有子元素。
[建议] 遍历元素集合时，尽量缓存集合长度。如需多次操作同一集合，则应将集合转为数组。
解释：
原生获取元素集合的结果并不直接引用 DOM 元素，而是对索引进行读取，所以 DOM 结构的改变会实时反映到结果中。
示例：
<div></div>
<span></span>
<script>
var elements = document.getElementsByTagName('*');
// 显示为 DIV
alert(elements[0].tagName);
var div = elements[0];
var p = document.createElement('p');
docpment.body.insertBefore(p, div);
// 显示为 P
alert(elements[0].tagName);
</script>
[建议] 获取元素的直接子元素时使用 children。避免使用childNodes，除非预期是需要包含文本、注释和属性类型的节点。
2.1.2 样式获取
[建议] 获取元素实际样式信息时，应使用 getComputedStyle 或 currentStyle。
解释：
通过 style 只能获得内联定义或通过 JavaScript 直接设置的样式。通过 CSS class 设置的元素样式无法直接通过 style 获取。
2.1.3 样式设置
[建议] 尽可能通过为元素添加预定义的 className 来改变元素样式，避免直接操作 style 设置。
[强制] 通过 style 对象设置元素样式时，对于带单位非 0 值的属性，不允许省略单位。
解释：
除了 IE，标准浏览器会忽略不规范的属性值，导致兼容性问题。
2.1.4 DOM 操作
[建议] 操作 DOM 时，尽量减少页面 reflow。
解释：
页面 reflow 是非常耗时的行为，非常容易导致性能瓶颈。下面一些场景会触发浏览器的reflow：
- DOM元素的添加、修改（内容）、删除。
- 应用新的样式或者修改任何影响元素布局的属性。
- Resize浏览器窗口、滚动页面。
- 读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE)) 。
[建议] 尽量减少 DOM 操作。
解释：
DOM 操作也是非常耗时的一种操作，减少 DOM 操作有助于提高性能。举一个简单的例子，构建一个列表。我们可以用两种方式：
- 在循环体中 createElement 并 append 到父元素中。
- 在循环体中拼接 HTML 字符串，循环结束后写父元素的 innerHTML。
第一种方法看起来比较标准，但是每次循环都会对 DOM 进行操作，性能极低。在这里推荐使用第二种方法。
2.1.5 DOM 事件
[建议] 优先使用 addEventListener / attachEvent 绑定事件，避免直接在 HTML 属性中或 DOM 的 expando 属性绑定事件处理。
解释：
expando 属性绑定事件容易导致互相覆盖。
[建议] 使用 addEventListener 时第三个参数使用 false。
解释：
标准浏览器中的 addEventListener 可以通过第三个参数指定两种时间触发模型：冒泡和捕获。而 IE 的 attachEvent 仅支持冒泡的事件触发。所以为了保持一致性，通常 addEventListener 的第三个参数都为 false。
！！！！！！禁止转载
