你為項(xiàng)目所擇風(fēng)格都應(yīng)為最高準(zhǔn)則。作為一個(gè)描述放置于你的項(xiàng)目中，并鏈接到這個(gè)文檔作為代碼風(fēng)格一致性、可讀性和可維護(hù)性的保證。

一、空白

1.永遠(yuǎn)都不要混用空格和Tab。
2.開始一個(gè)項(xiàng)目，在寫代碼之前，選擇軟縮進(jìn)（空格）或者 Tab（作為縮進(jìn)方式），并將其作為最高準(zhǔn)則。
a).為了可讀, 我總是推薦在你的編輯中設(shè)計(jì)2個(gè)字母寬度的縮進(jìn) — 這等同于兩個(gè)空格或者兩個(gè)空格替代一個(gè) Tab。
3.如果你的編輯器支持，請(qǐng)總是打開 “顯示不可見字符” 這個(gè)設(shè)置。好處是：
a).保證一致性
b).去掉行末的空格
c).去掉空行的空格
d).提交和對(duì)比更具可讀性

二、美化語法

A. 小括號(hào), 花括號(hào), 換行
復(fù)制代碼 代碼如下:
// if/else/for/while/try 通常都有小括號(hào)、花括號(hào)和多行
// 這有助于可讀

// 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. 賦值, 聲明, 函數(shù) ( 命名函數(shù), 函數(shù)表達(dá)式, 構(gòu)建函數(shù) )
復(fù)制代碼 代碼如下:
// 2.B.1.1
// 變量
var foo = "bar",
num = 1,
undef;

// 字面量標(biāo)識(shí):
var array = [],
object = {};

// 2.B.1.2
// 在一個(gè)作用域（函數(shù)）內(nèi)只使用一個(gè) `var` 有助于提升可讀性
// 并且讓你的聲明列表變得有條不紊 (還幫你省了幾次鍵盤敲擊)

// 不好
var foo = "";
var bar = "";
var qux;

// 好
var foo = "",
bar = "",
quux;

// 或者..
var // 對(duì)這些變量的注釋
foo = "",
bar = "",
quux;

// 2.B.1.3
// `var` 語句必須總是在各自作用域（函數(shù)）頂部
// 同樣適應(yīng)于來自 ECMAScript 6 的常量

// 不好
function foo() {

// 在變量前有語句

var bar = "",
qux;
}

// 好
function foo() {
var bar = "",
qux;

// 所有語句都在變量之后
}
// 2.B.2.1
// 命名函數(shù)聲明
function foo( arg1, argN ) {

}

// 使用方法
foo( arg1, argN );

// 2.B.2.2
// 命名函數(shù)聲明
function square( number ) {
return number * number;
}

// 使用方法
square( 10 );

// 非常不自然的連帶傳參（continuation passing）風(fēng)格
function square( number, callback ) {
callback( number * number );
}

square( 10, function( square ) {
// 回調(diào)內(nèi)容
});

// 2.B.2.3
// 函數(shù)表達(dá)式
var square = function( number ) {
// 返回有價(jià)值的、相關(guān)的內(nèi)容
return number * number;
};

// 帶標(biāo)識(shí)符的函數(shù)表達(dá)式
// 這種首選形式有附加的功能讓其可以調(diào)用自身
// 并且在堆棧中有標(biāo)識(shí)符
var factorial = function factorial( number ) {
if ( number < 2 ) {
return 1;
}

return number * factorial( number-1 );
};

// 2.B.2.4
// 構(gòu)造函數(shù)聲明
function FooBar( options ) {

this.options = options;
}

// 使用方法
var fooBar = new FooBar({ a: "alpha" });

fooBar.options;
// { a: "alpha" }

C. 異常, 細(xì)節(jié)
復(fù)制代碼 代碼如下:
// 2.C.1.1
// 帶回調(diào)的函數(shù)
foo(function() {
// 注意：在第一函數(shù)調(diào)用的小括號(hào)和 `function` 處并沒有空格
});

// 函數(shù)接受 `array` 作為參數(shù)，沒有空格
foo([ "alpha", "beta" ]);

// 2.C.1.2
// 函數(shù)接受 `object` 作為參數(shù)，沒有空格
foo({
a: "alpha",
b: "beta"
});

