node-style-guide, node 程序员的node.js 风格指南

分享于 

36分钟阅读

GitHub

  繁體 雙語
full stack web development knowledge points
  • 源代码名称:node-style-guide
  • 源代码网址:http://www.github.com/wwsun/node-style-guide
  • node-style-guide源代码文档
  • node-style-guide源代码下载
  • Git URL:
    git://www.github.com/wwsun/node-style-guide.git
    Git Clone代码到本地:
    git clone http://www.github.com/wwsun/node-style-guide
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/wwsun/node-style-guide
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    使用 DocToc 生成的内容 表

      • string
      • number
      • boolean
      • null
      • undefined
      var foo =1;var bar = foo;
      bar =9;console.log(foo, bar); // => 1, 9
      • object
      • array
      • function
      var foo = [1, 2];var bar = foo;
      bar[0] =9;console.log(foo[0], bar[0]); // => 9, 9

    • // badvar item =newObject();// goodvar item = {};
    • // badvar superman = {
       class:'alien'};// badvar superman = {
       klass:'alien'};// goodvar superman = {
       type:'alien'};

    • // badvar items =newArray();// goodvar items = [];
    • 当你不知道数组的长度时使用Array#push。

      var someStack = [];// badsomeStack[someStack.length] ='abracadabra';// goodsomeStack.push('abracadabra');
    • 当你需要复制数据时使用Array#slice。jsPerf

      var len =items.length;var itemsCopy = [];var i;// badfor (i =0; i < len; i++) {
       itemsCopy[i] = items[i];
      }// gooditemsCopy =items.slice();
    • 将一个类数组对象转为数组,使用Array#slice。

      functiontrigger() {
       var args =Array.prototype.slice.call(arguments);
       ...}

    • // badvar name ="Bob Parr";// goodvar name ='Bob Parr';// badvar fullName ="Bob "+this.lastName;// goodvar fullName ='Bob '+this.lastName;
    • 注意:如果过度使用,长字符串拼接会影响性能。jsPerf & 讨论

      // badvar errorMessage ='This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';// badvar errorMessage ='This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';// goodvar errorMessage ='This is a super long error that was thrown because '+'of Batman. When you stop to think about how Batman had anything to do '+'with this, you would get nowhere fast.';// goodvar errorMessage =` hello world this is`;
       
    • 当使用程序来生成字符串时,使用Array#join,而不是字符串拼接。

      var items;var messages;var length;var i;
      messages = [{
       state:'success',
       message:'This one worked.'}, {
       state:'success',
       message:'This one worked as well.'}, {
       state:'error',
       message:'This one did not work.'}];
      length =messages.length;// badfunctioninbox(messages) {
       items ='<ul>';
       for (i =0; i < length; i++) {
       items +='<li>'+ messages[i].message+'</li>';
       }
       return items +'</ul>';
      }// goodfunctioninbox(messages) {
       items = [];
       for (i =0; i < length; i++) {
       items[i] = messages[i].message;
       }
       return'<ul><li>'+items.join('</li><li>') +'</li></ul>';
      }

    • 函数表达式:

      // anonymous function expressionvaranonymous=function() {
       returntrue;
      };// named function expressionvarnamed=functionnamed() {
       returntrue;
      };// immediately-invoked function expression (IIFE)(function() {
       console.log('Welcome to the Internet. Please follow me.');
      })();
    • 永远不要再一个非函数语句块内使用函数声明( 如果。等)。将函数赋值给一个变量。

      // badif (currentUser) {
       functiontest() {
       console.log('Nope.');
       }
      }// goodvar test;if (currentUser) {
       test=functiontest() {
       console.log('Yup.');
       };
      }
    • 永远不要将你的参数命名为 arguments,这会与函数范围内的arguments 对象冲突。

      // badfunctionnope(name, options, arguments) {
       //.. .stuff...}// goodfunctionyup(name, options, args) {
       //.. .stuff...}

    • 当访问属性时请使用 . 操作符。

      var luke = {
       jedi:true,
       age:28};// badvar isJedi = luke['jedi'];// goodvar isJedi =luke.jedi;
    • 当你要用变量访问属性时,请使用 []

      var luke = {
       jedi:true,
       age:28};functiongetProp(prop) {
       return luke[prop];
      }var isJedi =getProp('jedi');

    • 始终使用 var 来声明变量。否则会创建全局变量,污染全局命名空间。

      // badsuperPower =newSuperPower();// goodvar superPower =newSuperPower();
    • 声明变量时使用一个新行,并且每一行都使用 var 来声明。

      // badvar items =getItems(),
       goSportsTeam =true,
       dragonball ='z';// goodvar items =getItems();
       var goSportsTeam =true;
       var dragonball ='z';
    • 最后声明未赋值的便利。后面如果你要使用前面的变量进行赋值时会显得很便利。

      // badvar i;var items =getItems();var dragonball;var goSportsTeam =true;var len;// goodvar items =getItems();var goSportsTeam =true;var dragonball;var length;var i;
    • 避免冗余的变量声明,可已使用 object 对象来构建命名空间。

      // badvar kaleidoscopeName ='..';var kaleidoscopeLens = [];var kaleidoscopeColors = [];// goodvar kaleidoscope = {
       name:'..',
       lens: [],
       colors: []
      };
    • 在变量作用范围的最顶端声明变量。这可以帮你避免赋值提升的问题。

      // badfunction() {
       test();
       console.log('doing stuff..');
       //..other stuff..var name =getName();
       if (name ==='test') {
       returnfalse;
       }
       return name;
      }// goodfunction() {
       var name =getName();
       test();
       console.log('doing stuff..');
       //..other stuff..if (name ==='test') {
       returnfalse;
       }
       return name;
      }// badfunction() {
       var name =getName();
       if (!arguments.length) {
       returnfalse;
       }
       returntrue;
      }// goodfunction() {
       if (!arguments.length) {
       returnfalse;
       }
       var name =getName();
       returntrue;
      }

    要求

    • 使用如下顺序来组织node代码中的require语句:

      • 核心模块
      • npm模块
      • 其他
      // badvar Car =require('./models/Car');varasync=require('async');var http =require('http');// goodvar http =require('http');var fs =require('fs');varasync=require('async');var mongoose =require('mongoose');var Car =require('./models/Car');
    // badvar Batmobil =require('./models/Car.js');
     // goodvar Batmobil =require('./models/Car');

    //baddatabase.get('pokemons', function(err, pokemons) {
     console.log(pokemons);
    });//gooddatabase.get('drabonballs', function(err, drabonballs) {
     if (err) {
     // handle the error somehow, maybe return with a callbackreturnconsole.log(err);
     }
     console.log(drabonballs);
    });
    //baddatabase.get('drabonballs', function(err, drabonballs) {
     if (err) {
     // if not return hereconsole.log(err);
     }
     // this line will be executed as wellconsole.log(drabonballs);
    });//gooddatabase.get('drabonballs', function(err, drabonballs) {
     if (err) {
     // handle the error somehow, maybe return with a callbackreturnconsole.log(err);
     }
     console.log(drabonballs);
    });
    // badfunctiongetAnimals(done) {
     Animal.get(done);
    }// goodfunctiongetAnimals(done) {
     Animal.get(function(err, animals) {
     if(err) {
     returndone(err);
     }
     returndone(null, {
     dogs:animals.dogs,
     cats:animals.cats })
     });
    }

    尝试捕获

    • 只能在同步函数中使用 throw

      //badfunctionreadPackageJson (callback) {
       fs.readFile('package.json', function(err, file) {
       if (err) {
       throw err;
       }
       ... });
      }//goodfunctionreadPackageJson (callback) {
       fs.readFile('package.json', function(err, file) {
       if (err) {
       returncallback(err);
       }
       ... });
      }
    • //badvar data =JSON.parse(jsonAsAString);//goodvar data;try {
       data =JSON.parse(jsonAsAString);
      } catch (e) {
       //handle error - hopefully not with a console.log ;)console.log(e);
      }

    • // 先看个简单的例子,显然它会抛出错误functionexample() {
       console.log(notDefined); // => throws a ReferenceError}// 我们先使用了一个变量,而后再声明并初始化这个变量// 输出结果没有报错,而是 `undefined`,意思是未被初始化functionexample() {
       console.log(declaredButNotAssigned); // => undefinedvar declaredButNotAssigned =true;
      }// 变量声明部分会被提升,赋值部分仍保持不变// 上面的代码等同于functionexample() {
       var declaredButNotAssigned;
       console.log(declaredButNotAssigned); // => undefined declaredButNotAssigned =true;
      }
    • functionexample() {
       console.log(anonymous); // => undefinedanonymous(); // => TypeError anonymous is not a functionvaranonymous=function() {
       console.log('anonymous function expression');
       };
      }
    • functionexample() {
       console.log(named); // => undefinednamed(); // => TypeError named is not a functionsuperPower(); // => ReferenceError superPower is not definedvarnamed=functionsuperPower() {
       console.log('Flying');
       };
      }// the same is true when the function name// is the same as the variable name.functionexample() {
       console.log(named); // => undefinednamed(); // => TypeError named is not a functionvarnamed=functionnamed() {
       console.log('named');
       }
      }
    • functionexample() {
       superPower(); // => FlyingfunctionsuperPower() {
       console.log('Flying');
       }
      }
    • 更多信息请参考 JavaScript作用域&提升插件由Cherry

    • 使用 ===!== 来代替 ==!=

      • 对象被转换为 true
      • 未定义的被转换为英镑 false
      • 收费为 Null被转换为 false
      • 英镑 Booleans 英镑
      • Numbers被转换为 false 如果是 -0其他都为镑 true
      • 英镑字符串被转换为 false 如果是空字符串 '',其他都为英镑 true
      if ([0]) {
       // true// 数组是对象,对象始终被转换为 `true`}
    • 使用缩减版。

      // badif (name !=='') {
       //.. .stuff...}// goodif (name) {
       //.. .stuff...}// badif (collection.length>0) {
       //.. .stuff...}// goodif (collection.length) {
       //.. .stuff...}
    • 更多信息请参考真理等式和 JavaScript Croll

    • // badif (test)
       returnfalse;// badif (test) returnfalse;// goodif (test) {
       returnfalse;
      }// badfunction() { returnfalse; }// goodfunction() {
       returnfalse;
      }

    • // bad// make() returns a new element// based on the passed in tag name//// @param <String> tag// @return <Element> elementfunctionmake(tag) {
       //.. .stuff...return element;
      }// good/** * make() returns a new element * based on the passed in tag name * * @param <String> tag * @return <Element> element*/functionmake(tag) {
       //.. .stuff...return element;
      }
    • // badvar active =true; // is current tab// good// is current tabvar active =true;// badfunctiongetType() {
       console.log('fetching type...');
       // set the default type to 'no type'var type =this._type||'no type';
       return type;
      }// goodfunctiongetType() {
       console.log('fetching type...');
       // set the default type to 'no type'var type =this._type||'no type';
       return type;
      }
    • functionCalculator() {
       // FIXME: shouldn't use a global here total =0;
       returnthis;
      }
    • functionCalculator() {
       // TODO: total should be configurable by an options paramthis.total=0;
       returnthis;
      }
    
    
    
    
    
    **[⬆ back to top](#)**
    
    
    
    ## 空格
    
    
    
    - 推荐使用2个空格作为缩进
    
    
    
     ```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
    
    
     var x=y+5;
    
    
    
    //good
    
    
     var x = y + 5;
    
    
     ```
    
    
    
    - 文件结束后增加一个空行
    
    
    
     ```javascript
    
    
    //bad
    
    
     (function(global) {
    
    
    //...stuff...
    
    
     })(this);
    
    
     ```
    
    
    
     ```javascript
    
    
    //bad
    
    
     (function(global) {
    
    
    //...stuff...
    
    
     })(this);↵
    
    
     ↵
    
    
     ```
    
    
    
     ```javascript
    
    
    //good
    
    
     (function(global) {
    
    
    //...stuff...
    
    
     })(this);↵
    
    
     ```
    
    
    
    - 对链接起来的方法使用缩进成多行的形式
    
    
    
     ```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);
    
    
     ```
    
    
    
    **[⬆ back to top](#)**
    
    
    
    ## 逗号
    
    
    
    - 推荐的做法是逗号在每一行的末尾
    
    
    
     ```javascript
    
    
    //bad
    
    
     var hero = {
    
    
     firstName: 'Bob'
    
    
    , lastName: 'Parr'
    
    
    , heroName: 'Mr. Incredible'
    
    
    , superPower: 'strength'
    
    
     };
    
    
    
    //good
    
    
     var hero = {
    
    
     firstName: 'Bob',
    
    
     lastName: 'Parr',
    
    
     heroName: 'Mr. Incredible',
    
    
     superPower: 'strength'
    
    
     };
    
    
     ```
    
    
    
    **[⬆ back to top](#)**
    
    
    
    ## 分号作为语句块的结束
    
    
    
    - **Yup.**
    
    
    
     ```javascript
    
    
    //bad
    
    
     (function() {
    
    
     var name = 'Skywalker'
    
    
     return name
    
    
     })()
    
    
    
    //good
    
    
     (function() {
    
    
     var name = 'Skywalker';
    
    
     return name;
    
    
     })();
    
    
    
    //good
    
    
     ;(function() {
    
    
     var name = 'Skywalker';
    
    
     return name;
    
    
     })();
    
    
     ```
    
    
    
    **[⬆ back to top](#)**
    
    
    
    ## 类型转换 & 强制类型转换
    
    
    
    - 在声明语句的最前端执行强制类型转换.
    
    
    - Strings:
    
    
    
     ```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);
    
    
     ```
    
    
    
    - 如果某种情况下你为了性能原因需要避免使用`parseInt`,而是使用移位操作符,请添加注释说明
    
    
    
     ```javascript
    
    
    //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;
    
    
     ```
    
    
    
    - **Note:** 在使用移位操作符时需要特别谨慎. 数字使用 [64-bit values](http://es5.github.io/#x4.3.19)表示的, 但是移位操作符总是返回32-bit的整数 ([source](http://es5.github.io/#x11.7)). 这对大于32-bit的整数而言,这会导致意向不到的行为. [Discussion](https://github.com/airbnb/javascript/issues/109). 最大的有符号32位整数是 2,147,483,647:
    
    
    
     ```javascript
    
    
     2147483647>> 0//=> 2147483647
    
    
     2147483648>> 0//=> -2147483648
    
    
     2147483649>> 0//=> -2147483647
    
    
     ```
    
    
    
    - Booleans:
    
    
    
     ```javascript
    
    
     var age = 0;
    
    
    
    //bad
    
    
     var hasAge = new Boolean(age);
    
    
    
    //good
    
    
     var hasAge = Boolean(age);
    
    
    
    //good
    
    
     var hasAge =!!age;
    
    
     ```
    
    
    
    **[⬆ back to top](#)**
    
    
    
    ## 命名约定
    
    
    
    - 避免使用当个字符命名,使用描述性的名字:
    
    
    
     ```javascript
    
    
    //bad
    
    
     function q() {
    
    
    //...stuff...
    
    
     }
    
    
    
    //good
    
    
     function query() {
    
    
    //..stuff..
    
    
     }
    
    
     ```
    
    
    
    - 对于对象、函数、和实例采用小驼峰(camelCase)命名法
    
    
    
     ```javascript
    
    
    //bad
    
    
     var OBJEcttsssss = {};
    
    
     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'
    
    
     });
    
    
     ```
    
    
    
    - 当命名类或构造函数时使用大驼峰或Pascal命名法(PascalCase)
    
    
    
     ```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);
    
    
     };
    
    
     }
    
    
     ```
    
    
    
    - 命名你的函数。这将有助于堆栈跟踪。
    
    
    
     ```javascript
    
    
    //bad
    
    
     var log = function(msg) {
    
    
     console.log(msg);
    
    
     };
    
    
    
    //good
    
    
     var log = function log(msg) {
    
    
     console.log(msg);
    
    
     };
    
    
     ```
    
    
    
    **[⬆ back to top](#)**
    
    
    
    ## 访问器
    
    
    
    - 属性访问器并不是必须的。
    
    
    - 如果你确实需要,请命名为 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];
    
    
     };
    
    
     ```
    
    
    
    **[⬆ back to top](#)**
    
    
    
    ## 构造函数
    
    
    
    - 在原型链上增加属性,而不是覆写原型链。
    
    
    
     ```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();
    
    
     };
    
    
     ```
    
    
    
    **[⬆ back to top](#)**
    
    
    
    ## ES6箭头函数
    
    
    
    - 当你必须使用函数表达式(或传递一个匿名函数时),使用箭头函数符号(能够自动绑定`this`到父对象)
    
    
    
     ```javascript
    
    
    //bad
    
    
     [1, 2, 3].map(function (x) {
    
    
     return x * x; 
    
    
     });
    
    
    
    //good
    
    
     [1, 2, 3].map((x) => x * x);
    
    
     ```
    
    
    
    - 建议所有的Arrow Function的参数均使用 `()`包裹,即便只有一个参数:
    
    
    
     ```javascript
    
    
    //good
    
    
     let foo = (x) => x + 1;
    
    
    
    //bad
    
    
     let foo = x => x + 1;
    
    
     ``
    
    
    
    - 对于对象、类中的方法,使用增强的对象字面量
    
    
    
     ```javascript
    
    
    //good
    
    
     let foo = {
    
    
     bar () {
    
    
    //code 
    
    
     }
    
    
     }
    
    
    
    //bad
    
    
     let foo = {
    
    
     bar: () => {
    
    
    //code 
    
    
     }
    
    
     }
    
    
    
    //bad
    
    
     let foo = {
    
    
     bar: function () {
    
    
    //code
    
    
     }
    
    
     }
    
    
     ```
    
    
    
    **[⬆ back to top](#)** 
    
    
    
    ## ES6增强的对象字面量
    
    
    
    - 可以在对象总直接定义方法
    
    
    
     ```javascript
    
    
    //good
    
    
     let foo = {
    
    
     bar() {
    
    
    //code 
    
    
     }
    
    
     }
    
    
     ```
    
    
    
    - 可使用通过计算得出的键值
    
    
    
     ```javascript
    
    
    //当你需要的时候使用
    
    
     let MY_KEY = 'bar';
    
    
     let foo = {
    
    
     [MY_KEY + 'Hash']: 123
    
    
     }
    
    
     ```
    
    
    
    - 与当前scope中同名变量的简写
    
    
    
     ```javascript
    
    
    //bad
    
    
     let bar = 'bar';
    
    
     let foo = {
    
    
     bar//相当于bar: bar
    
    
     };
    
    
     ```
    
    
    
    **[⬆ back to top](#)**
    
    
    
    ## ES6模板字符串
    
    
    
    - 不推荐使用多行字符串,因为不方便代码缩进
    
    
    
     ```javascript
    
    
    //bad
    
    
     let html = 
    
    
     `<div>
    
    
     <p>Hello world</p>
    
    
     </div>`
    
    
     ```
    
    
    
    - 推荐使用ES6的字符串变量替换功能,这样可以取代字符串拼接
    
    
    
     ```javascript
    
    
    //good
    
    
     let name = 'weiwei';
    
    
     let time = '22:00';
    
    
     let message = `Hello ${name}, it's ${time} now`;
    
    
     ```
    
    
    
    **[⬆ back to top](#)**
    
    
    
    ## ES6函数参数增强
    
    
    
    - 推荐使用默认值、剩余参数等功能,这能让你的函数声明和调用变得更为简洁
    
    
    
     ```javascript
    
    
     var foo = (x = 1) => x + 1;
    
    
     foo();//2
    
    
    
     var extend = (source,.. .args) => {
    
    
     for (let target in args) {
    
    
     for (let name in Object.keys(target) {
    
    
     if (!source.hasOwnProperty(name) {
    
    
     source[name] = target[name];
    
    
     }
    
    
     }
    
    
     }
    
    
     };
    
    
    
     var extensions = [
    
    
     {name: 'Zhang'},
    
    
     {age: 17},
    
    
     {work: 'hard'}
    
    
     ];
    
    
     extend({},.. .extensions);
    
    
     ```
    
    
    
    **[⬆ back to top](#)**
    
    
    
    ## ES6新增关键字let和const
    
    
    
    - 推荐使用`let`全面代替`var`,因为它创建了块级作用域变量(变量只在代码块内生效),尤其是`for`循环
    
    
    
     ```javascript
    
    
     for(let i = 0; i <10; i++) {
    
    
     foo[i].onclick = function() {
    
    
     console.log(i);
    
    
     };
    
    
     } 
    
    
     ```
    
    
    
    - 建议自由在逻辑上是常量的情况才使用 `const`,它代表常量,定的同时必须赋值
    
    
    
     ```javascript
    
    
    //good
    
    
     const MAX_CAT_SIZE_KG = 3000; 
    
    
    
    //bad
    
    
     MAX_CAT_SIZE_KG = 5000;//SyntaxError
    
    
     MAX_CAT_SIZE_KG++;//nice try, but still a SyntaxError
    
    
     ```
    
    
    
    **[⬆ back to top](#)**
    
    
    
    ## ES6迭代器和`for..of`
    
    
    
    - 推荐使用`for..of`来迭代集合对象(Array, Map, Set, arguments对象)的**值**
    
    
    
     ```javascript
    
    
    //good
    
    
     for (let item of array) {
    
    
    //do somehting
    
    
     }
    
    
     ```
    
    
    
    - 避免使用`for...in`来迭代结合对象,它通常用于迭代对象的**属性名**
    
    
    
    **[⬆ back to top](#)**
    
    
    
    ## ES6生成器
    
    
    
    - 谨慎使用生成器,异步控制器的未来是`async`和`await`这两个关键字
    
    
    
     ```javascript
    
    
    //good
    
    
     async function save(Something) { 
    
    
     try {
    
    
     await Something.save();//等待await后面的代码执行完,类似于yield
    
    
     } catch (ex) {
    
    
    //error handling
    
    
     }
    
    
     console.log('success');
    
    
     }
    
    
     ```
    
    
    
    **[⬆ back to top](#)**
    
    
    
    ## ES6模块
    
    
    
    - 谨慎使用ES6的模块系统,Node项目建议使用CommonJS方案,因为ES6并没有包括模块加载器规范,[参考文章](http://www.csdn.net/article/2015-04-30/2824595-Modules-in-ES6) 
    
    
    - 或者使用ES6的模块定义,但使用ADM作为运行时模块解决方案
    
    
     - 保持使用`import`和`export`进行模块的引入和定义,可以安全地使用命名`export`和默认`export`
    
    
     - 在使用Babel转换时,配置`modules: 'amd'`转换为AMD的模块定义
    
    
     - 不要依赖`SystemJS`这样的ES6模块加载器
    
    
    
    **[⬆ back to top](#)**
    
    
    
    ## ES6新增集合Map和Set
    
    
    
    - 当你的元素或者键值有可能不是字符串时,无条件地使用`Map`和`Set`
    
    
    - 有移除操作的需求时,使用`Map`和`Set`
    
    
    - 当仅需要一个不可重复的集合时,使用`Set`优先于普通对象,而不要使用`{foo: true}`这样的对象
    
    
    - 当需要遍历功能时,使用`Map`和`Set`,因为其可以简单地使用`for..of`进行遍历
    
    
    - `WeakMap`和`WeakSet`是没有办法模拟实现的,因此不要使用
    
    
    
    **[⬆ back to top](#)**
    
    
    
    ## ES6 Promise
    
    
    
    - 建议所有异步均使用Promise实现
    
    
    
     ```javascript
    
    
    //构造一个Promise实例
    
    
     var promise = new Promise(function(resolve, reject) {
    
    
    //... some code
    
    
    
     if (/* 异步操作成功 */){
    
    
     resolve(value);
    
    
     } else {
    
    
     reject(error);
    
    
     }
    
    
     });
    
    
     ```
    
    
    
    - Promise实例生成后,可以用`then`方法分别制定Resolved状态和Reject状态的回调函数
    
    
    
     ```javascript
    
    
     promise.then(function(value) {
    
    
    //success
    
    
     }, function(value) {
    
    
    //failure
    
    
     });
    
    
     ```
    
    
    
    **[⬆ back to top](#)**
    
    
    
    ## 推荐的书
    
    
    
    - [JavaScript: The Good Parts](http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742) - Douglas Crockford
    
    
    - [JavaScript Patterns](http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752) - Stoyan Stefanov
    
    
    - [Pro JavaScript Design Patterns](http://www.amazon.com/JavaScript-Design-Patterns-Recipes-Problem-Solution/dp/159059908X) - Ross Harmes and Dustin Diaz
    
    
    - [High Performance Web Sites: Essential Knowledge for Front-End Engineers](http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309) - Steve Souders
    
    
    - [Maintainable JavaScript](http://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Zakas/dp/1449327680) - Nicholas C. Zakas
    
    
    - [JavaScript Web Applications](http://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X) - Alex MacCaw
    
    
    - [Pro JavaScript Techniques](http://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273) - John Resig
    
    
    - [Smashing Node.js: JavaScript Everywhere](http://www.amazon.com/Smashing-Node-js-JavaScript-Everywhere-Magazine/dp/1119962595) - Guillermo Rauch
    
    
    - [Secrets of the JavaScript Ninja](http://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X) - John Resig and Bear Bibeault
    
    
    - [Human JavaScript](http://humanjavascript.com/) - Henrik Joreteg
    
    
    - [Superhero.js](http://superherojs.com/) - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
    
    
    - [JSBooks](http://jsbooks.revolunet.com/)
    
    
    - [Third Party JavaScript](http://manning.com/vinegar/) - Ben Vinegar and Anton Kovalyov
    
    
    
    ## 推荐的博客
    
    
    
    - [DailyJS](http://dailyjs.com/)
    
    
    - [JavaScript Weekly](http://javascriptweekly.com/)
    
    
    - [JavaScript, JavaScript...](http://javascriptweblog.wordpress.com/)
    
    
    - [Bocoup Weblog](http://weblog.bocoup.com/)
    
    
    - [Adequately Good](http://www.adequatelygood.com/)
    
    
    - [NCZOnline](http://www.nczonline.net/)
    
    
    - [Perfection Kills](http://perfectionkills.com/)
    
    
    - [Ben Alman](http://benalman.com/)
    
    
    - [Dmitry Baranovskiy](http://dmitry.baranovskiy.com/)
    
    
    - [Dustin Diaz](http://dustindiaz.com/)
    
    
    - [nettuts](http://net.tutsplus.com/?s=javascript)
    
    
    
    **[⬆ back to top](#)**
    
    
    
    **The JavaScript Style Guide Guide**
    
    
    
    - [Reference](https://github.com/airbnb/javascript/wiki/The-JavaScript-Style-Guide-Guide)
    
    
    
    **[⬆ back to top](#)**
    
    
    
    # };
    
    
    
    

    style  gui  GUID  
    相关文章