摘要：示例空格強(qiáng)制二元運(yùn)算符兩側(cè)必須有一個(gè)空格，一元運(yùn)算符與操作對(duì)象之間不允許有空格。示例強(qiáng)制行尾不得有多余的空格。示例建議函數(shù)聲明具名函數(shù)表達(dá)式函數(shù)調(diào)用中，函數(shù)名和之間不允許有空格。示例命名強(qiáng)制變量使用命名法。

這段時(shí)間在整理前端代碼規(guī)范，現(xiàn)將JS部分的內(nèi)容整理，都是基本基礎(chǔ)的內(nèi)容。請(qǐng)各位大神斧正！！
目前已經(jīng)整理如下的代碼規(guī)范：HTML編碼規(guī)范 、 CSSS編碼規(guī)范 、 CSS規(guī)范--BEM入門

示例：

// good
switch (variable) {
    case "1":
        // do...
        break;
    case "2":
        // do...
        break;
    default:
        // do...
}

------------


// bad
switch (variable) {
case "1":
    // do...
    break;
case "2":
    // do...
    break;
default:
    // do...
}

示例：

var a = !arr.length;
a++;
a = b + c;

示例：

// good
var obj = {
    a: 1,
    b: 2,
    c: 3
};

------------

// bad
var obj = {
    a : 1,
    b:2,
    c :3
};

示例：

// good
callFunc(a, b);

------------
// bad
callFunc(a , b) ;

示例：
解釋：
聲明包含元素的數(shù)組與對(duì)象，只有當(dāng)內(nèi)部元素的形式較為簡單時(shí)，才允許寫在一行。元素復(fù)雜的情況，還是應(yīng)該換行書寫。
示例：

// good
var arr1 = [];
var arr2 = [1, 2, 3];
var obj1 = {};
var obj2 = {name: "obj"};
var obj3 = {
    name: "obj",
    age: 20,
    sex: 1
};

------------

// bad
var arr1 = [ ];
var arr2 = [ 1, 2, 3 ];
var obj1 = { };
var obj2 = { name: "obj" };
var obj3 = {name: "obj", age: 20, sex: 1};

示例：

// good
if (condition) {
}
while (condition) {
}
function funcName() {
}

------------


// bad
if (condition){
}
while (condition){
}
function funcName(){
}

示例：

// good
if (condition) {
}
while (condition) {
}
(function () {
})();

------------

// bad
if(condition) {
}
while(condition) {
}
(function() {
})();

示例：

// good
function funcName() {
}
var funcName = function funcName() {
};
funcName();

------------

// bad
function funcName () {
}
var funcName = function funcName () {
};
funcName ();

解釋：
超長的不可分割的代碼允許例外，比如復(fù)雜的正則表達(dá)式。長字符串不在例外之列。

[強(qiáng)制] 運(yùn)算符處換行時(shí)，運(yùn)算符必須在新行的行首。

示例：

// good
if (user.isAuthenticated()
    && user.isInRole("admin")
    && user.hasAuthority("add-admin")
    || user.hasAuthority("delete-admin")
) {
    // Code
}
var result = number1 + number2 + number3
    + number4 + number5;

------------
// bad
if (user.isAuthenticated() &&
    user.isInRole("admin") &&
    user.hasAuthority("add-admin") ||
    user.hasAuthority("delete-admin")) {
    // Code
}
var result = number1 + number2 + number3 +
    number4 + number5;

示例：

// good
var obj = {
    a: 1,
    b: 2,
    c: 3
};
foo(
    aVeryVeryLongArgument,
    anotherVeryLongArgument,
    callback
);

------------

// bad
var obj = {
    a: 1
    , b: 2
    , c: 3
};
foo(
    aVeryVeryLongArgument
    , anotherVeryLongArgument
    , callback
);

示例：

// 僅為按邏輯換行的示例，不代表setStyle的最優(yōu)實(shí)現(xiàn)
function setStyle(element, property, value) {
    if (element == null) {
        return;
    }
    element.style[property] = value;
}

示例：

