前端开发规范

注释

合理的注释可以让代码更易阅读、更具美感。

函数/方法注释

函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识；
参数和返回值注释必须包含类型信息和说明；

/**
 * 函数描述
 *
 * @param {string} p1 参数1的说明
 * @param {string} p2 参数2的说明
 * @param {number} p3 参数3的说明（可选）
 * @return {Object} 返回值描述
 */
function foo(p1, p2, p3) {
    var p3 = p3 || 10;
    return {
        p1: p1,
        p2: p2,
        p3: p3
    };
}

文件注释

文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。 应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息。如下:

/**
 * @des: 描述信息
 * @author 作者
 * @date 日期
 */

命名

变量, 使用 Camel 命名法

var userName = {};

私有属性、变量和方法以下划线 _ 开头

var _userName = {};

常量, 使用全部字母大写，单词间下划线分隔的命名方式

var API_PATH = {};

函数,使用 Camel 命名法, 函数的参数, 使用 Camel 命名法

function getUserName(userId) {

}

类,使用 Pascal 命名法, 类的方法/属性,使用 Camel 命名法

function PersonMan(userName) {
    this.userName = userName;
    this.getUserName = function(){
        return this.userName;
    }
}
PersonMan.prototype.setUserName= function (userName) {
    this.userName = userName;
};

命名语法

类名，使用名词

function Person(personName) {

}

函数名，使用动宾短语

function getStyle(element) {

}

boolean 类型的变量使用 is 或 has 开头

var isLoading = false;
var hasName = false;

True 和 False 布尔表达式

类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 == null。

下面的布尔表达式都返回 false:
null
undefined
'' 空字符串
0 数字0

但下面的, 都返回 true:
'0' 字符串0
[] 空数组
{} 空对象

jQuery 变量

存放 jQuery 对象的变量以 $ 开头；
将 jQuery 选择器返回的对象缓存到本地变量中复用；
使用驼峰命名变量；

var $myDiv = $("#myDiv");
$myDiv.click(function(){...});

避免不必要的 DOM 操作

当要操作 DOM 元素的时候，尽量将其分离节点，操作结束后，再插入节点；

var $myList = $("#list-container > ul").detach();
$myList.appendTo("#list-container");

使用字符串连接或 array.join 要比 .append()性能更好；

// 不推荐
var $myList = $("#list");
for(var i = 0; i < 10000; i++){
    $myList.append("<li>"+i+"</li>");
}

// 推荐
var $myList = $("#list");
var list = "";
for(var i = 0; i < 10000; i++){
    list += "<li>"+i+"</li>";
}
$myList.html(list);

// 强烈推荐
var array = [];
for(var i = 0; i < 10000; i++){
    array[i] = "<li>"+i+"</li>";
}
$myList.html(array.join(''));

异步加载第三方内容

当你无法保证嵌入第三方内容(比如嵌入谷歌统计)可以正常工作的时候，你需要考虑用异步加载这些代码，避免阻塞整个页面加载。

(function() {

    var script,
        scripts = document.getElementsByTagName('script')[0];

    function load(url) {
      script = document.createElement('script');
      script.async = true;
      script.src = url;
      scripts.parentNode.insertBefore(script, scripts);
    }

    load(url);
}());