1. 縮進(jìn)

• 永遠(yuǎn)不要混用空格和Tab。
• 為了可讀性，部門(mén)統(tǒng)一建議使用2個(gè)空格寬度的縮進(jìn)。

2. 語(yǔ)法

A. 變量命名

當(dāng)創(chuàng)建變量時(shí)，建議在變量名前加上一個(gè)字母以表示該變量的類(lèi)型，如：

var sName = 'test';   // 表示String類(lèi)型
var nAge = 18;        // 表示Number類(lèi)型
var bShow = true;     // 表示Bool類(lèi)型
var aSkill = ['skill1', 'skill2', 'skill3'];     // 表示Array類(lèi)型
var fRun = funtion() {};        // 表示Function類(lèi)型
var rTmp = new RegExp('e', 'g');        // 表示RegExp類(lèi)型
var oData = {};           // 表示Object類(lèi)型

另外，在命名時(shí)，還需要注意下面幾點(diǎn)：

1. 所有命名最好使用英語(yǔ)表示。
2. 所有變量名應(yīng)該明確而必要，盡量避免不必要的容易混淆的縮寫(xiě)。
3. 對(duì)應(yīng)的方法應(yīng)該使用對(duì)應(yīng)的動(dòng)詞，例如： get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end。
4. 盡量避免復(fù)雜的條件語(yǔ)句，可以使用臨時(shí)的boolean變量代替。
5. 不要在代碼中重復(fù)使用有意義的數(shù)字，數(shù)字無(wú)法說(shuō)明自身，請(qǐng)用變量代替。常量的形式如: NAMES_LIKE_THIS, 命名使用大寫(xiě)字符, 并用下劃線分隔。
6. 模塊內(nèi)dom對(duì)象，帶$符號(hào)前綴，例如：$dom

B. js格式規(guī)范

1. 操作符前后要保留1個(gè)空格，提升代碼可讀性，每行代碼結(jié)束添加分號(hào)。

var nBase = 7;
var nNum = nBase + 1;

2. 使用括號(hào)和空格來(lái)提升可讀性

• if/for/try等判斷語(yǔ)句通常都有小括號(hào)、花括號(hào)和多行,建議換行

  // 錯(cuò)誤的例子
  if(condition) doSomething();

  // 正確的例子
  if (nBase > nNum) {
    // 語(yǔ)句
  } else {
    // 語(yǔ)句
  }
  for (var i = 0, len = 100; i < len; i++) {
    // 語(yǔ)句
  }

3. 同一個(gè)方法中或閉包中，變量定義統(tǒng)一在頂部

  // 錯(cuò)誤的例子
  var a = 1;
  a = a - 1;
  var b = 2;
  b = a - 2;

  // 正確的例子
  var a = 1;
  var b = 2;
  a = a - 1;
  b = a - 2;

4. 單引號(hào) (') 優(yōu)于雙引號(hào) (")，尤其是當(dāng)你創(chuàng)建一個(gè)包含 HTML代碼的字符串，所以在項(xiàng)目中要統(tǒng)一引號(hào)的使用，并保持一致。

  var str = 'test';

5. 提前返回函數(shù)結(jié)果，提升代碼的可讀性

  // 不好:
  function returnLate( foo ) {
   var ret;
   if ( foo ) {
      ret = "foo";
   } else {
      ret = "quux";
   }
   return ret;
  }
  // 好:
  function returnEarly( foo ) {
    if ( foo ) {
      return "foo";
    }
    return "quux";
  }

C. js變量類(lèi)型檢測(cè)和轉(zhuǎn)換

1. 判斷類(lèi)型

  // String:
  typeof variable === 'string'
  // Number:
  typeof variable === 'number'
  // Boolean:
  typeof variable === 'boolean'
  // Object:
  typeof variable === 'object'
  // Array: (如果可能的話)
  Array.isArray( arrayLikeObject )
  // Node:
  elem.nodeType === 1
  // null:
  variable === null
  // null or undefined:
  variable == null

  // undefined:
  // a.全局變量
  typeof variable === 'undefined'
  // b.局部變量
  variable === undefined
  // c.屬性
  object.prop === undefined
  object.hasOwnProperty(prop)
  'prop' in object

2. 轉(zhuǎn)換類(lèi)型

  * -> Number:
  nTmp = +sTmp;
  * -> String:
  sTmp = nTmp + ‘’;
  * -> Bool:
  bTmp = !!oTmp;

3. 取整

  var num = 2.5;
  parseInt( num, 10 );
  // 等價(jià)于...
  ~~num;
  // 去除變量中的英文
  parseInt('25px'); // 25

D. 判斷

// 當(dāng)只是判斷一個(gè) array 是否有長(zhǎng)度:
if ( array.length ) ...
// 當(dāng)只是判斷一個(gè) array 是否為空:
if ( !array.length ) ...
// 當(dāng)只是判斷一個(gè) string 是否為空:
if ( !string ) ...
// ...需要注意的是：這個(gè)將會(huì)匹配 0, ’’, null, undefined, NaN
// 如果你 _必須_ 是布爾類(lèi)型的 false，請(qǐng)這樣用：
if ( foo === false ) ...

// 但注意下面的值都返回 true:
'0' 字符串0
[] 空數(shù)組
{} 空對(duì)象

3. 閉包示例

在日常的項(xiàng)目中，我們通常會(huì)使用統(tǒng)一的閉包格式，需要注意下面幾點(diǎn)：

1. 通常我們把交互中使用的元素緩存到ui對(duì)象中以提高性能，特別是需要多次調(diào)用的元素。
2. 在oPage模塊中, init主要用于初始化程序，view和listen通常分別用于處理界面的初始化和事件綁定。
3. 在閉包中，統(tǒng)一使用self指代this。

  (function ($) {
    var ui = {
      $pageWrap: $('#page-wrap'),
      $btnConfirm: $('#btn-confirm')
    };
    var oPage = {
      init: function() {
        this.view();
        this.listen();
      }, 
      view: function() {
        var self = this;
        ui.$pageWrap.show();
      },
      listen: function() {
        var self = this;
        //關(guān)閉彈窗
        ui.$btnConfirm.on('click', function(){
          self.fHidePage();
        });
      }, 
      fHidePage: function() {
        var self = this;
        ui.$pageWrap.hide();
      }
    };
    oPage.init();
  })($);

4. js使用class選擇器時(shí)，class要單獨(dú)加前綴“js-”，例如：“js-main”，避免與css樣式使用同樣類(lèi)名。

  <div class="main js-main"></div>

  $main = $('.js-main');

5. 事件綁定

a. 禁止直接用onxxx綁定事件,如：

document.onclick = function(e){
  // do something
}

b. 在使用jQuery的項(xiàng)目中，建議使用on()的實(shí)現(xiàn)事件綁定或代理。

$(document).on('click', '.btn', function(e) {
  // do something
});

c. 若項(xiàng)目采用純?cè)鷍s開(kāi)發(fā)，建議使用addEventListener實(shí)現(xiàn)事件代理和綁定。