// 較復(fù)雜的邏輯條件組合，將每個(gè)條件獨(dú)立一行，邏輯運(yùn)算符放置在行首進(jìn)行分隔，或?qū)⒉糠诌壿嫲催壿嫿M合進(jìn)行分隔。
// 建議最終將右括號(hào) ) 與左大括號(hào) { 放在獨(dú)立一行，保證與 `if` 內(nèi)語句塊能容易視覺辨識(shí)。
if (user.isAuthenticated()
    && user.isInRole("admin")
    && user.hasAuthority("add-admin")
    || user.hasAuthority("delete-admin")
) {
    // Code
}
// 按一定長度截?cái)嘧址?，并使?+ 運(yùn)算符進(jìn)行連接。
// 分隔字符串盡量按語義進(jìn)行，如不要在一個(gè)完整的名詞中間斷開。
// 特別的，對(duì)于 HTML 片段的拼接，通過縮進(jìn)，保持和 HTML 相同的結(jié)構(gòu)。
var html = "" // 此處用一個(gè)空字符串，以便整個(gè) HTML 片段都在新行嚴(yán)格對(duì)齊
    + "
"
    +     "
Title here
"
    +     "
This is a paragraph
"
    +     ""
    + "
";
// 也可使用數(shù)組來進(jìn)行拼接，相對(duì) `+` 更容易調(diào)整縮進(jìn)。
var html = [
    "
",
        "
Title here
",
        "
This is a paragraph
",
        "",
    "
"
];
html = html.join("");
// 當(dāng)參數(shù)過多時(shí)，將每個(gè)參數(shù)獨(dú)立寫在一行上，并將結(jié)束的右括號(hào) ) 獨(dú)立一行。
// 所有參數(shù)必須增加一個(gè)縮進(jìn)。
foo(
    aVeryVeryLongArgument,
    anotherVeryLongArgument,
    callback
);
// 也可以按邏輯對(duì)參數(shù)進(jìn)行組合。
// 最經(jīng)典的是 baidu.format 函數(shù)，調(diào)用時(shí)將參數(shù)分為“模板”和“數(shù)據(jù)”兩塊
baidu.format(
    dateFormatTemplate,
    year, month, date, hour, minute, second
);
// 當(dāng)函數(shù)調(diào)用時(shí)，如果有一個(gè)或以上參數(shù)跨越多行，應(yīng)當(dāng)每一個(gè)參數(shù)獨(dú)立一行。
// 這通常出現(xiàn)在匿名函數(shù)或者對(duì)象初始化等作為參數(shù)時(shí)，如 `setTimeout` 函數(shù)等。
setTimeout(
    function () {
        alert("hello");
    },
    200
);
order.data.read(
    "id=" + me.model.id,
    function (data) {
        me.attchToModel(data.result);
        callback();
    },
    300
);
// 鏈?zhǔn)秸{(diào)用較長時(shí)采用縮進(jìn)進(jìn)行調(diào)整。
$("#items")
    .find(".selected")
    .highlight()
    .end();
// 三元運(yùn)算符由3部分組成，因此其換行應(yīng)當(dāng)根據(jù)每個(gè)部分的長度不同，形成不同的情況。
var result = thisIsAVeryVeryLongCondition
    ? resultA : resultB;
var result = condition
    ? thisIsAVeryVeryLongResult
    : resultB;
// 數(shù)組和對(duì)象初始化的混用，嚴(yán)格按照每個(gè)對(duì)象的 `{` 和結(jié)束 `}` 在獨(dú)立一行的風(fēng)格書寫。
var array = [
    {
        // ...
    },
    {
        // ...
    }
];

示例：

if (condition) {
    // some statements;
}
else {
    // some statements;
}
try {
    // some statements;
}
catch (ex) {
    // some statements;
}

示例：

// good
if (condition) {
    callFunc();
}

------------

// bad
if (condition) callFunc();
if (condition)
    callFunc();

[強(qiáng)制] 函數(shù)定義結(jié)束不允許添加分號(hào)。

示例：

// good
function funcName() {
}

------------

// bad
function funcName() {
};
// 如果是函數(shù)表達(dá)式，分號(hào)是不允許省略的。
var funcName = function () {
};

解釋：

