语法
使用ES6语法。
尽量使用原生语法,不要用jQuery,Zepto
全局命名空间污染
将代码包裹成一个 IIFE,用以创建独立隔绝的定义域。防止全局命名空间被污染。
//不推荐
//在全局范围内声明变量导致全局范围污染。所有变量都像这样声明将存储在window对象中
var x = 0,
y = 1;
console.log(window.x,window.y);
//推荐
//我们可以采用IIFE方式来避免,这种空间污染。
((w)=>{
var x = 0,
y = 1;
//udefined
console.log(w.x,w.y);
w.x = x;
w.y = y;
// 0 , 1
console.log(w.x,w.y);
}(window));
立即执行的函数表达式
立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的,但写在内使得整个表达式看起来更像一个整体,因此推荐这么做。
//不推荐
(()=>{})();
//推荐
(()=>{}());
严格模式
所有代码启用严格模式。启用严格模式时最好是在独立的 IIFE 中应用它。避免在你的脚本第一行使用它而导致你的所有脚本都启动了严格模式,这有可能会引发一些第三方类库的问题。
// Script starts here
'use strict';
(()=>{
//代码内容...
}());
//推荐
// Script starts here
(()=>{
'use strict';
//代码内容...
}());
命名
变量、函数、函数参数 、类属性,方法
使用 Camel(驼峰) 命名法
//变量
let testStatus = 1;
//函数,函数参数
let setTestStatus = (statusValue)=>{
testStatus = statusValue;
};
//类属性,方法
TestNode.prototype.setName = (name)=>{
this.name = name;
};
TestNode.name;
常量
使用全大写字母,单词间下划线分隔的命名方式。
const TEST_STATUS = 1;
类
使用 Pascal (首字母大写)命名法
let TestNode = (name)=>{
this.name = name;
}
注释
原则
(如无必要,勿增注释):尽量提高代码本身的清晰性、可读性。
(如有必要,尽量详尽):合理的注释、空行排版等,可以让代码更易阅读、更具美感。
单行注释
必须独占一行。// 后跟一个空格,缩进与下一行被注释说明的代码一致。
多行注释
避免使用 /.../ 这样的多行注释。有多行注释内容时,使用多个单行注释。
函数/方法注释
函数/方法注释必须包含函数说明,有参数和返回值时必须使用注释标识。;
参数和返回值注释必须包含类型信息和说明;
当函数是内部函数,外部不可访问时,可以使用 @inner 标识;
/**
* 函数描述
*
* @param {string} p1 参数1的说明
* @param {string} p2 参数2的说明,比较长
* 那就换行了.
* @param {number=} p3 参数3的说明(可选)
* @return {Object} 返回值描述
*/
function foo(p1, p2, p3) {
var p3 = p3 || 10;
return {
p1: p1,
p2: p2,
p3: p3
};
}
其他
变量声明
尽量在文件(函数)顶部使用一个var、let、const声明所需要的变量和常量;禁止出现连续var或其他声明关键词
/**
* .....
*/
//推荐
const USER_NAME = 'ch',
USER_AGE = 18;
let nameTarget,
color,
nodeTxt = '您好';
//不推荐
const USER_NAME = 'ch';
const USERAGE = 18;
let namgeTarget;
let color;
let nodeTxt = '您好';
变量赋值
赋值尽量写在变量声明中
//推荐
let a = 1,
b = '您好',
c = '2';
//不推荐
let a,
b,
c;
a = 1;
b = '您好';
c = '2';
缩进
统一两个空格缩进,不要使用 Tab 或者 Tab、空格混搭。
函数长度
20行封顶!越短越好,写函数请记得一定要追求“短小”。
代码宽度
一行代码最大限制为120个字符。
比较判断
总是使用 === 精确的比较操作符,避免在判断的过程中,由 JavaScript 的强制类型转换所造成的困扰。
分号
语句末必须加分号;
修改内建对象的原型链
严厉禁止修改内建对象的原型链诸如 Object.prototype 和 Array.prototype;
首选函数式风格
函数式编程让你可以简化代码并缩减维护成本,因为它容易复用,又适当地解耦和更少的依赖。
例子中,在一组数字求和的同一问题上,比较了两种解决方案。第一个例子是经典的程序处理,而第二个例子则是采用了函数式编程和 ECMA Script 5.1 的数组方法。
例外:往往在重代码性能轻代码维护的情况之下,要选择最优性能的解决方案而非维护性高的方案(比如用简单的循环语句代替 forEach)
//推荐
((log)=>{
'use strict';
var arr = [10, 3, 7, 9, 100, 20];
var sum = arr.reduce(function(prevValue, currentValue) {
return prevValue + currentValue;
}, 0);
log('The sum of array ' + arr + ' is: ' + sum);
}(window.console.log));
//不推荐
((log)=>{
'use strict';
var arr = [10, 3, 7, 9, 100, 20],
sum = 0,
i;
for(i = 0; i < arr.length; i++) {
sum += arr[i];
}
log('The sum of array ' + arr + ' is: ' + sum)
}(window.console.log));
数组和对象字面量
数组和对象,尽量用字面量来代替构造器。构造器很容易让人在它的参数上犯错
//推荐
var a = [x1, x2, x3];
var b = {
a : 'a',
b : 'b'
}
//不推荐
var a = new Array(x1, x2, x3);
var b = new Object();
b.a = 0;
b.b = 1;
b.c = 2;