Airbnb 是一家位于美國(guó)舊金山的公司，本文是其內(nèi)部的 JavaScript編碼規(guī)范，寫得比較全面，在 Github 上有 16,686 + Star，3,080 + fork，前端開發(fā)人員可參考。

　　原文：https://github.com/airbnb/javascript

　　注：本人根據(jù)自己的開發(fā)習(xí)慣刪除和修改了部分規(guī)范

　類型

• 原始值: 相當(dāng)于傳值

  • string
  • number
  • boolean
  • null
  • undefined

  var foo = 1,
      bar = foo;
  
  bar = 9;
  
  console.log(foo, bar); // => 1, 9

• 復(fù)雜類型: 相當(dāng)于傳引用

  • object
  • array
  • function

  var foo = [1, 2],
      bar = foo;
  
  bar[0] = 9;
  
  console.log(foo[0], bar[0]); // => 9, 9

　對(duì)象

• 使用字面值創(chuàng)建對(duì)象

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

• 不要使用保留字 reserved words 作為鍵

  // bad
  var superman = {
    class: 'superhero',
    default: { clark: 'kent' },
    private: true
  };
  
  // good
  var superman = {
    klass: 'superhero',
    defaults: { clark: 'kent' },
    hidden: true
  };

　數(shù)組

• 使用字面值創(chuàng)建數(shù)組

  // bad
  var items = new Array();
  
  // good
  var items = [];

• 如果你不知道數(shù)組的長(zhǎng)度，使用push

  var someStack = [];
  
  
  // bad
  someStack[someStack.length] = 'abracadabra';
  
  // good
  someStack.push('abracadabra');

• 當(dāng)你需要拷貝數(shù)組時(shí)使用slice. jsPerf

  var len = items.length,
      itemsCopy = [],
      i;
  
  // bad
  for (i = 0; i < len; i++) {
    itemsCopy[i] = items[i];
  }
  
  // good
  itemsCopy = items.slice();

• 使用slice將類數(shù)組的對(duì)象轉(zhuǎn)成數(shù)組.

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

　字符串

• 對(duì)字符串使用單引號(hào) ''

  // bad
  var name = "Bob Parr";
  
  // good
  var name = 'Bob Parr';
  
  // bad
  var fullName = "Bob " + this.lastName;
  
  // good
  var fullName = 'Bob ' + this.lastName;

• 超過(guò)80個(gè)字符的字符串應(yīng)該使用字符串連接換行

• 注: 如果過(guò)度使用，長(zhǎng)字符串連接可能會(huì)對(duì)性能有影響. jsPerf & Discussion

  // bad
  var 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.';
  
  // bad
  var 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.';
  
  
  // good
  var 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.';

• 編程時(shí)使用join而不是字符串連接來(lái)構(gòu)建字符串，特別是IE: jsPerf.

  var items,
      messages,
      length, 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;
  
  // bad
  function inbox(messages) {
    items = '<ul>';
  
    for (i = 0; i < length; i++) {
      items += '<li>' + messages[i].message + '</li>';
    }
  
    return items + '</ul>';
  }
  
  // good
  function inbox(messages) {
    items = [];
  
    for (i = 0; i < length; i++) {
      items[i] = messages[i].message;
    }
  
    return '<ul><li>' + items.join('</li><li>') + '</li></ul>';
  }

　函數(shù)

• 函數(shù)表達(dá)式:

  // 匿名函數(shù)表達(dá)式
  var anonymous = function() {
    return true;
  };
  
  // 有名函數(shù)表達(dá)式
  var named = function named() {
    return true;
  };
  
  // 立即調(diào)用函數(shù)表達(dá)式
  (function() {
    console.log('Welcome to the Internet. Please follow me.');
  })();

• 絕對(duì)不要在一個(gè)非函數(shù)塊里聲明一個(gè)函數(shù)，把那個(gè)函數(shù)賦給一個(gè)變量。瀏覽器允許你這么做，但是它們解析不同。

• 注: ECMA-262定義把塊定義為一組語(yǔ)句，函數(shù)聲明不是一個(gè)語(yǔ)句。閱讀ECMA-262對(duì)這個(gè)問(wèn)題的說(shuō)明.

  // bad
  if (currentUser) {
    function test() {
      console.log('Nope.');
    }
  }
  
  // good
  if (currentUser) {
    var test = function test() {
      console.log('Yup.');
    };
  }

• 絕對(duì)不要把參數(shù)命名為 arguments, 這將會(huì)逾越函數(shù)作用域內(nèi)傳過(guò)來(lái)的 arguments 對(duì)象.

  // bad
  function nope(name, options, arguments) {
    // ...stuff...
  }
  
  // good
  function yup(name, options, args) {
    // ...stuff...
  }

　屬性

• 當(dāng)使用變量訪問(wèn)屬性時(shí)使用中括號(hào).

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

　變量

