JavaScript 编码规范

JavaScript(es5) 编码规范

Created By jianwen_t@163.com 2018-01-11

gitHub TokeyJerry

Object

• 1.利用可读性高的语法定义对象。(适用于各种数据类型的定义)

  // bad
  var item = new Object();
      
  // good
  var item = {};
  

• 2.定义对象的属性仅仅对有 特殊标识符 的属性，添加引号（建议为单引号）

  总的来说，我们认为阅读更容易。它改进了语法高亮显示，并且更容易通过许多JS引擎优化。

  // bad
  var bad = {
    'foo': 3,
    'bar': 4,
    'data-blah': 5,
  };
  
  // good
  var good = {
    foo: 3,
    bar: 4,
    'data-blah': 5,
  };
  

• 3.不要直接调用 对象原型 上的方法

  这些方法可能会被有关对象的属性所跟踪——{hasOwnProperty: false} or 对象可能是null对象（Object .create(null)）

  // bad
  console.log(object.hasOwnProperty(key));
  
  // good
  console.log(Object.prototype.hasOwnProperty.call(object, key));
  
  // best
  var hasOwnPro = Object.prototype.hasOwnProperty;
  console.log(hasOwnPro.call(object, key));
  

Function

• 1.利用函数表达式，而不是函数声明来定义函数

  函数声明是挂起的，这意味着在它在文件中定义之前，很容易引用函数。这会损害可读性和可维护性，由此，我们建议的原则是 即用即定义。并且如果所定义的函数是大的或复杂的，以至于它干扰了对文件的其余部分的理解，那么也许是时候将它提取到它自己的模块中了。

  不要忘记显式地命名这个表达式，不管它的名称是否从包含变量(在现代浏览器中经常是这样，或者在使用诸如Babel之类的编译器时)。这消除了对错误的调用堆栈的任何假设。

  // bad
  function foo() {
    // ...
  }
  
  // good
  const foo = function () {
    // ...
  };   
  
  // best
  // 定义名称同时避免变量引用标识符
  const short = function longUniqueMoreDescriptiveLexicalFoo() {
    // ...
  };
  

• 2.合理的空格是良好编码风格的基础

  // bad
  var a = function(){};
  var b = function (){};
  var c = function() {};
  
  // good
  const x = function () {};
  const y = function a() {};
  

比较符 & 等式 & 条件嵌套

• 1.为 布尔值 使用快捷方式，但对 字符串和数字 进行显式比较。

  // bad
  if (isValid === true) {
    // ...
  }
  
  // good
  if (isValid) {
    // ...
  }
  
  // bad
  if (name) {
    // ...
  }
  
  // good
  if (name !== '') {
    // ...
  }
  
  // bad
  if (collection.length) {
    // ...
  }
  
  // good
  if (collection.length > 0) {
    // ...
  }
  

• 2.避免不必要的三元语句

  // bad
  const foo = a ? a : b;
  const bar = c ? true : false;
  const baz = c ? false : true;
  
  // good
  const foo = a || b;
  const bar = !!c;
  const baz = !c;
  

• 3.如果一个 if 判断语句块里包含 return 语句，那我们可以省略 else 语句块

  由此可优化为：尽量在 if 判断语句中加入 return 语句，以减少多层嵌套。

  // bad
  function foo() {
    if (x) {
      return x;
    } else {
      return y;
    }
  }
  
  // good 
  function foo() {
    if (x) {
      return x;
    }
    return y;
  }
  
  // bad
  function bar() {
    if (x) {
      return x;
    } else if (y) {
      return y;
    }
  }
  
  // good
  function bar() {
    if (x) {
      return x;
    }
  
    if (y) {
      return y;
    }
  }
  
  // bad
  function coo() {
    if (x) {
      return x;
    } else {
      if (y) {
        return y;
      }
    }
  }
  
  // good
  function coo() {
    if (x) {
      return x;
    }
    if (y) {
      return y;
    }
  }