JavaScript规范

内容列表

类型

对象

数组

字符串

函数

属性

变量

条件表达式和等号

块

注释

  **[[⬆]](#TOC)**## <a name='whitespace'>空白</a>- 将tab设为4个空格  ```javascript  // bad  function() {  ∙∙var name;  }  // bad  function() {  ∙var name;  }  // good  function() {  ∙∙∙∙var name;  }  ```- 大括号前放一个空格  ```javascript  // bad  function test(){    console.log('test');  }  // good  function test() {    console.log('test');  }  // bad  dog.set('attr',{    age: '1 year',    breed: 'Bernese Mountain Dog'  });  // good  dog.set('attr', {    age: '1 year',    breed: 'Bernese Mountain Dog'  });  ```- 在做长方法链时使用缩进.  ```javascript  // bad  $('#items').find('.selected').highlight().end().find('.open').updateCount();  // good  $('#items')    .find('.selected')      .highlight()      .end()    .find('.open')      .updateCount();  // bad  var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true)      .attr('width',  (radius + margin) * 2).append('svg:g')      .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')      .call(tron.led);  // good  var leds = stage.selectAll('.led')      .data(data)    .enter().append('svg:svg')      .class('led', true)      .attr('width',  (radius + margin) * 2)    .append('svg:g')      .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')      .call(tron.led);  ```  **[[⬆]](#TOC)**## <a name='commas'>逗号</a>- 不要将逗号放前面  ```javascript  // bad  var once    , upon    , aTime;  // good  var once,      upon,      aTime;  // bad  var hero = {      firstName: 'Bob'    , lastName: 'Parr'    , heroName: 'Mr. Incredible'    , superPower: 'strength'  };  // good  var hero = {    firstName: 'Bob',    lastName: 'Parr',    heroName: 'Mr. Incredible',    superPower: 'strength'  };  ```- 不要加多余的逗号，这可能会在IE下引起错误，同时如果多一个逗号某些ES3的实现会计算多数组的长度。  ```javascript  // bad  var hero = {    firstName: 'Kevin',    lastName: 'Flynn',  };  var heroes = [    'Batman',    'Superman',  ];  // good  var hero = {    firstName: 'Kevin',    lastName: 'Flynn'  };  var heroes = [    'Batman',    'Superman'  ];  ```  **[[⬆]](#TOC)**## <a name='semicolons'>分号</a>- 语句结束一定要加分号  ```javascript  // bad  (function() {    var name = 'Skywalker'    return name  })()  // good  (function() {    var name = 'Skywalker';    return name;  })();  // good  ;(function() {    var name = 'Skywalker';    return name;  })();  ```  **[[⬆]](#TOC)**## <a name='type-coercion'>类型转换</a>- 在语句的开始执行类型转换.- 字符串:  ```javascript  //  => this.reviewScore = 9;  // bad  var totalScore = this.reviewScore + '';  // good  var totalScore = '' + this.reviewScore;  // bad  var totalScore = '' + this.reviewScore + ' total score';  // good  var totalScore = this.reviewScore + ' total score';  ```- 对数字使用 `parseInt` 并且总是带上类型转换的基数.  ```javascript  var inputValue = '4';  // bad  var val = new Number(inputValue);  // bad  var val = +inputValue;  // bad  var val = inputValue >> 0;  // bad  var val = parseInt(inputValue);  // good  var val = Number(inputValue);  // good  var val = parseInt(inputValue, 10);  // good  /**   * parseInt was the reason my code was slow.   * Bitshifting the String to coerce it to a   * Number made it a lot faster.   */  var val = inputValue >> 0;  ```- 布尔值:  ```javascript  var age = 0;  // bad  var hasAge = new Boolean(age);  // good  var hasAge = Boolean(age);  // good  var hasAge = !!age;  ```  **[[⬆]](#TOC)**## <a name='naming-conventions'>命名约定</a>- 避免单个字符名，让你的变量名有描述意义。  ```javascript  // bad  function q() {    // ...stuff...  }  // good  function query() {    // ..stuff..  }  ```- 当命名对象、函数和实例时使用驼峰命名规则  ```javascript  // bad  var OBJEcttsssss = {};  var this_is_my_object = {};  var this-is-my-object = {};  function c() {};  var u = new user({    name: 'Bob Parr'  });  // good  var thisIsMyObject = {};  function thisIsMyFunction() {};  var user = new User({    name: 'Bob Parr'  });  ```- 当命名构造函数或类时使用驼峰式大写  ```javascript  // bad  function user(options) {    this.name = options.name;  }  var bad = new user({    name: 'nope'  });  // good  function User(options) {    this.name = options.name;  }  var good = new User({    name: 'yup'  });  ```- 命名私有属性时前面加个下划线 `_`  ```javascript  // bad  this.__firstName__ = 'Panda';  this.firstName_ = 'Panda';  // good  this._firstName = 'Panda';  ```- 当保存对 `this` 的引用时使用 `_this`.  ```javascript  // bad  function() {    var self = this;    return function() {      console.log(self);    };  }  // bad  function() {    var that = this;    return function() {      console.log(that);    };  }  // good  function() {    var _this = this;    return function() {      console.log(_this);    };  }  ```  **[[⬆]](#TOC)**## <a name='accessors'>存取器</a>- 属性的存取器函数不是必需的- 如果你确实有存取器函数的话使用getVal() 和 setVal('hello')  ```javascript  // bad  dragon.age();  // good  dragon.getAge();  // bad  dragon.age(25);  // good  dragon.setAge(25);  ```- 如果属性是布尔值，使用isVal() 或 hasVal()  ```javascript  // bad  if (!dragon.age()) {    return false;  }  // good  if (!dragon.hasAge()) {    return false;  }  ```- 可以创建get()和set()函数，但是要保持一致  ```javascript  function Jedi(options) {    options || (options = {});    var lightsaber = options.lightsaber || 'blue';    this.set('lightsaber', lightsaber);  }  Jedi.prototype.set = function(key, val) {    this[key] = val;  };  Jedi.prototype.get = function(key) {    return this[key];  };  ```  **[[⬆]](#TOC)**## <a name='constructors'>构造器</a>- 给对象原型分配方法，而不是用一个新的对象覆盖原型，覆盖原型会使继承出现问题。  ```javascript  function Jedi() {    console.log('new jedi');  }  // bad  Jedi.prototype = {    fight: function fight() {      console.log('fighting');    },    block: function block() {      console.log('blocking');    }  };  // good  Jedi.prototype.fight = function fight() {    console.log('fighting');  };  Jedi.prototype.block = function block() {    console.log('blocking');  };  ```- 方法可以返回 `this` 帮助方法可链。  ```javascript  // bad  Jedi.prototype.jump = function() {    this.jumping = true;    return true;  };  Jedi.prototype.setHeight = function(height) {    this.height = height;  };  var luke = new Jedi();  luke.jump(); // => true  luke.setHeight(20) // => undefined  // good  Jedi.prototype.jump = function() {    this.jumping = true;    return this;  };  Jedi.prototype.setHeight = function(height) {    this.height = height;    return this;  };  var luke = new Jedi();  luke.jump()    .setHeight(20);  ```- 可以写一个自定义的toString()方法，但是确保它工作正常并且不会有副作用。  ```javascript  function Jedi(options) {    options || (options = {});    this.name = options.name || 'no name';  }  Jedi.prototype.getName = function getName() {    return this.name;  };  Jedi.prototype.toString = function toString() {    return 'Jedi - ' + this.getName();  };  ```  **[[⬆]](#TOC)**## <a name='events'>事件</a>- 当给事件附加数据时，传入一个哈希而不是原始值，这可以让后面的贡献者加入更多数据到事件数据里而不用找出并更新那个事件的事件处理器  ```js  // bad  $(this).trigger('listingUpdated', listing.id);  ...  $(this).on('listingUpdated', function(e, listingId) {    // do something with listingId  });  ```  更好:  ```js  // good  $(this).trigger('listingUpdated', { listingId : listing.id });  ...  $(this).on('listingUpdated', function(e, data) {    // do something with data.listingId  });  ```**[[⬆]](#TOC)**## <a name='modules'>模块</a>- 模块应该以 `!` 开始，这保证了如果一个有问题的模块忘记包含最后的分号在合并后不会出现错误- 这个文件应该以驼峰命名，并在同名文件夹下，同时导出的时候名字一致- 加入一个名为noConflict()的方法来设置导出的模块为之前的版本并返回它- 总是在模块顶部声明 `'use strict';`  ```javascript  // fancyInput/fancyInput.js  !function(global) {    'use strict';    var previousFancyInput = global.FancyInput;    function FancyInput(options) {      this.options = options || {};    }    FancyInput.noConflict = function noConflict() {      global.FancyInput = previousFancyInput;      return FancyInput;    };    global.FancyInput = FancyInput;  }(this);  ```  **[[⬆]](#TOC)**## <a name='jquery'>jQuery</a>- 缓存jQuery查询  ```javascript  // bad  function setSidebar() {    $('.sidebar').hide();    // ...stuff...    $('.sidebar').css({      'background-color': 'pink'    });  }  // good  function setSidebar() {    var $sidebar = $('.sidebar');    $sidebar.hide();    // ...stuff...    $sidebar.css({      'background-color': 'pink'    });  }  ```- 对DOM查询使用级联的 `$('.sidebar ul')` 或 `$('.sidebar ul')`，[jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16)- 对有作用域的jQuery对象查询使用 `find`  ```javascript  // bad  $('.sidebar', 'ul').hide();  // bad  $('.sidebar').find('ul').hide();  // good  $('.sidebar ul').hide();  // good  $('.sidebar > ul').hide();  // good (slower)  $sidebar.find('ul');  // good (faster)  $($sidebar[0]).find('ul');  ```  **[[⬆]](#TOC)**## <a name='es5'>ECMAScript 5兼容性</a>- 参考[Kangax](https://twitter.com/kangax/)的 ES5 [compatibility table](http://kangax.github.com/es5-compat-table/)**[[⬆]](#TOC)**## <a name='performance'>性能</a>- [On Layout & Web Performance](http://kellegous.com/j/2013/01/26/layout-performance/)- [String vs Array Concat](http://jsperf.com/string-vs-array-concat/2)- [Try/Catch Cost In a Loop](http://jsperf.com/try-catch-in-loop-cost)- [Bang Function](http://jsperf.com/bang-function)- [jQuery Find vs Context, Selector](http://jsperf.com/jquery-find-vs-context-sel/13)- [innerHTML vs textContent for script text](http://jsperf.com/innerhtml-vs-textcontent-for-script-text)- [Long String Concatenation](http://jsperf.com/ya-string-concat)- Loading...**[[⬆]](#TOC)**## <a name='resources'>资源</a>**Read This**- [Annotated ECMAScript 5.1](http://es5.github.com/)**其它规范**- [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml)- [jQuery Core Style Guidelines](http://docs.jquery.com/JQuery_Core_Style_Guidelines)- [Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwldrn/idiomatic.js/)**其它风格**- [Naming this in nested functions](https://gist.github.com/4135065) - Christian Johansen- [Conditional Callbacks](https://github.com/airbnb/javascript/issues/52)**阅读更多**- [Understanding JavaScript Closures](http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/) - Angus Croll**书籍**- [#"hidden" data-csrf="true" value="Fg2eqcQancuSl8MwfIk7UDw8J/zVBi7nT2j8n0URxd8nW+MoZSBQKOPS2T0AY6hAlhI6KGGOjJjUBz6slFqUQg==" />