Amaze UI JavaScript 规范

1.基本编码规范

• AllMobilize JavaScript Style Guide
  
• CMD 模块定义规范
  

2.代码质量控制工具

2016.04.20 替换为 ESLint，参见 Welcoming JSCS to ESLint

3.jQuery / Zepto.js 使用规范

• 存放 jQuery / Zepto 对象的变量以 $ 开头；
  
• 禁止使用 slideUp/Down() fadeIn/fadeOut() 等方法；
  
• 尽量不使用 animate() 方法；
  
• 使用和 Zepto.js 兼容的基本选择符，不使用效率较低且与 Zepto.js 不兼容的选择符。
  

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

4.代码格式

• 缩进 2 个空格；
  
• 使用多 var 模式声明变量：更容易维护，比如要删除第一个变量或者最后一个变量时，多 var 模式直接删除即可，单 var 还要去修改别的行（for 循环例外）；
  

Valid

var x = 1;
var y = 2;

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

var x = 1,
    y = 2;

5.命名规范

1. 文件和目录名只能包含 [a-z\d\-]，并以英文字母开头
   
2. 首选合适的英文单词
   
3. Data API 命名使用小写、用连字符连接、添加 am 命名空间，如 data-am-trigger
   
4. 事件名使用小写字母，包含模块名及 amui 命名空间名，使用 : 连接（Zepto 不支持使用 . 链接的自定义事件），如 .trigger('open:modal:amui')
   
5. 符合规范
   

• 常量全大写 UPPERCASE_WORD
  
• 变量驼峰 camelName
  
• 类名驼峰，并且首字母要大写 CamelName
  

• 基本: data-am-{组件名}，如 data-am-modal、data-am-navbar-qrcode
  
• 传参: data-am-modal="{key1: 'val1', key2: false}"，core.js 中增加一个专门解析参数的函数
  

• 自定义事件命名：{自定义事件名}:{组件名}:{后缀}，Zepto 不支持 . 分隔的自定义事件语法，官方示例中使用 : 分隔，如 closed:modal:amui。Zepto 中没有 event.namespace，这样的命名方式只用于清晰区分不同模块的自定义事件。另外，按照 Zepto 官方示例，应该写成 amui:modal:closed，为跟 jQuery 的写法统一，颠倒顺序书写。
  
• 默认绑定事件：事件名（内置事件，非自定义事件）采用 {事件名}.{组件名}.{命名空间}，如 $(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() {
    ...
}

# 模块名称

-----

该模块的概要介绍。

------

## 使用说明

如何使用该模块，可以根据组件的具体特征，合理组织。

## API

需要提供 API 说明，属性、方法、事件等。

## 使用示例