// 函數(shù)接受 `string` 字面量作為參數(shù)，沒有空格
foo("bar");

// 分組用的小括號(hào)內(nèi)部，沒有空格
if ( !("foo" in obj) ) {

}

D. 一致性（統(tǒng)一）總是笑到最后的（Consistency Always Wins）

在 2.A-2.C 節(jié)，留白作為一個(gè)推薦方式被提出，基于單純的、更高的目的：統(tǒng)一。值得注意的是格式化偏好，像“內(nèi)部留白”必須是可選的，但在整個(gè)項(xiàng)目的源碼中必須只存在著一種。
復(fù)制代碼 代碼如下:
// 2.D.1.1

if (condition) {
// 語句
}

while (condition) {
// 語句
}

for (var i = 0; i < 100; i++) {
// 語句
}

if (true) {
// 語句
} else {
// 語句
}

E. 引號(hào)

無論你選擇單引號(hào)還是雙引號(hào)都無所謂，在 JavaScript 中它們?cè)诮馕錾蠜]有區(qū)別。而絕對(duì)需要強(qiáng)制的是一致性。 永遠(yuǎn)不要在同一個(gè)項(xiàng)目中混用兩種引號(hào)，選擇一種，并保持一致。

F. 行末和空行

留白會(huì)破壞區(qū)別并使用變更不可讀?？紤]包括一個(gè)預(yù)提交的 hook 自動(dòng)刪除行末和空行中的空格。

三、類型檢測(cè) (來源于 jQuery Core Style Guidelines)

A. 直接類型（實(shí)際類型，Actual Types）

String:
復(fù)制代碼 代碼如下:
typeof variable === "string"
Number:
復(fù)制代碼 代碼如下:
typeof variable === "number"
Boolean:
復(fù)制代碼 代碼如下:
typeof variable === "boolean"
Object:
復(fù)制代碼 代碼如下:
typeof variable === "object"
Array:
復(fù)制代碼 代碼如下:
Array.isArray( arrayLikeObject )
(如果可能的話)
Node:
復(fù)制代碼 代碼如下:
elem.nodeType === 1
null:
復(fù)制代碼 代碼如下:
variable === null
null or undefined:
復(fù)制代碼 代碼如下:
variable == null
undefined:

全局變量:
復(fù)制代碼 代碼如下:
typeof variable === "undefined"
局部變量:
復(fù)制代碼 代碼如下:
variable === undefined
屬性:
復(fù)制代碼 代碼如下:
object.prop === undefined
object.hasOwnProperty( prop )
"prop" in object
B. 轉(zhuǎn)換類型（強(qiáng)制類型，Coerced Types）

考慮下面這個(gè)的含義...

給定的 HTML:
復(fù)制代碼 代碼如下:

// 3.B.1.1

// `foo` 已經(jīng)被賦予值 `0`，類型為 `number`
var foo = 0;

// typeof foo;
// "number"
...

// 在后續(xù)的代碼中，你需要更新 `foo`，賦予在 input 元素中得到的新值

foo = document.getElementById("foo-input").value;

// 如果你現(xiàn)在測(cè)試 `typeof foo`, 結(jié)果將是 `string`
// 這意味著你在 if 語句檢測(cè) `foo` 有類似于此的邏輯:

if ( foo === 1 ) {

importantTask();

}

// `importantTask()` 將永遠(yuǎn)不會(huì)被執(zhí)行，即使 `foo` 有一個(gè)值 "1"

// 3.B.1.2

// 你可以巧妙地使用 + / - 一元運(yùn)算符強(qiáng)制轉(zhuǎn)換類型以解決問題:

foo = +document.getElementById("foo-input").value;
// ^ + 一元運(yùn)算符將它右邊的運(yùn)算對(duì)象轉(zhuǎn)換為 `number`

// typeof foo;
// "number"

if ( foo === 1 ) {

importantTask();

}

// `importantTask()` 將被調(diào)用
對(duì)于強(qiáng)制類型轉(zhuǎn)換這里有幾個(gè)例子:
復(fù)制代碼 代碼如下:
// 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 );

// 等價(jià)于...

~~num;

num >> 0;

num >>> 0;

