你為項目所擇風格都應為最高準則。作為一個描述放置於你的項目中，並鏈接到這個文檔作為代碼風格一致性、可讀性和可維護性的保證。
一、空白
1.永遠都不要混用空格和Tab。
2.開始一個項目，在寫代碼之前，選擇軟縮進（空格）或者Tab（作為縮進方式），並將其作為最高準則。
a).為了可讀, 我總是推薦在你的編輯中設計2個字母寬度的縮進― 這等同於兩個空格或者兩個空格替代一個Tab。
3.如果你的編輯器支持，請總是打開“顯示不可見字符” 這個設置。好處是：
a).保證一致性
b).去掉行末的空格
c).去掉空行的空格
d).提交和對比更具可讀性
二、美化語法
A. 小括號, 花括號, 換行
複製代碼代碼如下:
// if/else/for/while/try 通常都有小括號、花括號和多行
// 這有助於可讀
// 2.A.1.1
// 難辨語法（cramped syntax）的例子
if(condition) doSomething();
while(condition) iterating++;
for(var i=0;i<100;i++) someIterativeFn();
// 2.A.1.1
// 使用空格來提升可讀性
if ( condition ) {
// 語句
}
while ( condition ) {
// 語句
}
for ( var i = 0; i < 100; i++ ) {
// 語句
}
// 更好的做法:
var i,
length = 100;
for ( i = 0; i < length; i++ ) {
// 語句
}
// 或者...
var i = 0,
length = 100;
for ( ; i < length; i++ ) {
// 語句
}
var prop;
for ( prop in object ) {
// 語句
}
if ( true ) {
// 語句
} else {
// 語句
}
B. 賦值, 聲明, 函數( 命名函數, 函數表達式, 構建函數)
複製代碼代碼如下:
// 2.B.1.1
// 變量
var foo = "bar",
num = 1,
undef;
// 字面量標識:
var array = [],
object = {};
// 2.B.1.2
// 在一個作用域（函數）內只使用一個`var` 有助於提升可讀性
// 並且讓你的聲明列表變得有條不紊(還幫你省了幾次鍵盤敲擊)
// 不好
var foo = "";
var bar = "";
var qux;
// 好
var foo = "",
bar = "",
quux;
// 或者..
var // 對這些變量的註釋
foo = "",
bar = "",
quux;
// 2.B.1.3
// `var` 語句必須總是在各自作用域（函數）頂部
// 同樣適應於來自ECMAScript 6 的常量
// 不好
function foo() {
// 在變量前有語句
var bar = "",
qux;
}
// 好
function foo() {
var bar = "",
qux;
// 所有語句都在變量之後
}
// 2.B.2.1
// 命名函數聲明
function foo( arg1, argN ) {
}
// 使用方法
foo( arg1, argN );
// 2.B.2.2
// 命名函數聲明
function square( number ) {
return number * number;
}
// 使用方法
square( 10 );
// 非常不自然的連帶傳參（continuation passing）風格
function square( number, callback ) {
callback( number * number );
}
square( 10, function( square ) {
// 回調內容
});
// 2.B.2.3
// 函數表達式
var square = function( number ) {
// 返回有價值的、相關的內容
return number * number;
};
// 帶標識符的函數表達式
// 這種首選形式有附加的功能讓其可以調用自身
// 並且在堆棧中有標識符
var factorial = function factorial( number ) {
if ( number < 2 ) {
return 1;
}
return number * factorial( number-1 );
};
// 2.B.2.4
// 構造函數聲明
function FooBar( options ) {
this.options = options;
}
// 使用方法
var fooBar = new FooBar({ a: "alpha" });
fooBar.options;
// { a: "alpha" }
C. 異常, 細節
複製代碼代碼如下:
// 2.C.1.1
// 帶回調的函數
foo(function() {
// 注意：在第一函數調用的小括號和`function` 處並沒有空格
});
// 函數接受`array` 作為參數，沒有空格
foo([ "alpha", "beta" ]);
// 2.C.1.2
// 函數接受`object` 作為參數，沒有空格
foo({
a: "alpha",
b: "beta"
});
// 函數接受`string` 字面量作為參數，沒有空格
foo("bar");
// 分組用的小括號內部，沒有空格
if ( !("foo" in obj) ) {
}
D. 一致性（統一）總是笑到最後的（Consistency Always Wins）
在2.A-2.C 節，留白作為一個推薦方式被提出，基於單純的、更高的目的：統一。值得注意的是格式化偏好，像“內部留白”必須是可選的，但在整個項目的源碼中必須只存在著一種。
複製代碼代碼如下:
// 2.D.1.1
if (condition) {
// 語句
}
while (condition) {
// 語句
}
for (var i = 0; i < 100; i++) {
// 語句
}
if (true) {
// 語句
} else {
// 語句
}
E. 引號
無論你選擇單引號還是雙引號都無所謂，在JavaScript 中它們在解析上沒有區別。而絕對需要強制的是一致性。 永遠不要在同一個項目中混用兩種引號，選擇一種，並保持一致。
F. 行末和空行
留白會破壞區別並使用變更不可讀。考慮包括一個預提交的hook 自動刪除行末和空行中的空格。
三、類型檢測(來源於jQuery Core Style Guidelines)
A. 直接類型（實際類型，Actual Types）
String:
複製代碼代碼如下:
typeof variable === "string"
Number:
複製代碼代碼如下:
typeof variable === "number"
Boolean:
複製代碼代碼如下:
typeof variable === "boolean"
Object:
複製代碼代碼如下:
typeof variable === "object"
Array:
複製代碼代碼如下:
Array.isArray( arrayLikeObject )
(如果可能的話)
Node:
複製代碼代碼如下:
elem.nodeType === 1
null:
複製代碼代碼如下:
variable === null
null or undefined:
複製代碼代碼如下:
variable == null
undefined:
全局變量:
複製代碼代碼如下:
typeof variable === "undefined"
局部變量:
複製代碼代碼如下:
variable === undefined
屬性:
複製代碼代碼如下:
object.prop === undefined
object.hasOwnProperty( prop )
"prop" in object
B. 轉換類型（強制類型，Coerced Types）
考慮下面這個的含義...
給定的HTML:
複製代碼代碼如下:
<input type="text" id="foo-input" value="1">
// 3.B.1.1
// `foo` 已經被賦予值`0`，類型為`number`
var foo = 0;
// typeof foo;
// "number"
...
// 在後續的代碼中，你需要更新`foo`，賦予在input 元素中得到的新值
foo = document.getElementById("foo-input").value;
// 如果你現在測試`typeof foo`, 結果將是`string`
// 這意味著你在if 語句檢測`foo` 有類似於此的邏輯:
if ( foo === 1 ) {
importantTask();
}
// `importantTask()` 將永遠不會被執行，即使`foo` 有一個值"1"
// 3.B.1.2
// 你可以巧妙地使用+ / - 一元運算符強制轉換類型以解決問題:
foo = +document.getElementById("foo-input").value;
// ^ + 一元運算符將它右邊的運算對象轉換為`number`
// typeof foo;
// "number"
if ( foo === 1 ) {
importantTask();
}
// `importantTask()` 將被調用
對於強制類型轉換這裡有幾個例子:
複製代碼代碼如下:
// 3.B.2.1
var number = 1,
string = "1",
bool = false;
number;
// 1
number + "";
// "1"
string;
// "1"
+string;
// 1
+string++;
// 1
string;
// 2
bool;
// false
+bool;
// 0
bool + "";
// "false"
// 3.B.2.2
var number = 1,
string = "1",
bool = true;
string === number;
// false
string === number + "";
// true
+string === number;
// true
bool === number;
// false
+bool === number;
// true
bool === string;
// false
bool === !!string;
// true
// 3.B.2.3
var array = [ "a", "b", "c" ];
!!~array.indexOf("a");
// true
!!~array.indexOf("b");
// true
!!~array.indexOf("c");
// true
!!~array.indexOf("d");
// false
// 值得注意的是上述都是"不必要的聰明"
// 採用明確的方案來比較返回的值
// 如indexOf：
if ( array.indexOf( "a" ) >= 0 ) {
// ...
}
// 3.B.2.3
var num = 2.5;
parseInt( num, 10 );
// 等價於...
~~num;
num >> 0;
num >>> 0;
// 結果都是2
// 時刻牢記心底, 負值將被區別對待...
var neg = -2.5;
parseInt( neg, 10 );
// 等價於...
~~neg;
neg >> 0;
// 結果都是-2
// 但是...
neg >>> 0;
// 結果即是4294967294
四、對比運算
複製代碼代碼如下:
// 4.1.1
// 當只是判斷一個array 是否有長度，相對於使用這個:
if ( array.length > 0 ) ...
// ...判斷真偽, 請使用這種:
if ( array.length ) ...
// 4.1.2
// 當只是判斷一個array 是否為空，相對於使用這個:
if ( array.length === 0 ) ...
// ...判斷真偽, 請使用這種:
if ( !array.length ) ...
// 4.1.3
// 當只是判斷一個string 是否為空，相對於使用這個:
if ( string !== "" ) ...
// ...判斷真偽, 請使用這種:
if ( string ) ...
// 4.1.4
// 當只是判斷一個string 是為空，相對於使用這個:
if ( string === "" ) ...
// ...判斷真偽, 請使用這種:
if ( !string ) ...
// 4.1.5
// 當只是判斷一個引用是為真，相對於使用這個:
if ( foo === true ) ...
// ...判斷只需像你所想，享受內置功能的好處:
if ( foo ) ...
// 4.1.6
// 當只是判斷一個引用是為假，相對於使用這個:
if ( foo === false ) ...
// ...使用嘆號將其轉換為真
if ( !foo ) ...
// ...需要注意的是：這個將會匹配0, "", null, undefined, NaN
// 如果你_必須_ 是布爾類型的false，請這樣用：
if ( foo === false ) ...
// 4.1.7
// 如果想計算一個引用可能是null 或者undefined，但並不是false, "" 或者0,
// 相對於使用這個：
if ( foo === null || foo === undefined ) ...
// ...享受== 類型強制轉換的好處，像這樣:
if ( foo == null ) ...
// 謹記，使用== 將會令`null` 匹配`null` 和`undefined`
// 但不是`false`，"" 或者0
null == undefined
總是判斷最好、最精確的值，上述是指南而非教條。
複製代碼代碼如下:
// 4.2.1
// 類型轉換和對比運算說明
// 首次`===`，`==` 次之(除非需要鬆散類型的對比)
// `===` 總不做類型轉換，這意味著:
"1" === 1;
// false
// `==` 會轉換類型，這意味著:
"1" == 1;
// true
// 4.2.2
// 布爾, 真& 偽
// 布爾:
true, false
// 真:
"foo", 1
// 偽:
"", 0, null, undefined, NaN, void 0
五、實用風格
複製代碼代碼如下:
// 5.1.1
// 一個實用的模塊
(function( global ) {
var Module = (function() {
var data = "secret";
return {
// 這是一個布爾值
bool: true,
// 一個字符串
string: "a string",
// 一個數組
array: [ 1, 2, 3, 4 ],
// 一個對象
object: {
lang: "en-Us"
},
getData: function() {
// 得到`data` 的值
return data;
},
setData: function( value ) {
// 返回賦值過的`data` 的值
return ( data = value );
}
};
})();
// 其他一些將會出現在這裡
// 把你的模塊變成全局對象
global.Module = Module;
})( this );
// 5.2.1
// 一個實用的構建函數
(function( global ) {
function Ctor( foo ) {
this.foo = foo;
return this;
}
Ctor.prototype.getFoo = function() {
return this.foo;
};
Ctor.prototype.setFoo = function( val ) {
return ( this.foo = val );
};
// 不使用`new` 來調用構建函數，你可能會這樣做：
var ctor = function( foo ) {
return new Ctor( foo );
};
// 把我們的構建函數變成全局對象
global.ctor = ctor;
})( this );
六、命名
A. 你並不是一個人肉編譯器/壓縮器，所以嘗試去變身為其一。
下面的代碼是一個極糟命名的典範:
複製代碼代碼如下:
// 6.A.1.1
// 糟糕命名的示例代碼
function q(s) {
return document.querySelectorAll(s);
}
var i,a=[],els=q("#foo");
for(i=0;i<els.length;i++){a.push(els[i]);}
毫無疑問，你寫過這樣的代碼―― 希望從今天它不再出現。
這裡有一份相同邏輯的代碼，但擁有更健壯、貼切的命名（和一個可讀的結構）：
複製代碼代碼如下:
// 6.A.2.1
// 改善過命名的示例代碼
function query( selector ) {
return document.querySelectorAll( selector );
}
var idx = 0,
elements = [],
matches = query("#foo"),
length = matches.length;
for ( ; idx < length; idx++ ) {
elements.push( matches[ idx ] );
}
一些額外的命名提示：
複製代碼代碼如下:
// 6.A.3.1
// 命名字符串
`dog` 是一個string
// 6.A.3.2
// 命名arrays
`['dogs']` 是一個包含`dog 字符串的array
// 6.A.3.3
// 命名函數、對象、實例，等
camlCase; function 和var 聲明
// 6.A.3.4
// 命名構建器、原型，等
PascalCase; 構建函數
// 6.A.3.5
// 命名正則表達式
rDesc = //;
// 6.A.3.6
// 來自Google Closure Library Style Guide
functionNamesLikeThis;
variableNamesLikeThis;
ConstructorNamesLikeThis;
EnumNamesLikeThis;
methodNamesLikeThis;
SYMBOLIC_CONSTANTS_LIKE_THIS;
B. 面對this
除使用眾所周知的call 和apply 外，總是優先選擇.bind( this ) 或者一個功能上等價於它的。創建BoundFunction 聲明供後續調用，當沒有更好的選擇時才使用別名。
複製代碼代碼如下:
// 6.B.1
function Device( opts ) {
this.value = null;
// 新建一個異步的stream，這個將被持續調用
stream.read( opts.path, function( data ) {
// 使用stream 返回data 最新的值，更新實例的值
this.value = data;
}.bind(this) );
// 控制事件觸發的頻率
setInterval(function() {
// 發出一個被控制的事件
this.emit("event");
}.bind(this), opts.freq || 100 );
}
// 假設我們已繼承了事件發送器（EventEmitter） ;)
當不能運行時，等價於.bind 的功能在多數現代JavaScript 庫中都有提供。
複製代碼代碼如下:
// 6.B.2
// 示例：lodash/underscore，_.bind()
function Device( opts ) {
this.value = null;
stream.read( opts.path, _.bind(function( data ) {
this.value = data;
}, this) );
setInterval(_.bind(function() {
this.emit("event");
}, this), opts.freq || 100 );
}
// 示例：jQuery.proxy
function Device( opts ) {
this.value = null;
stream.read( opts.path, jQuery.proxy(function( data ) {
this.value = data;
}, this) );
setInterval( jQuery.proxy(function() {
this.emit("event");
}, this), opts.freq || 100 );
}
// 示例：dojo.hitch
function Device( opts ) {
this.value = null;
stream.read( opts.path, dojo.hitch( this, function( data ) {
this.value = data;
}) );
setInterval( dojo.hitch( this, function() {
this.emit("event");
}), opts.freq || 100 );
}
提供一個候選，創建一個this 的別名，以self 作為標識符。這很有可能出bug，應盡可能避免。
複製代碼代碼如下:
// 6.B.3
function Device( opts ) {
var self = this;
this.value = null;
stream.read( opts.path, function( data ) {
self.value = data;
});
setInterval(function() {
self.emit("event");
}, opts.freq || 100 );
}
C. 使用thisArg
好幾個ES 5.1 中的原型的方法都內置了一個特殊的thisArg 標記，盡可能多地使用它
複製代碼代碼如下:
// 6.C.1
var obj;
obj = { f: "foo", b: "bar", q: "qux" };
Object.keys( obj ).forEach(function( key ) {
// |this| 現在是`obj`
console.log( this[ key ] );
}, obj ); // <-- 最後的參數是`thisArg`
// 打印出來...
// "foo"
// "bar"
// "qux"
thisArg 在Array.prototype.every、 Array.prototype.forEach、 Array.prototype.some、 Array.prototype.map、 Array.prototype.filter 中都可以使用。
七、Misc
這個部分將要說明的想法和理念都並非教條。相反更鼓勵對現存實踐保持好奇，以嘗試提供完成一般JavaScript 編程任務的更好方案。
A. 避免使用switch，現代方法跟踪（method tracing）將會把帶有switch 表達式的函數列為黑名單。
似乎在最新版本的Firefox 和Chrome 都對switch 語句有重大改進。 http://jsperf.com/switch-vs-object-literal-vs-module
值得注意的是，改進可以這裡看到: https://github.com/rwldrn/idiomatic.js/issues/13
複製代碼代碼如下:
// 7.A.1.1
// switch 語句示例
switch( foo ) {
case "alpha":
alpha();
break;
case "beta":
beta();
break;
default:
// 默認分支
break;
}
// 7.A.1.2
// 一個可支持組合、重用的方法是使用一個對象來存儲“cases”，
// 使用一個function 來做委派：
var cases, delegator;
// 返回值僅作說明用
cases = {
alpha: function() {
// 語句
// 一個返回值
return [ "Alpha", arguments.length ];
},
beta: function() {
// 語句
// 一個返回值
return [ "Beta", arguments.length ];
},
_default: function() {
// 語句
// 一個返回值
return [ "Default", arguments.length ];
}
};
delegator = function() {
var args, key, delegate;
// 把`argument` 轉換成數組
args = [].slice.call( arguments );
// 從`argument` 中抽出最前一個值
key = args.shift();
// 調用默認分支
delegate = cases._default;
// 從對像中對方法進行委派操作
if ( cases.hasOwnProperty( key ) ) {
delegate = cases[ key ];
}
// arg 的作用域可以設置成特定值，
// 這種情況下，|null| 就可以了
return delegate.apply( null, args );
};
// 7.A.1.3
// 使用7.A.1.2 中的API:
delegator( "alpha", 1, 2, 3, 4, 5 );
// [ "Alpha", 5 ]
// 當然`case` key 的值可以輕鬆地換成任意值
var caseKey, someUserInput;
// 有沒有可能是某種形式的輸入?
someUserInput = 9;
if ( someUserInput > 10 ) {
caseKey = "alpha";
} else {
caseKey = "beta";
}
// 或者...
caseKey = someUserInput > 10 ? "alpha" : "beta";
// 然後...
delegator( caseKey, someUserInput );
// [ "Beta", 1 ]
// 當然還可以這樣搞...
delegator();
// [ "Default", 0 ]
B. 提前返回值提升代碼的可讀性並且沒有太多性能上的差別
複製代碼代碼如下:
// 7.B.1.1
// 不好:
function returnLate( foo ) {
var ret;
if ( foo ) {
ret = "foo";
} else {
ret = "quux";
}
return ret;
}
// 好:
function returnEarly( foo ) {
if ( foo ) {
return "foo";
}
return "quux";
}
八、原生& 宿主對象（注：其實一直覺得Host Objects 真不應該翻譯過來，這是就按一般書的寫法翻出來吧）
最基本的原則是:
不要幹任何蠢事，事情總會變好的。
為了加強這個觀念，請觀看這個演示:
“一切都被允許: 原生擴展” by Andrew Dupont (JSConf2011, Portland, Oregon)
http://blip.tv/jsconf/jsconf2011-andrew-dupont-everything-is-permitted-extending-built-ins-5211542
九、註釋
單行註釋放於代碼上方為首選
多行也可以
行末註釋應被避免!
JSDoc 的方式也不錯，但需要比較多的時間
十、單用一門語言
無論是什麼語言程序維護者（或團隊）規定使用何種語言，程序都應只用同一種語言書寫。
附錄
前置逗號（Comma First）
所有使用這個文檔作為基本風格指南的項目都不允許前置逗號的代碼格式，除非明確指定或者作者要求。