前端编码规范(3)JavaScript 开发规范(5)

(function(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));

推荐

(function(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));

另一个例子通过某一规则对一个数组进行过滤匹配来创建一个新的数组。

不推荐

(function(log){ 'use strict'; var numbers = [11, 3, 7, 9, 100, 20, 14, 10], numbersGreaterTen = [], i; for(i = 0; i < numbers.length; i++) { if(numbers[i] > 10) { numbersGreaterTen.push(numbers[i]); } } log('From the list of numbers ' + numbers + ' only ' + numbersGreaterTen + ' are greater than ten'); }(window.console.log));

推荐

(function(log){ 'use strict'; var numbers = [11, 3, 7, 9, 100, 20, 14, 10]; var numbersGreaterTen = numbers.filter(function(element) { return element > 10; }); log('From the list of numbers ' + numbers + ' only ' + numbersGreaterTen + ' are greater than ten'); }(window.console.log));

使用 ECMA Script 5

建议使用 ECMA Script 5 中新增的语法糖和函数。这将简化你的程序,并让你的代码更加灵活和可复用。

数组和对象的属性迭代

用 ECMA5 的迭代方法来迭代数组。使用 Array.forEach 或者如果你要在特殊场合下中断迭代,那就用 Array.every。

(function(log){ 'use strict'; // Iterate over an array and break at a certain condition [1, 2, 3, 4, 5].every(function(element, index, arr) { log(element + ' at index ' + index + ' in array ' + arr); if(index !== 5) { return true; } }); // Defining a simple javascript object var obj = { a: 'A', b: 'B', 'c-d-e': 'CDE' }; // Iterating over the object keys Object.keys(obj).forEach(function(element, index, arr) { log('Key ' + element + ' has value ' + obj[element]); }); }(window.console.log));

不要使用 switch

switch 在所有的编程语言中都是个非常错误的难以控制的语句,建议用 if else 来替换它。

数组和对象字面量

用数组和对象字面量来代替数组和对象构造器。数组构造器很容易让人在它的参数上犯错。

不推荐

// Length is 3. var a1 = new Array(x1, x2, x3); // Length is 2. var a2 = new Array(x1, x2); // If x1 is a number and it is a natural number the length will be x1. // If x1 is a number but not a natural number this will throw an exception. // Otherwise the array will have one element with x1 as its value. var a3 = new Array(x1); // Length is 0. var a4 = new Array();

正因如此,如果将代码传参从两个变为一个,那数组很有可能发生意料不到的长度变化。为避免此类怪异状况,请总是采用更多可读的数组字面量。

推荐

var a = [x1, x2, x3]; var a2 = [x1, x2]; var a3 = [x1]; var a4 = [];

对象构造器不会有类似的问题,但是为了可读性和统一性,我们应该使用对象字面量。

不推荐

var o = new Object(); var o2 = new Object(); o2.a = 0; o2.b = 1; o2.c = 2; o2['strange key'] = 3;

应该写成这样:

推荐

var o = {}; var o2 = { a: 0, b: 1, c: 2, 'strange key': 3 };

修改内建对象的原型链

修改内建的诸如 Object.prototype 和 Array.prototype 是被严厉禁止的。修改其它的内建对象比如  Function.prototype,虽危害没那么大,但始终还是会导致在开发过程中难以 debug 的问题,应当也要避免。

自定义 toString() 方法

你可以通过自定义 toString() 来控制对象字符串化。这很好,但你必须保证你的方法总是成功并不会有其它副作用。如果你的方法达不到这样的标准,那将会引发严重的问题。如果 toString() 调用了一个方法,这个方法做了一个断言[3] ,当断言失败,它可能会输出它所在对象的名称,当然对象也需要调用  toString()。

圆括号

一般在语法和语义上真正需要时才谨慎地使用圆括号。不要用在一元操作符上,例如 delete, typeof 和  void,或在关键字之后,例如 return, throw, case, new 等。

字符串

统一使用单引号(‘),不使用双引号(“)。这在创建 HTML 字符串非常有好处:

var msg = 'This is some HTML <div></div>';

三元条件判断(if 的快捷方法)

用三元操作符分配或返回语句。在比较简单的情况下使用,避免在复杂的情况下使用。没人愿意用 10 行三元操作符把自己的脑子绕晕。

不推荐

if(x === 10) { return 'valid'; } else { return 'invalid'; }

推荐

return x === 10 ? 'valid' : 'invalid';

[1]:作者指的是采用严格规范的语句写法,从根本上杜绝由分号缺失而引起的代码歧义。

[2]:中缀符,指的是像 x + y 中的 +。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwdzys.html