• 總是使用 var 來(lái)聲明變量，如果不這么做將導(dǎo)致產(chǎn)生全局變量，我們要避免污染全局命名空間。

  // bad
  superPower = new SuperPower();
  
  // good
  var superPower = new SuperPower();

• 使用一個(gè) var 以及新行聲明多個(gè)變量，縮進(jìn)4個(gè)空格。

  // bad
  var items = getItems();
  var goSportsTeam = true;
  var dragonball = 'z';
  
  // good
  var items = getItems(),
      goSportsTeam = true,
      dragonball = 'z';

• 最后再聲明未賦值的變量，當(dāng)你想引用之前已賦值變量的時(shí)候很有用。

  // bad
  var i, len, dragonball,
      items = getItems(),
      goSportsTeam = true;
  
  // bad
  var i, items = getItems(),
      dragonball,
      goSportsTeam = true,
      len;
  
  // good
  var items = getItems(),
      goSportsTeam = true,
      dragonball,
      length,
      i;

• 在作用域頂部聲明變量，避免變量聲明和賦值引起的相關(guān)問(wèn)題。

  // bad
  function() {
    test();
    console.log('doing stuff..');
  
    //..other stuff..
  
    var name = getName();
  
    if (name === 'test') {
      return false;
    }
  
    return name;
  }
  
  // good
  function() {
    var name = getName();
  
    test();
    console.log('doing stuff..');
  
    //..other stuff..
  
    if (name === 'test') {
      return false;
    }
  
    return name;
  }
  
  // bad
  function() {
    var name = getName();
  
    if (!arguments.length) {
      return false;
    }
  
    return true;
  }
  
  // good
  function() {
    if (!arguments.length) {
      return false;
    }
  
    var name = getName();
  
    return true;
  }

　條件表達(dá)式和等號(hào)

• 適當(dāng)使用 === 和 !== 以及 == 和 !=.

• 條件表達(dá)式的強(qiáng)制類型轉(zhuǎn)換遵循以下規(guī)則：

  • 對(duì)象 被計(jì)算為 true
  • Undefined 被計(jì)算為 false
  • Null 被計(jì)算為 false
  • 布爾值 被計(jì)算為 布爾的值
  • 數(shù)字 如果是 +0, -0, or NaN 被計(jì)算為 false , 否則為 true
  • 字符串 如果是空字符串 '' 則被計(jì)算為 false, 否則為 true

  if ([0]) {
    // true
    // An array is an object, objects evaluate to true
  }

• 使用快捷方式.

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

• 閱讀 Truth Equality and JavaScript 了解更多

　塊

• 給所有多行的塊使用大括號(hào)

  // bad
  if (test)
    return false;
  
  // good
  if (test) return false;
  
  // good
  if (test) {
    return false;
  }
  
  // bad
  function() { return false; }
  
  // good
  function() {
    return false;
  }

　注釋

• 使用 /** ... */ 進(jìn)行多行注釋，包括描述，指定類型以及參數(shù)值和返回值

  // bad
  // make() returns a new element
  // based on the passed in tag name
  //
  // @param <String> tag
  // @return <Element> element
  function make(tag) {
  
    // ...stuff...
  
    return element;
  }
  
  // good
  /**
   * make() returns a new element
   * based on the passed in tag name
   *
   * @param <String> tag
   * @return <Element> element
   */
  function make(tag) {
  
    // ...stuff...
  
    return element;
  }

• 使用 // 進(jìn)行單行注釋，在評(píng)論對(duì)象的上面進(jìn)行單行注釋，注釋前放一個(gè)空行.

  // bad
  var active = true;  // is current tab
  
  // good
  // is current tab
  var active = true;
  
  // bad
  function getType() {
    console.log('fetching type...');
    // set the default type to 'no type'
    var type = this._type || 'no type';
  
    return type;
  }
  
  // good
  function getType() {
    console.log('fetching type...');
  
    // set the default type to 'no type'
    var type = this._type || 'no type';
  
    return type;
  }

• 如果你有一個(gè)問(wèn)題需要重新來(lái)看一下或如果你建議一個(gè)需要被實(shí)現(xiàn)的解決方法的話需要在你的注釋前面加上 FIXME 或 TODO 幫助其他人迅速理解

  function Calculator() {
  
    // FIXME: shouldn't use a global here
    total = 0;
  
    return this;
  }

  function Calculator() {
  
    // TODO: total should be configurable by an options param
    this.total = 0;
  
    return this;
  }

　空白

• 將tab設(shè)為4個(gè)空格

  // bad
  function() {
  ??var name;
  }
  
  // bad
  function() {
  ?var name;
  }
  
  // good
  function() {
  ????var name;
  }

• 大括號(hào)前放一個(gè)空格

  // 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'
  });

• 在做長(zhǎng)方法鏈時(shí)使用縮進(jìn).

  // 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);

　逗號(hào)

• 不要將逗號(hào)放前面

  // 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'
  };

