编码规范

// 下面是推荐写法的属性的顺序
[
    [
        "display",
        "visibility",
        "float",
        "clear",
        "overflow",
        "overflow-x",
        "overflow-y",
        "clip",
        "zoom"
    ],
    [
        "table-layout",
        "empty-cells",
        "caption-side",
        "border-spacing",
        "border-collapse",
        "list-style",
        "list-style-position",
        "list-style-type",
        "list-style-image"
    ],
    [
        "-webkit-box-orient",
        "-webkit-box-direction",
        "-webkit-box-decoration-break",
        "-webkit-box-pack",
        "-webkit-box-align",
        "-webkit-box-flex"
    ],
    [
        "position",
        "top",
        "right",
        "bottom",
        "left",
        "z-index"
    ],
    [
        "margin",
        "margin-top",
        "margin-right",
        "margin-bottom",
        "margin-left",
        "-webkit-box-sizing",
        "-moz-box-sizing",
        "box-sizing",
        "border",
        "border-width",
        "border-style",
        "border-color",
        "border-top",
        "border-top-width",
        "border-top-style",
        "border-top-color",
        "border-right",
        "border-right-width",
        "border-right-style",
        "border-right-color",
        "border-bottom",
        "border-bottom-width",
        "border-bottom-style",
        "border-bottom-color",
        "border-left",
        "border-left-width",
        "border-left-style",
        "border-left-color",
        "-webkit-border-radius",
        "-moz-border-radius",
        "border-radius",
        "-webkit-border-top-left-radius",
        "-moz-border-radius-topleft",
        "border-top-left-radius",
        "-webkit-border-top-right-radius",
        "-moz-border-radius-topright",
        "border-top-right-radius",
        "-webkit-border-bottom-right-radius",
        "-moz-border-radius-bottomright",
        "border-bottom-right-radius",
        "-webkit-border-bottom-left-radius",
        "-moz-border-radius-bottomleft",
        "border-bottom-left-radius",
        "-webkit-border-image",
        "-moz-border-image",
        "-o-border-image",
        "border-image",
        "-webkit-border-image-source",
        "-moz-border-image-source",
        "-o-border-image-source",
        "border-image-source",
        "-webkit-border-image-slice",
        "-moz-border-image-slice",
        "-o-border-image-slice",
        "border-image-slice",
        "-webkit-border-image-width",
        "-moz-border-image-width",
        "-o-border-image-width",
        "border-image-width",
        "-webkit-border-image-outset",
        "-moz-border-image-outset",
        "-o-border-image-outset",
        "border-image-outset",
        "-webkit-border-image-repeat",
        "-moz-border-image-repeat",
        "-o-border-image-repeat",
        "border-image-repeat",
        "padding",
        "padding-top",
        "padding-right",
        "padding-bottom",
        "padding-left",
        "width",
        "min-width",
        "max-width",
        "height",
        "min-height",
        "max-height"
    ],
    [
        "font",
        "font-family",
        "font-size",
        "font-weight",
        "font-style",
        "font-variant",
        "font-size-adjust",
        "font-stretch",
        "font-effect",
        "font-emphasize",
        "font-emphasize-position",
        "font-emphasize-style",
        "font-smooth",
        "line-height",
        "text-align",
        "-webkit-text-align-last",
        "-moz-text-align-last",
        "-ms-text-align-last",
        "text-align-last",
        "vertical-align",
        "white-space",
        "text-decoration",
        "text-emphasis",
        "text-emphasis-color",
        "text-emphasis-style",
        "text-emphasis-position",
        "text-indent",
        "-ms-text-justify",
        "text-justify",
        "letter-spacing",
        "word-spacing",
        "-ms-writing-mode",
        "text-outline",
        "text-transform",
        "text-wrap",
        "-ms-text-overflow",
        "text-overflow",
        "text-overflow-ellipsis",
        "text-overflow-mode",
        "-ms-word-wrap",
        "word-wrap",
        "-ms-word-break",
        "word-break"
    ],
    [
        "color",
        "background",
        "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
        "background-color",
        "background-image",
        "background-repeat",
        "background-attachment",
        "background-position",
        "-ms-background-position-x",
        "background-position-x",
        "-ms-background-position-y",
        "background-position-y",
        "-webkit-background-clip",
        "-moz-background-clip",
        "background-clip",
        "background-origin",
        "-webkit-background-size",
        "-moz-background-size",
        "-o-background-size",
        "background-size"
    ],
    [
        "outline",
        "outline-width",
        "outline-style",
        "outline-color",
        "outline-offset",
        "opacity",
        "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
        "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
        "-ms-interpolation-mode",
        "-webkit-box-shadow",
        "-moz-box-shadow",
        "box-shadow",
        "filter:progid:DXImageTransform.Microsoft.gradient",
        "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
        "text-shadow"
    ],
    [
        "-webkit-transition",
        "-moz-transition",
        "-ms-transition",
        "-o-transition",
        "transition",
        "-webkit-transition-delay",
        "-moz-transition-delay",
        "-ms-transition-delay",
        "-o-transition-delay",
        "transition-delay",
        "-webkit-transition-timing-function",
        "-moz-transition-timing-function",
        "-ms-transition-timing-function",
        "-o-transition-timing-function",
        "transition-timing-function",
        "-webkit-transition-duration",
        "-moz-transition-duration",
        "-ms-transition-duration",
        "-o-transition-duration",
        "transition-duration",
        "-webkit-transition-property",
        "-moz-transition-property",
        "-ms-transition-property",
        "-o-transition-property",
        "transition-property",
        "-webkit-transform",
        "-moz-transform",
        "-ms-transform",
        "-o-transform",
        "transform",
        "-webkit-transform-origin",
        "-moz-transform-origin",
        "-ms-transform-origin",
        "-o-transform-origin",
        "transform-origin",
        "-webkit-animation",
        "-moz-animation",
        "-ms-animation",
        "-o-animation",
        "animation",
        "-webkit-animation-name",
        "-moz-animation-name",
        "-ms-animation-name",
        "-o-animation-name",
        "animation-name",
        "-webkit-animation-duration",
        "-moz-animation-duration",
        "-ms-animation-duration",
        "-o-animation-duration",
        "animation-duration",
        "-webkit-animation-play-state",
        "-moz-animation-play-state",
        "-ms-animation-play-state",
        "-o-animation-play-state",
        "animation-play-state",
        "-webkit-animation-timing-function",
        "-moz-animation-timing-function",
        "-ms-animation-timing-function",
        "-o-animation-timing-function",
        "animation-timing-function",
        "-webkit-animation-delay",
        "-moz-animation-delay",
        "-ms-animation-delay",
        "-o-animation-delay",
        "animation-delay",
        "-webkit-animation-iteration-count",
        "-moz-animation-iteration-count",
        "-ms-animation-iteration-count",
        "-o-animation-iteration-count",
        "animation-iteration-count",
        "-webkit-animation-direction",
        "-moz-animation-direction",
        "-ms-animation-direction",
        "-o-animation-direction",
        "animation-direction"
    ],
    [
        "content",
        "quotes",
        "counter-reset",
        "counter-increment",
        "resize",
        "cursor",
        "-webkit-user-select",
        "-moz-user-select",
        "-ms-user-select",
        "user-select",
        "nav-index",
        "nav-up",
        "nav-right",
        "nav-down",
        "nav-left",
        "-moz-tab-size",
        "-o-tab-size",
        "tab-size",
        "-webkit-hyphens",
        "-moz-hyphens",
        "hyphens",
        "pointer-events"
    ]
]

