在Medium上看到了兩篇關(guān)于寫(xiě)高質(zhì)量JavaScript代碼的文章，覺(jué)得不錯(cuò),，特此搬過(guò)來(lái),，記下一筆,，以待后續(xù)查閱。

JavaScript 作為最受歡迎的編程語(yǔ)言之一,，被廣泛應(yīng)用在各個(gè)領(lǐng)域：網(wǎng)站,、服務(wù)端、游戲,、操作系統(tǒng)等,。跟人類(lèi)一樣，編程語(yǔ)言也是隨著時(shí)間的推移慢慢進(jìn)化的,，而在進(jìn)化的過(guò)程中,，其創(chuàng)建者也會(huì)做出一些現(xiàn)在看來(lái)很糟糕的決定，給語(yǔ)言加入一些詬病,。但是,，開(kāi)發(fā)人員也花費(fèi)了很多時(shí)間去總結(jié)了很多最佳實(shí)踐來(lái)消除語(yǔ)言自身詬病帶來(lái)的影響。如果沒(méi)有特別的緣由,，就應(yīng)該遵循這些最佳實(shí)踐,，而不是重新造輪子。

1,、使用var聲明變量

使用var,，會(huì)在變量定義之處所在的作用域定義一個(gè)變量，如果忽略了var,，則該變量會(huì)被添加到全局環(huán)境(window 對(duì)象),。所有人都知道，全局變量非常邪惡,。

2,、嚴(yán)格模式

在JavaScript文件中以'use strict'(雙引號(hào))開(kāi)始，這能阻止使用 JavaScript 的一些不好的實(shí)踐,，想了解更多關(guān)于嚴(yán)格模式的信息,，戳此：Strict mode-Mozilla Developer Network

3、使用IIFE–Immediately Invoked Function Expression

將代碼放進(jìn)一個(gè)立即執(zhí)行函數(shù)中,，這會(huì)對(duì) JavaScript 文件中定義的變量和函數(shù)進(jìn)行封裝而不會(huì)被添加到全局環(huán)境,，也不會(huì)污染全局環(huán)境。想了解更多,，戳此：IIFE

4,、使用駝峰表示法

編程語(yǔ)言是寫(xiě)給人看的，這也是它們?yōu)槭裁词怯糜⒄Z(yǔ)寫(xiě)的原因,。因此,，代碼應(yīng)該是可讀和可理解的。為了使代碼可讀和可理解，應(yīng)該一致的方式來(lái)編寫(xiě)代碼,。遵循慣例,，大多數(shù)的 JavaScript 應(yīng)用，工具和庫(kù)采用駝峰式,，遵循這個(gè)風(fēng)格是很重要的,，這能避免我們的代碼看起來(lái)很怪異。遵循一致慣例,，也不會(huì)對(duì)那些想使用你代碼的開(kāi)發(fā)者造成困惑,。

5、嵌套函數(shù)定義并不令人厭惡

在函數(shù)作用域需要的地方,，可以使用嵌套函數(shù)定義，從長(zhǎng)遠(yuǎn)來(lái)看,，它能保持代碼干凈和模塊化,。

6、使用 === 和!==

在 JavaScript 中,，==和!=操作符是不會(huì)檢查類(lèi)型,，因而會(huì)返回意向不到的結(jié)果。想了解更多,，戳此：Read More

(在你有必要知道的 25 個(gè) JavaScript 面試題的第一題就有坑)

7,、和使用單引號(hào)的人保持一致，而不是雙引號(hào)

和使用單引號(hào)的 JavaScript 開(kāi)發(fā)人員保持一致,，跟他們一樣,，使用單引號(hào)。

8,、使用Linter

Linting 是檢查源代碼以及代碼風(fēng)格的一個(gè)過(guò)程,。 –網(wǎng)絡(luò)

Get JSHint to your favorite Code Editor

9、代碼格式化

<——-我是分割線——>

上面一些建議有助于你寫(xiě)出更好的 JavaScript 代碼(Write Better JavaScript),，接下來(lái)會(huì)為如何寫(xiě)出運(yùn)行更快的 JavaScript 代碼提供建議參考(Write Fast JavaSctipt),，每一個(gè)建議都帶有 jsPerf 的測(cè)試。

10,、避免類(lèi)型轉(zhuǎn)換

JavaScript 是動(dòng)態(tài)型的,，但如要提高代碼運(yùn)行速度，就不要使用這個(gè)特性,，而是應(yīng)該讓變量類(lèi)型保持一致,。這同樣適用于數(shù)組，不要在數(shù)組中混合使用不同類(lèi)型,。

{
  var x = '2';
  var y = 5;
  x = 2;
  x   y;
}

Test Case

11,、String轉(zhuǎn)Number

parseInt&parseFloat是將(數(shù)字)字符串轉(zhuǎn)換成 Number 類(lèi)型的最好方式嗎？

// Different ways of parsing integer/float from strings
parseFloat('100')
 '100'