• 不要加多余的逗號(hào)，這可能會(huì)在IE下引起錯(cuò)誤，同時(shí)如果多一個(gè)逗號(hào)某些ES3的實(shí)現(xiàn)會(huì)計(jì)算多數(shù)組的長(zhǎng)度。

  // bad
  var hero = {
    firstName: 'Kevin',
    lastName: 'Flynn',
  };
  
  var heroes = [
    'Batman',
    'Superman',
  ];
  
  // good
  var hero = {
    firstName: 'Kevin',
    lastName: 'Flynn'
  };
  
  var heroes = [
    'Batman',
    'Superman'
  ];

　分號(hào)

• 語(yǔ)句結(jié)束一定要加分號(hào)

  // bad
  (function() {
    var name = 'Skywalker'
    return name
  })()
  
  // good
  (function() {
    var name = 'Skywalker';
    return name;
  })();
  
  // good
  ;(function() {
    var name = 'Skywalker';
    return name;
  })();

　類型轉(zhuǎn)換

• 在語(yǔ)句的開始執(zhí)行類型轉(zhuǎn)換.

• 字符串:

  //  => 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';

• 對(duì)數(shù)字使用 parseInt 并且總是帶上類型轉(zhuǎn)換的基數(shù).

  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;

• 布爾值:

  var age = 0;
  
  // bad
  var hasAge = new Boolean(age);
  
  // good
  var hasAge = Boolean(age);
  
  // good
  var hasAge = !!age;

　命名約定

• 避免單個(gè)字符名，讓你的變量名有描述意義。

  // bad
  function q() {
    // ...stuff...
  }
  
  // good
  function query() {
    // ..stuff..
  }

• 當(dāng)命名對(duì)象、函數(shù)和實(shí)例時(shí)使用駝峰命名規(guī)則

  // 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'
  });

• 當(dāng)命名構(gòu)造函數(shù)或類時(shí)使用駝峰式大寫

  // 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'
  });

• 命名私有屬性時(shí)前面加個(gè)下劃線 _

  // bad
  this.__firstName__ = 'Panda';
  this.firstName_ = 'Panda';
  
  // good
  this._firstName = 'Panda';

• 當(dāng)保存對(duì) this 的引用時(shí)使用 _this.

  // 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);
    };
  }

　存取器

• 屬性的存取器函數(shù)不是必需的

• 如果你確實(shí)有存取器函數(shù)的話使用getVal() 和 setVal('hello')

  // bad
  dragon.age();
  
  // good
  dragon.getAge();
  
  // bad
  dragon.age(25);
  
  // good
  dragon.setAge(25);

• 如果屬性是布爾值，使用isVal() 或 hasVal()

  // bad
  if (!dragon.age()) {
    return false;
  }
  
  // good
  if (!dragon.hasAge()) {
    return false;
  }

• 可以創(chuàng)建get()和set()函數(shù)，但是要保持一致

  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];
  };

　構(gòu)造器

• 給對(duì)象原型分配方法，而不是用一個(gè)新的對(duì)象覆蓋原型，覆蓋原型會(huì)使繼承出現(xiàn)問(wèn)題。

  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 幫助方法可鏈。

  // 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);

• 可以寫一個(gè)自定義的toString()方法，但是確保它工作正常并且不會(huì)有副作用。

  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();
  };

　事件

• 當(dāng)給事件附加數(shù)據(jù)時(shí)，傳入一個(gè)哈希而不是原始值，這可以讓后面的貢獻(xiàn)者加入更多數(shù)據(jù)到事件數(shù)據(jù)里而不用找出并更新那個(gè)事件的事件處理器

  // bad
  $(this).trigger('listingUpdated', listing.id);
  
  ...
  
  $(this).on('listingUpdated', function(e, listingId) {
    // do something with listingId
  });

  更好:

  // good
  $(this).trigger('listingUpdated', { listingId : listing.id });
  
  ...
  
  $(this).on('listingUpdated', function(e, data) {
    // do something with data.listingId
  });

　模塊

• 模塊應(yīng)該以 ! 開始，這保證了如果一個(gè)有問(wèn)題的模塊忘記包含最后的分號(hào)在合并后不會(huì)出現(xiàn)錯(cuò)誤
• 這個(gè)文件應(yīng)該以駝峰命名，并在同名文件夾下，同時(shí)導(dǎo)出的時(shí)候名字一致
• 加入一個(gè)名為noConflict()的方法來(lái)設(shè)置導(dǎo)出的模塊為之前的版本并返回它

• 總是在模塊頂部聲明 'use strict';

  // 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);

　jQuery

• 緩存jQuery查詢

  // 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'
    });
  }

• 對(duì)DOM查詢使用級(jí)聯(lián)的 $('.sidebar ul') 或 $('.sidebar ul')，jsPerf

• 對(duì)有作用域的jQuery對(duì)象查詢使用 find

  // 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');

　　via：https://github.com/adamlu/javascript-style-guide

　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無(wú)需額外費(fèi)用，即可穩(wěn)步提升排名至首頁(yè)。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。