// 結(jié)果都是 2

// 時(shí)刻牢記心底, 負(fù)值將被區(qū)別對(duì)待...

var neg = -2.5;

parseInt( neg, 10 );

// 等價(jià)于...

~~neg;

neg >> 0;

// 結(jié)果都是 -2
// 但是...

neg >>> 0;

// 結(jié)果即是 4294967294

四、對(duì)比運(yùn)算

復(fù)制代碼 代碼如下:
// 4.1.1
// 當(dāng)只是判斷一個(gè) array 是否有長(zhǎng)度，相對(duì)于使用這個(gè):
if ( array.length > 0 ) ...

// ...判斷真?zhèn)? 請(qǐng)使用這種:
if ( array.length ) ...

// 4.1.2
// 當(dāng)只是判斷一個(gè) array 是否為空，相對(duì)于使用這個(gè):
if ( array.length === 0 ) ...

// ...判斷真?zhèn)? 請(qǐng)使用這種:
if ( !array.length ) ...

// 4.1.3
// 當(dāng)只是判斷一個(gè) string 是否為空，相對(duì)于使用這個(gè):
if ( string !== "" ) ...

// ...判斷真?zhèn)? 請(qǐng)使用這種:
if ( string ) ...

// 4.1.4
// 當(dāng)只是判斷一個(gè) string 是為空，相對(duì)于使用這個(gè):
if ( string === "" ) ...

// ...判斷真?zhèn)? 請(qǐng)使用這種:
if ( !string ) ...

// 4.1.5
// 當(dāng)只是判斷一個(gè)引用是為真，相對(duì)于使用這個(gè):
if ( foo === true ) ...

// ...判斷只需像你所想，享受內(nèi)置功能的好處:
if ( foo ) ...

// 4.1.6
// 當(dāng)只是判斷一個(gè)引用是為假，相對(duì)于使用這個(gè):
if ( foo === false ) ...

// ...使用嘆號(hào)將其轉(zhuǎn)換為真
if ( !foo ) ...

// ...需要注意的是：這個(gè)將會(huì)匹配 0, "", null, undefined, NaN
// 如果你 _必須_ 是布爾類型的 false，請(qǐng)這樣用：
if ( foo === false ) ...

// 4.1.7
// 如果想計(jì)算一個(gè)引用可能是 null 或者 undefined，但并不是 false, "" 或者 0,
// 相對(duì)于使用這個(gè)：
if ( foo === null || foo === undefined ) ...

// ...享受 == 類型強(qiáng)制轉(zhuǎn)換的好處，像這樣:
if ( foo == null ) ...

// 謹(jǐn)記，使用 == 將會(huì)令 `null` 匹配 `null` 和 `undefined`
// 但不是 `false`，"" 或者 0
null == undefined

總是判斷最好、最精確的值，上述是指南而非教條。
復(fù)制代碼 代碼如下:
// 4.2.1
// 類型轉(zhuǎn)換和對(duì)比運(yùn)算說明

// 首次 `===`，`==` 次之 (除非需要松散類型的對(duì)比)

// `===` 總不做類型轉(zhuǎn)換，這意味著:

"1" === 1;
// false

// `==` 會(huì)轉(zhuǎn)換類型，這意味著:

"1" == 1;
// true

// 4.2.2
// 布爾, 真 & 偽

// 布爾:
true, false

// 真:
"foo", 1

// 偽:
"", 0, null, undefined, NaN, void 0

五、實(shí)用風(fēng)格
復(fù)制代碼 代碼如下:
// 5.1.1
// 一個(gè)實(shí)用的模塊

(function( global ) {
var Module = (function() {

var data = "secret";

return {
// 這是一個(gè)布爾值
bool: true,
// 一個(gè)字符串
string: "a string",
// 一個(gè)數(shù)組
array: [ 1, 2, 3, 4 ],
// 一個(gè)對(duì)象
object: {
lang: "en-Us"
},
getData: function() {
// 得到 `data` 的值
return data;
},
setData: function( value ) {
// 返回賦值過的 `data` 的值
return ( data = value );
}
};
})();

// 其他一些將會(huì)出現(xiàn)在這里

// 把你的模塊變成全局對(duì)象
global.Module = Module;

})( this );