// integer only
parseInt('100', 10)
'100'|0
'100' >> 0
'100' << 0
//Only works for positive numbers
'100' >>> 0

parseInt test~parseFloat test

火狐優(yōu)化了位操作符，其運(yùn)行速度比parseInt和 操作符快了 99%,，但 Chrome 沒(méi)有做優(yōu)化,，運(yùn)行速度還比parseInt慢 68%。

parseFloat則在二者上比 操作符都快(火狐快28%,，Chrome 快39%)

12,、不要重構(gòu)對(duì)象

重構(gòu)對(duì)象是很昂貴的操作，遵循下面的建議來(lái)避免：

不使用 delete 操作符

刪除一個(gè)屬性,，用delete會(huì)比通過(guò)null賦值慢很多,，在火狐和 Chrome 中，null賦值會(huì)快 99%,，因?yàn)樗粫?huì)修改對(duì)象的結(jié)構(gòu),，但是delete會(huì)。

delete vs null

不要添加屬性

定義對(duì)象后,，不要隨后給對(duì)象添加屬性,，而是一開(kāi)始就應(yīng)該定義好對(duì)象的結(jié)構(gòu)模式，這樣運(yùn)行速度會(huì)快很多(火狐上快 100%,，Chrome 上快 89%)

dynamic properties vs pre-defined structure

13,、字符串拼接

字符串拼接是相當(dāng)昂貴的操作，但最好的實(shí)現(xiàn)方式是啥呢,？肯定不是Array.prototype.join,。

字符串拼接運(yùn)行在不同瀏覽器上的結(jié)果差別很大，我推薦你自己在不同瀏覽器上運(yùn)行測(cè)試來(lái)找到合適的方式,。最快的情況下：在火狐上,，重關(guān)聯(lián)字符串(Reassociating strings)是運(yùn)行最快的方式；對(duì)于 Chrome,，在constant fold的幫助下,，使用Array.prototype.join是最快的。在二者上的最慢情況似乎是使用String.prototype.concat和 操作符,。

字符串連接

14,、使用正確的正則方法

在RegExp.prototype.test和String.prototype.search之間是有性能差異的，看看哪個(gè)運(yùn)行更快：

Regex Methods

看上去RegExp.prototype.test比String.prototype.search快很多,，這是因?yàn)槎叩倪\(yùn)行條件并不是完全一樣的,，它們是不同的，關(guān)于這個(gè)的討論超出了文章范圍,，你可以看看這個(gè)問(wèn)題：Stack Overflow

在尋找存在的字符串時(shí),，RegExp.prototype.test更快，可能是因?yàn)樗环祷仄ヅ渥址乃饕?，?code>String.prototype.search僅僅用于返回匹配字符串的索引,。

你不應(yīng)該使用 RegExps 來(lái)查找子字符串的索引，而是應(yīng)該使用String.prototype.indexOf。

String.prototype.search vs String.prototype.indexOf

另一個(gè)有趣的基準(zhǔn)是String.prototype.indexOf vs RegExp.prototype.test,，我個(gè)人期待后者會(huì)更快一點(diǎn),，但這出現(xiàn)在火狐中，在Chrome中相反,。在火狐中,，后者快 32%；然后在 Chrome 中,，前者快 33%,。這種情況，就選擇你喜歡的吧,。

15,、聲明 & 傳遞局部作用域變量

當(dāng)調(diào)用一個(gè)函數(shù)時(shí)，瀏覽器會(huì)進(jìn)行作用域查找,，這個(gè)時(shí)間花銷(xiāo)跟瀏覽器要查找的作用域數(shù)有關(guān),。不要依賴(lài)全局/高層作用域變量，而是創(chuàng)建局部作用域變量,，然后傳遞給函數(shù)。查找的作用域數(shù)越少,，就運(yùn)行更快,。

internal scope vs higher scope vs global

16、不要一切都離不開(kāi)jQuery

很多開(kāi)發(fā)者使用 jQuery 來(lái)完成很簡(jiǎn)單的任務(wù),，我的意思是,，不要因?yàn)轫?xiàng)目引入了 jQuery，就必須用它,，想想,，$val()是一直有必要使用嗎？看個(gè)示例：

$('input').keyup(function() {
    if($(this).val() === 'blah') { ... }
});

學(xué)會(huì)用平常的 JavaScript 去修改 DOM 的一個(gè)最重要的理由是,，能寫(xiě)出更高效的代碼,。

同樣的條件，普通的 JavaScript 代碼運(yùn)行更快,，看測(cè)試：JSPerf Test

$('input').keyup(function() {
    if(this.value === 'blah') { ... }
});

17、對(duì)于耗時(shí)任務(wù),，使用 Web Workers

如果你有非常耗時(shí)的計(jì)算任務(wù),，如圖像處理，最好使用WebWorkers讓瀏覽器在后臺(tái)線程中運(yùn)行這個(gè)任務(wù),，并且異步返回處理結(jié)果,，而不是掛起線程。

文章參考

• How To Write Better JavaScript
• Let’s Write Fast JavaScript