你可能会忽略的代码规范

前言

       如今的互联网可谓火热，吸引了许多年轻人的注意力，也因此诞生了许多程序员，而程序员每天都会与代码打交道，不只是自己写的代码，还会去看别人写的代码。这就产生了一个大家经常讨论的问题，某某程序员的代码写的烂，我该怎么给他说呢？等等这些吐槽别人代码烂的话题。那么如何去写一个质量高的代码，便成为了程序员的基本素养。

       写出高质量的代码，需要我们在平时养成这种意识与习惯，不仅自己看起来很舒畅，其他人看了也会比较轻松。那我们来看一下有哪些开发过程中会忽略的细节。

      

• 特定的变量

NO：无说明的参数

if (value.length < 8) { // 为什么要小于8，8表示啥？长度，还是位移，还是高度？

....

}

YES：添加变量

const MAX_INPUT_LENGTH = 8;

if (value.length < MAX_INPUT_LENGTH) { // 一目了然，不能超过最大输入长度

....

}

• 对于返回true or false的函数，最好以should/is/can/has开头
• 功能函数最好为纯函数,输入一致，输出结果永远唯一。
• 函数传参要有说明。

page.getSVG({

imageApi: api,

includePageBackground: true, // 一目了然，知道这些true和false是啥意思

compress: false,

})

一个函数完成一个独立的功能，不要一个函数混杂多个功能

这是软件工程中最重要的一条规则，当函数需要做更多的事情时，它们将会更难进行编写、测试、理解和组合。当你能将一个函数抽离出只完成一个动作，他们将能够很容易的进行重构并且你的代码将会更容易阅读。如果你严格遵守本条规则，你将会领先于许多开发者。

优先使用函数式编程

NO: 使用for循环编程

for(i = 1; i <= 10; i++) { // 一看到for循环让人顿生不想看的情愫

a[i] = a[i] +1;

}

YES：使用函数式编程

let b = a.map(item => ++item) // 怎么样，是不是很好理解，就是把 a 的值每项加一赋值给b 就可以了。现在在 javascript 中几乎所有的 for 循环都可以被map,filter,find,some,any,forEach 等函数式编程取代。

永远不要在字符串上使用 eval() ，它会打开太多的漏洞。（ eval() 真的是魔鬼！！）

1. 1. 首先 eval() 可接受任意的字符串，并当作 Javascript 代码来处理，这就会引入一个安全问题，那就是 XSS 攻击。莫名其妙的注入一个 script 标签，或者一个请求，便看起来不再安全。
   2. 其次性能方面，如今如果你用了 eval() 来写的话，由于是不可预测的途径，现代浏览器将使用 slow path ，所以就变慢了。
   3. 另外 eval() 和 Function 构造不同的是 eval() 可以干扰作用域链，而Function() 更好点，在于不管你在哪里执行 Function() ，它只看到全局作用域，所以避免了本地变量污染。

         (function () { 
            var local = 1; 
           eval("local = 3; console.log(local)");  // logs "3" 
            console.log(local); // logs "3" 
         }());
        (function () { 
           var local = 1; 
           Function("console.log(typeof local);") (); // logs undefined
        }()); 

          运行结果： 

       

www.nowamagic.net/librarys/ve…

• 永远不要把参数命名为 arguments。这将会覆盖原来函数作用域内的 arguments 对象。
  

1. // bad
2. function foo(name, options, arguments) { 
3.  // ...
4. } 
5. // good
6. function foo(name, options, args) {
7.  // ...
8. }

不要使用 arguments。可以选择 rest 语法 ... 替代。

为什么？使用 ... 能明确你要传入的参数。另外 rest（剩余）参数是一个真正的数组，而 arguments 是一个类数组（Array-like)

1. // bad
2. function concatenateAll() {  
3. const args = Array.prototype.slice.call(arguments); 
 return args.join('');
4. }
5.  // good
6. function concatenateAll(...args) {
7.   return args.join('');
8. }

求幂时使用求幂运算符 ** 

1. // bad
2. const binary = Math.pow(2, 10);
4. // good
5. const binary = 2 ** 10;

• 变量不要链式赋值

1. // bad
2. (function example() {
3. // JavaScript 将其解析为
4. // let a = ( b = ( c = 1 ) );
5. // let关键字只适用于变量a;
6. // 变量b和c变成了全局变量。
7. let a = b = c = 1;
8. }());
10. console.log(a); // 抛出 ReferenceError（引用错误）
11. console.log(b); // 1
12. console.log(c); // 1
14. // good
15. (function example() {
16. let a = 1;
17. let b = a;
18. let c = a;
19. }());
21. console.log(a); // 抛出 ReferenceError（引用错误）
22. console.log(b); // 抛出 ReferenceError（引用错误）
23. console.log(c); // 抛出 ReferenceError（引用错误）
25. // 同样适用于 `const`

• 不要存储 this 引用。请实用箭头函数

1. // bad
2. function foo() {
3. const self = this;
4. return function () {
5. console.log(self);
6. };
7. }
9. // bad
10. function foo() {
11. const that = this;
12. return function () {
13. console.log(that);
14. };
15. }
17. // good
18. function foo() {
19. return () => {
20. console.log(this);
21. };
22. }

• 结论

其实如今代码规范起来也比较容易，因为出现了很多静态检测的工具之类的，我一般会用ESlint来调节代码规范，但是除了工具上进行规范，我们需要的是这种代码规范的意识。渐渐形成一种习惯，对以后写代码无疑是一种好处。

• 参考文章

1. Airbnb JavaScript代码规范 github.com/airbnb/java…
2.  看看这些被同事喷的JS代码风格你写过多少juejin.im/post/5becf9…

转载于:https://juejin.im/post/5d6238f5f265da039519ff31