IIFE = Immediately-Invoked Function Expression.
額外的 ( 能夠讓代碼在閱讀的一開始就能判斷函數(shù)是否立即被調(diào)用，進(jìn)而明白接下來代碼的用途。而不是一直拖到底部才恍然大悟。
示例：

// good
var task = (function () {
   // Code
   return result;
})();
var func = function () {
};

------------

// bad
var task = function () {
    // Code
    return result;
}();
var func = (function () {
});

示例：

var loadingModules = {};

示例：

// good
var $sidebar = $(".sidebar");

------------

// bad
var sidebar = $(".sidebar");

示例：

var HTML_ENTITY = {};

示例：

function getStyle(element) {
}

示例：

function getStyle(element) {
}

示例：

function TextNode(options) {
}

示例：

function Engine(options) {
}

示例：

function TextNode(value, engine) {
    this.value = value;
    this.engine = engine;
}
TextNode.prototype.clone = function () {
    return this;
};

示例：

var TargetState = {
    READING: 1,
    READED: 2,
    APPLIED: 3,
    READY: 4
};

示例：

function XMLParser() {
}
function insertHTML(element, html) {
}
var httpRequest = new HTTPRequest();

示例：

var isReady = false;
var hasMoreCommands = false;

示例：

var loadingData = ajax.get("url");
loadingData.then(callback);

示例：

// good
function () {
    return function () {
        console.log(this);
    }.bind(this);
}
// bad
function () {
    var self = this;
    return function () {
        console.log(self);
    };
}
// bad
function () {
    var that = this;
    return function () {
        console.log(that);
    };
}
// bad
function () {
    var _this = this;
    return function () {
        console.log(_this);
    };
}

解釋：

文件

namespace

類

函數(shù)或方法

類屬性

事件

全局變量

常量

解釋：
常用類型如：{string}, {number}, {boolean}, {Object}, {Function}, {RegExp}, {Array}, {Date}。
類型不僅局限于內(nèi)置的類型，也可以是自定義的類型。比如定義了一個(gè)類 Developer，就可以使用它來定義一個(gè)參數(shù)和返回值的類型。

示例：

示例：

/**
 * @file Describe the file
 */

解釋：
生成的文檔中將有可訪問性的標(biāo)記，避免用戶直接使用非 public 的屬性或方法。
示例：

/**
 * 類描述
 *
 * @class
 * @extends Developer
 */
var Fronteer = function () {
    Developer.call(this);
    /**
     * 屬性描述
     *
     * @type {string}
     * @private
     */
    this.level = "T12";
    // constructor body
};
util.inherits(Fronteer, Developer);
/**
 * 方法描述
 *
 * @private
 * @return {string} 返回值描述
 */
Fronteer.prototype.getLevel = function () {
};

示例：

/**
 * 描述
 *
 * @class
 */
function Developer() {
    // constructor body
}

示例：

/**
 * 描述
 *
 * @class
 * @extends Developer
 */
function Fronteer() {
    Developer.call(this);
    // constructor body
}
util.inherits(Fronteer, Developer);

解釋：
當(dāng) return 關(guān)鍵字僅作退出函數(shù)/方法使用時(shí)，無須對(duì)返回值作注釋標(biāo)識(shí)。

示例：

/**
 * 函數(shù)描述
 *
 * @param {string} p1 參數(shù)1的說明
 * @param {string} p2 參數(shù)2的說明，比較長
 *     那就換行了.
 * @param {number=} p3 參數(shù)3的說明（可選）
 * @return {Object} 返回值描述
 */
function foo(p1, p2, p3) {
    var p3 = p3 || 10;
    return {
        p1: p1,
        p2: p2,
        p3: p3
    };
}

示例：

/**
 * 函數(shù)描述
 *
 * @param {Object} option 參數(shù)描述
 * @param {string} option.url option項(xiàng)描述
 * @param {string=} option.method option項(xiàng)描述，可選參數(shù)
 */
function foo(option) {
    // TODO
}

示例：

/**
 * 值變更時(shí)觸發(fā)
 *
 * @event Select#change
 * @param {Object} e e描述
 * @param {string} e.before before描述
 * @param {string} e.after after描述
 */
this.fire(
    "change",
    {
        before: "foo",
        after: "bar"
    }
);

示例：

/**
 * 點(diǎn)擊處理
 *
 * @fires Select#change
 * @private
 */
Select.prototype.clickHandler = function () {
    /**
     * 值變更時(shí)觸發(fā)
     *
     * @event Select#change
     * @param {Object} e e描述
     * @param {string} e.before before描述
     * @param {string} e.after after描述
     */
    this.fire(
        "change",
        {
            before: "foo",
            after: "bar"
        }
    );
};

示例：

/**
 * 常量說明
 *
 * @const
 * @type {string}
 */
var REQUEST_URL = "myurl.do";

解釋：

TODO: 有功能待實(shí)現(xiàn)。此時(shí)需要對(duì)將要實(shí)現(xiàn)的功能進(jìn)行簡單說明。

FIXME: 該處代碼運(yùn)行沒問題，但可能由于時(shí)間趕或者其他原因，需要修正。此時(shí)需要對(duì)如何修正進(jìn)行簡單說明。

HACK: 為修正某些問題而寫的不太好或者使用了某些詭異手段的代碼。此時(shí)需要對(duì)思路或詭異手段進(jìn)行描述。

XXX: 該處存在陷阱。此時(shí)需要對(duì)陷阱進(jìn)行描述。

解釋：
不通過 var 定義變量將導(dǎo)致變量污染全局環(huán)境。
示例：

// good
var name = "MyName";

------------

// bad
name = "MyName";

原則上不建議使用全局變量，對(duì)于已有的全局變量或第三方框架引入的全局變量，需要根據(jù)檢查工具的語法標(biāo)識(shí)。
示例：

/* globals jQuery */
var element = jQuery("#element-id");

[建議] 最后再聲明未賦值的變量。當(dāng)你需要引用前面的變量賦值時(shí)這將變的很有用。
示例：

// good
var items = getItems();
var goSportsTeam = true;
var dragonball;
var length;
var i;
------------

// bad
var i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;
// bad
var i;
var items = getItems();
var dragonball;
var goSportsTeam = true;
var len;

解釋：
變量聲明與使用的距離越遠(yuǎn)，出現(xiàn)的跨度越大，代碼的閱讀與維護(hù)成本越高。雖然JavaScript的變量是函數(shù)作用域，還是應(yīng)該根據(jù)編程中的意圖，縮小變量出現(xiàn)的距離空間。
示例：

// good
function kv2List(source) {
    var list = [];
    for (var key in source) {
        if (source.hasOwnProperty(key)) {
            var item = {
                k: key,
                v: source[key]
            };
            list.push(item);
        }
    }
    return list;
}
------------

// bad
function kv2List(source) {
    var list = [];
    var key;
    var item;
    for (key in source) {
        if (source.hasOwnProperty(key)) {
            item = {
                k: key,
                v: source[key]
            };
            list.push(item);
        }
    }
    return list;
}

解釋：
使用 === 可以避免等于判斷中隱式的類型轉(zhuǎn)換。
示例：

// good
if (age === 30) {
    // ......
}

------------

// bad
if (age == 30) {
    // ......
}

示例：

// 字符串為空
// good
if (!name) {
    // ......
}

------------

// bad
if (name === "") {
    // ......
}

// 字符串非空
// good
if (name) {
    // ......
}
------------

// bad
if (name !== "") {
    // ......
}

// 數(shù)組非空
// good
if (collection.length) {
    // ......
}

------------


// bad
if (collection.length > 0) {
    // ......
}

// 布爾不成立
// good
if (!notTrue) {
    // ......
}
------------

// bad
if (notTrue === false) {
    // ......
}

// null 或 undefined
// good
if (noValue == null) {
  // ......
}

------------

// bad
if (noValue === null || typeof noValue === "undefined") {
  // ......
}

解釋：
按執(zhí)行頻率排列分支的順序好處是：

閱讀的人容易找到最常見的情況，增加可讀性。

提高執(zhí)行效率。

示例：

// good
switch (typeof variable) {
    case "object":
        // ......
        break;
    case "number":
    case "boolean":
    case "string":
        // ......
        break;
}

------------


// bad
var type = typeof variable;
if (type === "object") {
    // ......
}
else if (type === "number" || type === "boolean" || type === "string") {
    // ......
}

解釋：
循環(huán)體中的函數(shù)表達(dá)式，運(yùn)行過程中會(huì)生成循環(huán)次數(shù)個(gè)函數(shù)對(duì)象。
示例：

// good
function clicker() {
    // ......
}
for (var i = 0, len = elements.length; i < len; i++) {
    var element = elements[i];
    addListener(element, "click", clicker);
}
// bad
for (var i = 0, len = elements.length; i < len; i++) {
    var element = elements[i];
    addListener(element, "click", function () {});
}

示例：

// good
var width = wrap.offsetWidth + "px";
for (var i = 0, len = elements.length; i < len; i++) {
    var element = elements[i];
    element.style.width = width;
    // ......
}
// bad
for (var i = 0, len = elements.length; i < len; i++) {
    var element = elements[i];
    element.style.width = wrap.offsetWidth + "px";
    // ......
}

解釋：
雖然現(xiàn)代瀏覽器都對(duì)數(shù)組長度進(jìn)行了緩存，但對(duì)于一些宿主對(duì)象和老舊瀏覽器的數(shù)組對(duì)象，在每次 length 訪問時(shí)會(huì)動(dòng)態(tài)計(jì)算元素個(gè)數(shù)，此時(shí)緩存 length 能有效提高程序性能。
示例：

for (var i = 0, len = elements.length; i < len; i++) {
    var element = elements[i];
    // ......
}

解釋：
逆序遍歷可以節(jié)省變量，代碼比較優(yōu)化。
示例：

var len = elements.length;
while (len--) {
    var element = elements[len];
    // ......
}

示例：

// string
typeof variable === "string"
// number
typeof variable === "number"
// boolean
typeof variable === "boolean"
// Function
typeof variable === "function"
// Object
typeof variable === "object"
// RegExp
variable instanceof RegExp
// Array
variable instanceof Array
// null
variable === null
// null or undefined
variable == null
// undefined
typeof variable === "undefined"

示例：

// good
num + "";
// bad
new String(num);
num.toString();
String(num);

示例：

// good
+str;
// bad
Number(str);

示例：

var width = "200px";
parseInt(width, 10);

[強(qiáng)制] 使用 parseInt 時(shí)，必須指定進(jìn)制。

示例：

// good
parseInt(str, 10);
// bad
parseInt(str);

示例：

var num = 3.14;
!!num;

示例：

// good
var num = 3.14;
Math.ceil(num);
// bad
var num = 3.14;
parseInt(num, 10);

解釋：

輸入單引號(hào)不需要按住 shift，方便輸入。

實(shí)際使用中，字符串經(jīng)常用來拼接 HTML。為方便 HTML 中包含雙引號(hào)而不需要轉(zhuǎn)義寫法。

示例：

var str = "我是一個(gè)字符串";
var html = "
拼接HTML可以省去雙引號(hào)轉(zhuǎn)義
";

[建議] 使用 數(shù)組 或 + 拼接字符串。
解釋：

使用 + 拼接字符串，如果拼接的全部是 StringLiteral，壓縮工具可以對(duì)其進(jìn)行自動(dòng)合并的優(yōu)化。所以，靜態(tài)字符串建議使用 + 拼接。

在現(xiàn)代瀏覽器下，使用 + 拼接字符串，性能較數(shù)組的方式要高。

如需要兼顧老舊瀏覽器，應(yīng)盡量使用數(shù)組拼接字符串。

示例：

// 使用數(shù)組拼接字符串
var str = [
    // 推薦換行開始并縮進(jìn)開始第一個(gè)字符串, 對(duì)齊代碼, 方便閱讀.
    "
",
        "
第一項(xiàng)
",
        "
第二項(xiàng)
",
    "
"
].join("");
// 使用 `+` 拼接字符串
var str2 = "" // 建議第一個(gè)為空字符串, 第二個(gè)換行開始并縮進(jìn)開始, 對(duì)齊代碼, 方便閱讀
    + "
",
    +    "
第一項(xiàng)
",
    +    "
第二項(xiàng)
",
    + "
";

示例：

var items;
var messages;
var length;
var i;
messages = [{
  state: "success",
  message: "This one worked."
}, {
  state: "success",
  message: "This one worked as well."
}, {
  state: "error",
  message: "This one did not work."
}];
length = messages.length;
// good
function inbox(messages) {
  items = [];
  for (i = 0; i < length; i++) {
    // use direct assignment in this case because we"re micro-optimizing.
    items[i] = "
" + messages[i].message + "
";
  }
  return "
" + items.join("") + "
";
}
// bad
function inbox(messages) {
  items = "
";
  for (i = 0; i < length; i++) {
    items += "
" + messages[i].message + "
";
  }
  return items + "
";
}

解釋：
在 JavaScript 中拼接，并且最終將輸出到頁面中的字符串，需要進(jìn)行合理轉(zhuǎn)義，以防止安全漏洞。下面的示例代碼為場景說明，不能直接運(yùn)行。
示例：

// HTML 轉(zhuǎn)義
var str = "
" + htmlEncode(content) + "
";
// HTML 轉(zhuǎn)義
var str = "";
// URL 轉(zhuǎn)義
var str = "link";
// JavaScript字符串 轉(zhuǎn)義 + HTML 轉(zhuǎn)義
var str = "提交";

解釋：
使用模板引擎有如下好處：

在開發(fā)過程中專注于數(shù)據(jù)，將視圖生成的過程由另外一個(gè)層級(jí)維護(hù)，使程序邏輯結(jié)構(gòu)更清晰。

優(yōu)秀的模板引擎，通過模板編譯技術(shù)和高質(zhì)量的編譯產(chǎn)物，能獲得比手工拼接字符串更高的性能。

模板引擎能方便的對(duì)動(dòng)態(tài)數(shù)據(jù)進(jìn)行相應(yīng)的轉(zhuǎn)義，部分模板引擎默認(rèn)進(jìn)行HTML轉(zhuǎn)義，安全性更好。

介紹幾款模板插件：

artTemplate: 體積較小，在所有環(huán)境下性能高，語法靈活。

dot.js: 體積小，在現(xiàn)代瀏覽器下性能高，語法靈活。

etpl: 體積較小，在所有環(huán)境下性能高，模板復(fù)用性高，語法靈活。

handlebars: 體積大，在所有環(huán)境下性能高，擴(kuò)展性高。

hogon: 體積小，在現(xiàn)代瀏覽器下性能高。

nunjucks: 體積較大，性能一般，模板復(fù)用性高。

示例：

// 以下行為絕對(duì)禁止
String.prototype.trim = function () {
};

// good
var obj = {};
// bad
var obj = new Object();

解釋：
如果屬性不符合 Identifier 和 NumberLiteral 的形式，就需要以 StringLiteral 的形式提供。
示例：

// good
var info = {
    "name": "someone",
    "age": 28,
    "more-info": "..."
};
// bad
var info = {
    name: "someone",
    age: 28,
    "more-info": "..."
};

解釋：
屬性名符合 Identifier 的要求，就可以通過 . 來訪問，否則就只能通過 [expr] 方式訪問。
通常在 JavaScript 中聲明的對(duì)象，屬性命名是使用 Camel 命名法，用 . 來訪問更清晰簡潔。部分特殊的屬性（比如來自后端的 JSON ），可能采用不尋常的命名方式，可以通過 [expr] 方式訪問。
示例：

info.age;
info["more-info"];

示例：

var newInfo = {};
for (var key in info) {
    if (info.hasOwnProperty(key)) {
        newInfo[key] = info[key];
    }
}

示例：

// good
var arr = [];
// bad
var arr = new Array();

解釋：
數(shù)組對(duì)象可能存在數(shù)字以外的屬性, 這種情況下 for in 不會(huì)得到正確結(jié)果。
示例：

var arr = ["a", "b", "c"];
// 這里僅作演示, 實(shí)際中應(yīng)使用 Object 類型
arr.other = "other things";
// 正確的遍歷方式
for (var i = 0, len = arr.length; i < len; i++) {
    console.log(i);
}
// 錯(cuò)誤的遍歷方式
for (var i in arr) {
    console.log(i);
}

解釋：
將過多的邏輯單元混在一個(gè)大函數(shù)中，易導(dǎo)致難以維護(hù)。一個(gè)清晰易懂的函數(shù)應(yīng)該完成單一的邏輯單元。復(fù)雜的操作應(yīng)進(jìn)一步抽取，通過函數(shù)的調(diào)用來體現(xiàn)流程。
特定算法等不可分割的邏輯允許例外。
示例：

function syncViewStateOnUserAction() {
    if (x.checked) {
        y.checked = true;
        z.value = "";
    }
    else {
        y.checked = false;
    }
    if (a.value) {
        warning.innerText = "";
        submitButton.disabled = false;
    }
    else {
        warning.innerText = "Please enter it";
        submitButton.disabled = true;
    }
}
// 直接閱讀該函數(shù)會(huì)難以明確其主線邏輯，因此下方是一種更合理的表達(dá)方式：
function syncViewStateOnUserAction() {
    syncXStateToView();
    checkAAvailability();
}
function syncXStateToView() {
    y.checked = x.checked;
    if (x.checked) {
        z.value = "";
    }
}
function checkAAvailability() {
    if (a.value) {
        clearWarnignForA();
    }
    else {
        displayWarningForAMissing();
    }
}

解釋：
除去不定長參數(shù)以外，函數(shù)具備不同邏輯意義的參數(shù)建議控制在 6 個(gè)以內(nèi)，過多參數(shù)會(huì)導(dǎo)致維護(hù)難度增大。
某些情況下，如使用 AMD Loader 的 require 加載多個(gè)模塊時(shí)，其 callback 可能會(huì)存在較多參數(shù)，因此對(duì)函數(shù)參數(shù)的個(gè)數(shù)不做強(qiáng)制限制。

解釋：
有些函數(shù)的參數(shù)并不是作為函數(shù)邏輯的輸入，而是對(duì)函數(shù)邏輯的某些分支條件判斷之用，此類參數(shù)建議通過一個(gè) options 參數(shù)傳遞。
如下函數(shù)：

/**
 * 移除某個(gè)元素
 *
 * @param {Node} element 需要移除的元素
 * @param {boolean} removeEventListeners 是否同時(shí)將所有注冊(cè)在元素上的事件移除
 */
function removeElement(element, removeEventListeners) {
    element.parent.removeChild(element);
    if (removeEventListeners) {
        element.clearEventListeners();
    }
}

可以轉(zhuǎn)換為下面的簽名：

/**
 * 移除某個(gè)元素
 *
 * @param {Node} element 需要移除的元素
 * @param {Object} options 相關(guān)的邏輯配置
 * @param {boolean} options.removeEventListeners 是否同時(shí)將所有注冊(cè)在元素上的事件移除
 */
function removeElement(element, options) {
    element.parent.removeChild(element);
    if (options.removeEventListeners) {
        element.clearEventListeners();
    }
}

這種模式有幾個(gè)顯著的優(yōu)勢：

boolean 型的配置項(xiàng)具備名稱，從調(diào)用的代碼上更易理解其表達(dá)的邏輯意義。

當(dāng)配置項(xiàng)有增長時(shí)，無需無休止地增加參數(shù)個(gè)數(shù)，不會(huì)出現(xiàn) removeElement(element, true, false, false, 3) 這樣難以理解的調(diào)用代碼。

當(dāng)部分配置參數(shù)可選時(shí)，多個(gè)參數(shù)的形式非常難處理重載邏輯，而使用一個(gè) options 對(duì)象只需判斷屬性是否存在，實(shí)現(xiàn)得以簡化。

[建議] 不要把參數(shù)命名為 arguments。這將取代函數(shù)作用域內(nèi)的 arguments 對(duì)象。

示例：

// good
function yup(name, options, args) {
  // ...stuff...
}
// bad
function nope(name, options, arguments) {
  // ...stuff...
}

/**
 * 構(gòu)建類之間的繼承關(guān)系
 *
 * @param {Function} subClass 子類函數(shù)
 * @param {Function} superClass 父類函數(shù)
 */
function inherits(subClass, superClass) {
    var F = new Function();
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;
}

function Animal(name) {
    this.name = name;
}
// 直接prototype等于對(duì)象時(shí)，需要修正constructor
Animal.prototype = {
    constructor: Animal,
    jump: function () {
        alert("animal " + this.name + " jump");
    }
};
// 這種方式擴(kuò)展prototype則無需理會(huì)constructor
Animal.prototype.jump = function () {
    alert("animal " + this.name + " jump");
};

function TextNode(value, engine) {
    this.value = value;
    this.engine = engine;
}
TextNode.prototype.clone = function () {
    return this;
};

try {
    delete o.x;
}
catch (deleteError) {
    o.x = null;
}

function Tree(datasource) {
    this.datasource = datasource;
}
Tree.prototype.selectNode = function (id) {
    // 從datasource中找出節(jié)點(diǎn)對(duì)象
    var node = this.findNode(id);
    if (node) {
        node.selected = true;
        this.flushView();
    }
};

function Tree(datasource) {
    this.datasource = datasource;
    this.selectedNodeIndex = {}; 
}
Tree.prototype.selectNode = function (id) {
    // 從datasource中找出節(jié)點(diǎn)對(duì)象
    var node = this.findNode(id);
    if (node) {
        this.selectedNodeIndex[id] = true;
        this.flushView();
    }
};