Amaze UI JavaScript 規(guī)范

1.基本編碼規(guī)范

• AllMobilize JavaScript Style Guide
  
• CMD 模塊定義規(guī)范
  

2.代碼質(zhì)量控制工具

2016.04.20 替換為 ESLint，參見 Welcoming JSCS to ESLint

3.jQuery / Zepto.js 使用規(guī)范

• 存放 jQuery / Zepto 對象的變量以 $ 開頭；
  
• 禁止使用 slideUp/Down() fadeIn/fadeOut() 等方法；
  
• 盡量不使用 animate() 方法；
  
• 使用和 Zepto.js 兼容的基本選擇符，不使用效率較低且與 Zepto.js 不兼容的選擇符。
  

• 自定義事件命名空間： Zepto.js 不支持 . 語法，只能使用 : 語法。
  
• http://zeptojs.com/#event
  
• http://api.jquery.com/event.namespace/
  

4.代碼格式

• 縮進 2 個空格；
  
• 使用多 var 模式聲明變量：更容易維護，比如要刪除第一個變量或者最后一個變量時，多 var 模式直接刪除即可，單 var 還要去修改別的行（for 循環(huán)例外）；
  

Valid

var x = 1;
var y = 2;

for (var i = 0, j = arr.length; i < j; i++) {
}

var x = 1,
    y = 2;

5.命名規(guī)范

1. 文件和目錄名只能包含 [a-z\d\-]，并以英文字母開頭
   
2. 首選合適的英文單詞
   
3. Data API 命名使用小寫、用連字符連接、添加 am 命名空間，如 data-am-trigger
   
4. 事件名使用小寫字母，包含模塊名及 amui 命名空間名，使用 : 連接（Zepto 不支持使用 . 鏈接的自定義事件），如 .trigger('open:modal:amui')
   
5. 符合規(guī)范
   

• 常量全大寫 UPPERCASE_WORD
  
• 變量駝峰 camelName
  
• 類名駝峰，并且首字母要大寫 CamelName
  

• 基本: data-am-{組件名}，如 data-am-modal、data-am-navbar-qrcode
  
• 傳參: data-am-modal="{key1: 'val1', key2: false}"，core.js 中增加一個專門解析參數(shù)的函數(shù)
  

• 自定義事件命名：{自定義事件名}:{組件名}:{后綴}，Zepto 不支持 . 分隔的自定義事件語法，官方示例中使用 : 分隔，如 closed:modal:amui。Zepto 中沒有 event.namespace，這樣的命名方式只用于清晰區(qū)分不同模塊的自定義事件。另外，按照 Zepto 官方示例，應(yīng)該寫成 amui:modal:closed，為跟 jQuery 的寫法統(tǒng)一，顛倒順序書寫。
  
• 默認綁定事件：事件名（內(nèi)置事件，非自定義事件）采用 {事件名}.{組件名}.{命名空間}，如 $(document).on('click.modal.amui',...。
  
• 取消所有默認綁定事件： $(document).off('.amui',...
• 取消特定組件的默認綁定事件： $(document).off('.modal.amui',...

// Using loop is more efficient than `rest = slice.call(arguments, 1)`.
for (i = 1, len = arguments.length; i < len; i++) {
    rest[i - 1] = arguments[i];
}

init: function(selector, context, rootjQuery) {
    var match, elem, ret, doc;

    // Handle $(""), $(null), or $(undefined)
    if ( !selector ) {
        ...
    }

    // Handle $(DOMElement)
    if ( selector.nodeType ) {
        ...
    }

    // The body element only exists once, optimize finding it
    if ( typeof selector === "string" ) {
        ...
     }
}

// Inspired by https://github.com/jquery/jquery/blob/master/src/core.js
function ready() {
    ...
}

# 模塊名稱

-----

該模塊的概要介紹。

------

## 使用說明

如何使用該模塊，可以根據(jù)組件的具體特征，合理組織。

## API

需要提供 API 說明，屬性、方法、事件等。

## 使用示例