window.addEventListener('click', function(e) {
  // do something
}, false);

6. ajax規(guī)范

在前后端合作的項(xiàng)目中基本都會(huì)用到ajax請(qǐng)求數(shù)據(jù)，通常我們使用jQuery庫(kù)，以實(shí)現(xiàn)更便捷的ajax操作和模擬數(shù)據(jù)請(qǐng)求。
a. 通常在index.html下聲明以下對(duì)象，oData存儲(chǔ)一些程序中可能會(huì)修改的變量，如倒計(jì)時(shí)的時(shí)間；oUrl存儲(chǔ)后端數(shù)據(jù)接口的地址，如下發(fā)抽獎(jiǎng)的地址。

window.oPageConfig = {
  oUrl: {
    sLottery: '/lottery'
  }, 
  oData: {
    nLotteryTimes: 60
  }
}

b. 通常我們與后端約定的數(shù)據(jù)包含交互格式如下：

var msg = {
  code: 0, 
  message: 'success',
  data: {
    id: 7,
    name: 'prize'
  }
};

其中，當(dāng)code == 0則表示請(qǐng)求成功，此時(shí)data對(duì)象中會(huì)包含所需的數(shù)據(jù)，若code != 0，message則會(huì)返回失敗的原因。

$.ajax({
  type: 'get',
  data: {},
  dataType : 'JSON',
  url: window.oUrl.lottery
}).done(function (msg){
  if (0 == msg.code) {
    // code == 0 表示成功
  }else{
    // code ！= 0 表示請(qǐng)求失敗
  };
});

7. ajax數(shù)據(jù)模擬規(guī)范

統(tǒng)一使用http://rap.imeete.com ，用戶(hù)名指域賬號(hào)，密碼自己設(shè)置。

• 使用之前進(jìn)行host綁定，192.168.136.105 rap.imeete.com
• 如果未開(kāi)通，請(qǐng)找王春青

8. 注釋

a. 代碼應(yīng)添加必要的注釋?zhuān)⑨層幸饬x且易懂
b. 在每個(gè)js文件頭部插入以下注釋?zhuān)阌诤笃诳焖倭私鈐s文件所包含的功能和負(fù)責(zé)人。

/* ==========================================================
* xxx.js v201xMMDD
* ==========================================================
* by xxx
*
* 1、功能1
* 2、功能2
* ========================================================== */

c.函數(shù)注釋方式如下：

/**
 * 取消事件
 *
 * @param {Element} el dom元素
 * @param {String} event 事件
 * @param {Boolean} cb 冒泡
 * @param {Number} type 類(lèi)型，可選1(上線),2(下線)
 */
export function off(el, event, cb = false) {
  el.removeEventListener(event, cb);
}

9. 后臺(tái)項(xiàng)目

項(xiàng)目結(jié)構(gòu)

待更新

代碼結(jié)構(gòu)

待更新