var x = 1,
    y = 1;
    
if (x < y) {
    x += 10;
} else {
    x += 1;
}

/* 声明 */
var x = 1;
 
/* 表达式 */
x++;
 
/* do-while */
do {
    x++;
} while (x < 10);

// 不推荐写法
var a = {
    b :1
};
 
// 推荐写法
var a = {
    b: 1
};
 
// 不推荐写法
++ x;
y ++;
z = x?1:2;

// 推荐写法
++x;
y++;
z = x ? 1 : 2;
 
// 不推荐写法
var a = [ 1, 2 ];
 
// 推荐写法
var a = [1, 2];
 
// 不推荐写法
var a = ( 1+2 )*3;
 
// 推荐写法
var a = (1 + 2) * 3;
 
// 在'('前不要有空格，在函数参数后的'{'留一个空格
var doSomething = function(a, b, c) {
    // ……
};
 
// '('不留空格
doSomething(item);
 
// 不推荐写法
for(i=0;i<6;i++){
    x++;
}
 
// 推荐写法
for (i = 0; i < 6; i++) {
    x++;
}

// 在声明变量之后留一空行
var x = 1;
 
// 当声明变量是当前语句块中最后一个表达式时，之后不需要留空行
if (x >= 1) {
    var y = x + 1;
}
 
var a = 2;
 
// 在行注释之前需要留空行
a++;
 
function b() {
    // 如果行注释是代码块中的第一行则注释之前不需要留空行
    return a;
}
 
// 在代码块之后需要有空行
for (var i = 0; i < 2; i++) {
    if (true) {
        return false;
    }
    
    continue;
}
 
var obj = {
    foo: function() {
        return 1;
    },
    
    bar: function() {
        return 2;
    }
};
 
// 参数列表，数组，对象不需要留空行
func(
    2,
    function() {
        a++;
    },
    3
);
 
var foo = [
    2,
    function() {
        a++;
    },
    3
];
  
 
var foo = {
    a: 2,
    b: function() {
        a++;
    },
    c: 3
};

// 不推荐写法
var a = {
    b: 1
    , c: 2
};
 
x = y
    ? 1 : 2;
 
// 推荐写法
var a = {
    b: 1,
    c: 2
};
 
x = y ? 1 : 2;
x = y ?
    1 : 2;
 
// 'else', 'catch', 'finally'不需要换行
if (condition) {
    ...
} else {
    ...
}
 
try {
    ...
} catch (e) {
    ...
} finally {
    ...
}
 
// 不推荐写法
function test()
{
    ...
}
 
// 推荐写法
function test() {
    ...
}
 