// 5.2.1
// 一個(gè)實(shí)用的構(gòu)建函數(shù)

(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` 來調(diào)用構(gòu)建函數(shù)，你可能會(huì)這樣做：
var ctor = function( foo ) {
return new Ctor( foo );
};

// 把我們的構(gòu)建函數(shù)變成全局對(duì)象
global.ctor = ctor;

})( this );

六、命名

A. 你并不是一個(gè)人肉 編譯器/壓縮器，所以嘗試去變身為其一。

下面的代碼是一個(gè)極糟命名的典范:
復(fù)制代碼 代碼如下:
// 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]);}
毫無疑問，你寫過這樣的代碼 —— 希望從今天它不再出現(xiàn)。

這里有一份相同邏輯的代碼，但擁有更健壯、貼切的命名（和一個(gè)可讀的結(jié)構(gòu)）：
復(fù)制代碼 代碼如下:
// 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 ] );
}

一些額外的命名提示：
復(fù)制代碼 代碼如下:
// 6.A.3.1
// 命名字符串

`dog` 是一個(gè) string

// 6.A.3.2
// 命名 arrays

`['dogs']` 是一個(gè)包含 `dog 字符串的 array

// 6.A.3.3
// 命名函數(shù)、對(duì)象、實(shí)例，等

camlCase; function 和 var 聲明

// 6.A.3.4
// 命名構(gòu)建器、原型，等

PascalCase; 構(gòu)建函數(shù)

// 6.A.3.5
// 命名正則表達(dá)式

rDesc = //;

// 6.A.3.6
// 來自 Google Closure Library Style Guide

functionNamesLikeThis;
variableNamesLikeThis;
ConstructorNamesLikeThis;
EnumNamesLikeThis;
methodNamesLikeThis;
SYMBOLIC_CONSTANTS_LIKE_THIS;

B. 面對(duì) this

除使用眾所周知的 call 和 apply 外，總是優(yōu)先選擇 .bind( this ) 或者一個(gè)功能上等價(jià)于它的。創(chuàng)建 BoundFunction 聲明供后續(xù)調(diào)用，當(dāng)沒有更好的選擇時(shí)才使用別名。
復(fù)制代碼 代碼如下:
// 6.B.1
function Device( opts ) {

this.value = null;

// 新建一個(gè)異步的 stream，這個(gè)將被持續(xù)調(diào)用
stream.read( opts.path, function( data ) {

// 使用 stream 返回 data 最新的值，更新實(shí)例的值
this.value = data;

}.bind(this) );

// 控制事件觸發(fā)的頻率
setInterval(function() {

// 發(fā)出一個(gè)被控制的事件
this.emit("event");

}.bind(this), opts.freq || 100 );
}

// 假設(shè)我們已繼承了事件發(fā)送器（EventEmitter） ;)

當(dāng)不能運(yùn)行時(shí)，等價(jià)于 .bind 的功能在多數(shù)現(xiàn)代 JavaScript 庫(kù)中都有提供。
復(fù)制代碼 代碼如下:
// 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 );
}

提供一個(gè)候選，創(chuàng)建一個(gè) this 的別名，以 self 作為標(biāo)識(shí)符。這很有可能出 bug，應(yīng)盡可能避免。
復(fù)制代碼 代碼如下:
// 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

好幾個(gè) ES 5.1 中的原型的方法都內(nèi)置了一個(gè)特殊的 thisArg 標(biāo)記，盡可能多地使用它
復(fù)制代碼 代碼如下:
// 6.C.1

var obj;

obj = { f: "foo", b: "bar", q: "qux" };

Object.keys( obj ).forEach(function( key ) {

// |this| 現(xiàn)在是 `obj`

console.log( this[ key ] );

}, obj ); // <-- 最后的參數(shù)是 `thisArg`

// 打印出來...

// "foo"
// "bar"
// "qux"

thisArg 在 Array.prototype.every、 Array.prototype.forEach、 Array.prototype.some、 Array.prototype.map、 Array.prototype.filter 中都可以使用。

七、Misc

這個(gè)部分將要說明的想法和理念都并非教條。相反更鼓勵(lì)對(duì)現(xiàn)存實(shí)踐保持好奇，以嘗試提供完成一般 JavaScript 編程任務(wù)的更好方案。

