Google为了那些还不熟悉代码规范的人发布了一个JS代码规范。其中列出了编写简洁易懂的代码所应该做的最佳实践。
代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择。对于JavaScript语言尤其如此,因为它灵活并且约束较少,允许开发者使用许多不同的编码样式。
Google和Airbnb各自占据着当前最流行的编码规范的半壁江山。如果你会在编写JS代码上投入很长时间的话,我强烈推荐你通读一遍这两家公司的编码规范。
接下来要写的是我个人认为在Google的代码规范中,与日常开发密切相关的十三条规则。
它们处理的问题都非常具有争议性,包括tab与空格、是否强制使用分号等等。还有一些令我感到惊讶的规则,往往最后都改变了我编写JS代码的习惯。
对于每一条规则,我都会先给出规范的摘要,然后引用规范中的详细说明。我还会举一些适当的反例论证遵守这些规则的重要性。
使用空格代替tab除了每一行的终止符序列,ASCII水平空格符(0x20)是唯一一个可以出现在源文件中任意位置的空格字符。这也意味着,tab字符不应该被使用,以及被用来控制缩进。
规范随后指出应该使用2个,而不是4个空格带实现缩进。
// bad function foo() { ∙∙∙∙let name; } // bad function bar() { ∙let name; } // good function baz() { ∙∙let name; }
不能省略分号每个语句必须以分号结尾。不允许依赖于JS自动添加分号的功能。
尽管我不明白为什么会有人反对这个规则,但目前分号的使用问题显然已经像“空格 vs tab”这个问题一样产生了巨大的争议。而Google对此表示分号是必须的,是不可省略的。
// bad let luke = {} let leia = {} [luke, leia].forEach(jedi => jedi.father = 'vader') // good let luke = {}; let leia = {}; [luke, leia].forEach((jedi) => { jedi.father = 'vader'; });
暂时不要使用ES6 module由于ES6模块的语义尚不完全确定,所以暂时不要使用,比如export和import关键字。一旦它们的相关规范制定完成,那么请忽略这一条规则。
// 暂时不要编写下面的代码: //------ lib.js ------ export function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); } //------ main.js ------ import { square, diag } from 'lib';
译者注:感觉遵守这条规范不大现实,毕竟现在已经有babel了。而且使用React时,最佳实践就是使用ES6模块吧。
不推荐代码水平对齐Google的代码规范允许但不推荐对代码进行水平对齐。即使之前的代码中做了水平对齐的处理,以后也应该避免这种行为。
对代码进行水平对齐会在代码中添加若干多余的空格,这让相邻两行的字符看上去处于一条垂直线上。
// bad { tiny: 42, longer: 435, }; // good { tiny: 42, longer: 435, };
杜绝var使用const或let来声明所有局部变量。如果变量不需要被重新赋值,默认应该使用const。应该拒绝使用关键字var。
我不知道是因为没有人能说服他们,还是说因为旧习难改。目前我仍能看到许多人在StackOverFlow或其他地方使用var声明变量。
// bad var example = 42; // good const example = 42;
优先使用箭头函数箭头函数提供了一种简洁的语法,并且避免了一些关于this指向的问题。相比较与function关键字,开发者应该优先使用箭头函数来声明函数,尤其是声明嵌套函数。
坦白说,我曾以为箭头函数的作用只在于简洁美观。但现在我发现原来它们还有更重要的作用。
// bad [1, 2, 3].map(function (x) { const y = x + 1; return x * y; }); // good [1, 2, 3].map((x) => { const y = x + 1; return x * y; });
使用模板字符串取代连接字符串在处理多行字符串时,模板字符串比复杂的拼接字符串要表现的更出色。
// bad function sayHi(name) { return 'How are you, ' + name + '?'; } // bad function sayHi(name) { return ['How are you, ', name, '?'].join(); } // bad function sayHi(name) { return `How are you, ${ name }?`; } // good function sayHi(name) { return `How are you, ${name}?`; }
不要使用续行符分割长字符串在JS中,\也代表着续行符。Google的代码规范不允许在不管是模板字符串还是普通字符串中使用续行符。尽管ES5中允许这么做,但如果在\后跟着某些结束空白符,这种行为会导致一些错误,而这些错误在审阅代码时很难注意到。
这条规则很有趣,因为Airbnb的规范中有一条与之不相同的规则
Google推荐下面这样的写法,而Airbnb则认为应该顺其自然,不做特殊处理,该多长就多长。