// 不推荐写法
var a, foo = 7, b,
    c, bar = 8;
 
// 推荐写法
var a,
    foo = 7,
    b, c, bar = 8;

if (condition) {
    // 允许
    allowed();
}
 
var zhangsan = 'zhangsan'; // 在代码之后加一个空格

/*
 * 在'*'之后加一个空格
 */
var x = 1;

/**
 * @func
 * @desc 一个带参数的函数
 * @param {string} a - 参数a
 * @param {number} b=1 - 参数b默认值为1
 * @param {string} c=1 - 参数c有两种支持的取值</br>1—表示x</br>2—表示xx
 * @param {object} d - 参数d为一个对象
 * @param {string} d.e - 参数d的e属性
 * @param {string} d.f - 参数d的f属性
 * @param {object[]} g - 参数g为一个对象数组
 * @param {string} g.h - 参数g数组中一项的h属性
 * @param {string} g.i - 参数g数组中一项的i属性
 * @param {string} [j] - 参数j是一个可选参数
 */
function foo(a, b, c, d, g, j) {
    ...
}

// 不推荐写法
var x = "test";
 
// 推荐写法
var y = 'foo',
    z = '<div id="test"></div>';

var thisIsMyName;
 
var goodID;
 
var reportURL;
 
var AndroidVersion;
 
var iOSVersion;
 
var MAX_COUNT = 10;
 
function Person(name) {
    this.name = name;
}
 
// 不推荐写法
var body = $('body');
 
// 推荐写法
var $body = $('body');

function doSomethingWithItems(items) {
    // 只用一个'var'声明
    var value = 10,
        result = value + 10,
        i,
        len;
        
    for (i = 0, len = items.length; i < len; i++) {
        result += 10;
    }
}

// 在'('之前不使用空格, 但在'{'之前要使用空格
var doSomething = function(item) {
    // ……
};
 
function doSomething(item) {
    // ……
}
 
// 不推荐写法
doSomething (item);
 
// 推荐写法
doSomething(item);
 
// 需要在立即调用的函数外面加括号
(function() {
    return 1;
})();
 
// 不推荐写法
[1, 2].forEach(function x() {
    ...
});
 
// 推荐写法
[1, 2].forEach(function() {
    ...
});
 
// 不推荐写法
var a = [1, 2, function a() {
    ...
}];
 
// 推荐写法
var a = [1, 2, function() {
    ...
}];
 
// 在函数参数之间使用', '，有一个空格
var doSomething = function(a, b, c) {
    // ……
};

// 不推荐写法
var a = {
    'b': 1
};
 
var a = {b: 1};
 
var a = {
    b: 1,
    c: 2,
};
 
// 推荐写法
var a = {
    b: 1,
    c: 2
};

// 不推荐写法
if (condition)
    doSomething();
 
// 推荐写法
if (condition) {
    doSomething();
}

// 不推荐写法
function test(a, b) {
    if (b === null) {
        // not mean b is not supply
        ...
    }
}
 
var a;
 
if (a === null) {
    ...
}
  
// 推荐写法
var a = null;
 
if (a === null) {
    ...
}

// 不推荐写法
if (person === undefined) {
    ...
}
 
// 推荐写法
if (typeof person === 'undefined') {
    ...
}

// 不推荐写法
if (a == 1) {
    a++;
}
 
// 推荐写法
if (a === 1) {
    a++;
}
 
// 推荐写法
for (key in obj) {
    if (obj.hasOwnProperty(key)) {
        // 确保obj[key]是对象，且不会被继承
        console.log(obj[key]);
    }
}
 
// 不推荐写法
Array.prototype.count = function(value) {
    return 4;
};
 
// 不推荐写法
var x = 1;
 
function test() {
    if (true) {
        var x = 0;
    }

    x += 1;
}
 
// 不推荐写法
function test() {
    console.log(x);

    var x = 1;
}
 
// 不推荐写法
new Person();
 
// 推荐写法
var person = new Person();
 
// 不推荐写法
delete(obj.attr);
 
// 推荐写法
delete obj.attr;
 
// 不推荐写法
if (a = 10) {
    a++;
}
 
// 不推荐写法
var a = [1, , , 2, 3];
 
// 不推荐写法
var nums = [];
 
for (var i = 0; i < 10; i++) {
    (function(i) {
        nums[i] = function(j) {
            return i + j;
        };
    }(i));
}
 
// 不推荐写法
var singleton = new function() {
    var privateVar;

    this.publicMethod = function() {
        privateVar = 1;
    };

    this.publicMethod2 = function() {
        privateVar = 2;
    };
};

// 不推荐写法
var a   = 1;
 
function Person() {
    // 不推荐写法
    var me = this;
    
    // 推荐写法
    var _this = this;
    
    // 推荐写法
    var that = this;
    
    // 推荐写法
    var self = this;
}
 
// 推荐写法
switch (condition) {
    case 1:
    case 2:
        // ……
        break;
    case 3:
        // ……
    // 通过
    case 4
        ...
        break;
    // 没有默认
}
 
// 不允许有空的代码块
if (condition) {
    
}