A. 避免使用 switch，現(xiàn)代方法跟蹤（method tracing）將會(huì)把帶有 switch 表達(dá)式的函數(shù)列為黑名單。

似乎在最新版本的 Firefox 和 Chrome 都對(duì) switch 語句有重大改進(jìn)。http://jsperf.com/switch-vs-object-literal-vs-module

值得注意的是，改進(jìn)可以這里看到: https://github.com/rwldrn/idiomatic.js/issues/13
復(fù)制代碼 代碼如下:
// 7.A.1.1
// switch 語句示例

switch( foo ) {
case "alpha":
alpha();
break;
case "beta":
beta();
break;
default:
// 默認(rèn)分支
break;
}

// 7.A.1.2
// 一個(gè)可支持組合、重用的方法是使用一個(gè)對(duì)象來存儲(chǔ) “cases”，
// 使用一個(gè) function 來做委派：

var cases, delegator;

// 返回值僅作說明用
cases = {
alpha: function() {
// 語句
// 一個(gè)返回值
return [ "Alpha", arguments.length ];
},
beta: function() {
// 語句
// 一個(gè)返回值
return [ "Beta", arguments.length ];
},
_default: function() {
// 語句
// 一個(gè)返回值
return [ "Default", arguments.length ];
}
};

delegator = function() {
var args, key, delegate;

// 把 `argument` 轉(zhuǎn)換成數(shù)組
args = [].slice.call( arguments );

// 從 `argument` 中抽出最前一個(gè)值
key = args.shift();

// 調(diào)用默認(rèn)分支
delegate = cases._default;

// 從對(duì)象中對(duì)方法進(jìn)行委派操作
if ( cases.hasOwnProperty( key ) ) {
delegate = cases[ key ];
}

// arg 的作用域可以設(shè)置成特定值，
// 這種情況下，|null| 就可以了
return delegate.apply( null, args );
};

// 7.A.1.3
// 使用 7.A.1.2 中的 API:

delegator( "alpha", 1, 2, 3, 4, 5 );
// [ "Alpha", 5 ]

// 當(dāng)然 `case` key 的值可以輕松地?fù)Q成任意值

var caseKey, someUserInput;

// 有沒有可能是某種形式的輸入?
someUserInput = 9;

if ( someUserInput > 10 ) {
caseKey = "alpha";
} else {
caseKey = "beta";
}

// 或者...

caseKey = someUserInput > 10 ? "alpha" : "beta";

// 然后...

delegator( caseKey, someUserInput );
// [ "Beta", 1 ]

// 當(dāng)然還可以這樣搞...

delegator();
// [ "Default", 0 ]

B. 提前返回值提升代碼的可讀性并且沒有太多性能上的差別
復(fù)制代碼 代碼如下:
// 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";
}

八、原生 & 宿主對(duì)象（注：其實(shí)一直覺得 Host Objects 真不應(yīng)該翻譯過來，這是就按一般書的寫法翻出來吧）

最基本的原則是:

不要干任何蠢事，事情總會(huì)變好的。

為了加強(qiáng)這個(gè)觀念，請(qǐng)觀看這個(gè)演示:

“一切都被允許: 原生擴(kuò)展” by Andrew Dupont (JSConf2011, Portland, Oregon)

http://blip.tv/jsconf/jsconf2011-andrew-dupont-everything-is-permitted-extending-built-ins-5211542

九、注釋

單行注釋放于代碼上方為首選
多行也可以
行末注釋應(yīng)被避免!
JSDoc 的方式也不錯(cuò)，但需要比較多的時(shí)間

十、單用一門語言

無論是什么語言程序維護(hù)者（或團(tuán)隊(duì)）規(guī)定使用何種語言，程序都應(yīng)只用同一種語言書寫。

附錄

前置逗號(hào)（Comma First）

所有使用這個(gè)文檔作為基本風(fēng)格指南的項(xiàng)目都不允許前置逗號(hào)的代碼格式，除非明確指定或者作者要求。

總結(jié)

以上是生活随笔為你收集整理的现代 JavaScript 开发编程风格Idiomatic.js指南中文版_javascript技巧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。