Web前端開發最佳實踐（11）：使用更嚴格的JavaScript編碼方式，提升代碼質量

前言

JavaScript語言因爲其固有的靈活性，因此致使開發者能夠寫出不少詭異的代碼，甚至一些較爲正常的特性，如類型隱式轉換、this的指代等等，也會讓剛接觸此語言的開發者頭大不已。尤爲是那些熟知其餘諸如Java和C#等高級語言的開發者。使用更嚴格的編碼方式，能夠最大量避免

啓用嚴格模式

隨着JavaScript的發展，開發者及規範制定者也意識到了JavaScript語言自己的一些設計缺陷，因此在ECMAScript5中引入了嚴格模式。設立嚴格模式的目的主要是爲了消除JavaScript語法上不合理的地方，從而提升代碼安全性、編譯效率，增長運行速度且更好地兼容JavaScript將來的新版本等。

具體來講，嚴格模式主要是針對以下不合理的地方做了改進，包括：

禁用with關鍵字、防止意外地全局變量、函數中的this再也不默認指向全局、防止函數參數重名、防止對象屬性重名、更安全地使用eval等。具體能夠參考mozilla網站上的詳細介紹。

在嚴格模式中針對一些編碼的格式進行了限制。有些在普通模式下不會報錯的代碼，在嚴格模式中可能就會出現運行錯誤。這種顯式拋出錯誤的方式比以怪異方式運行代碼能更早地發現問題。

嚴格模式目前已經獲得了除IE8以外的大部分主流瀏覽器的支持，因此推薦在代碼中使用。

啓用嚴格模式很簡單，只要在代碼中添加以下代碼便可：

"use strict"；

在不支持嚴格模式的瀏覽器中，以下代碼會被看成普通的語句運行，不會產生反作用：

<script>
    "use strict";
    console.log("這是嚴格模式。");
</script>
<script>
    console.log("這是正常模式。"); 
</script>

下面介紹在使用嚴格模式時須要遵循的幾條最佳實踐。

1. 不要在全局中啓用嚴格模式

若全局設置嚴格模式，將意味着代碼文件中全部的代碼都必須遵照嚴格模式。除非全部的代碼都是本身維護，不然這麼作會帶來風險，由於不能保證其餘人維護的代碼也是符合嚴格模式的。好比以下的代碼中，在代碼文件設置了全局嚴格模式，應該避免這樣的設置方式。

"use strict";
function doSomething() {
    // 這部分代碼會運行於嚴格模式
}
function doSomethingElse() {
    // 這部分代碼也會運行於嚴格模式 
}

即便是其餘人維護的代碼在不一樣的文件中也不建議這麼作，由於很難保證發佈時候代碼不會合並，因此儘可能把嚴格模式限定在函數做用域範圍內。相似以下的設置方式：

function doSomething() {
    "use strict";
    // 這個函數中的代碼將會運行於嚴格模式
}
function doSomethingElse() {
    // 這個函數中代碼不會運行於嚴格模式 
}

若是想給大量的代碼設置嚴格模式，能夠把代碼包含在一個當即執行的函數內，並在函數開頭啓用嚴格模式，示例代碼以下：

(function (){
    "use strict";
    // 其餘代碼
})();

2. 在已有代碼中謹慎啓用嚴格模式

若是代碼中還包含有不符合嚴格模式的代碼，則啓用嚴格模式會產生風險，由於有可能會致使代碼運行錯誤，頁面沒法正常展現和交互。在已有代碼中啓用嚴格模式要和代碼的重構同樣受到重視——必須有足夠的代碼檢查和測試，確保每一行代碼均可以正常運行。

儘管使用嚴格模式有如上這些的風險，可是隻要使用得當，嚴格模式能夠幫助開發者儘早發現一些潛在的問題。因此推薦在編寫JavaScript代碼時啓用嚴格模式。

使用JSHint和JSLint

若是要更嚴格地編寫JavaScript代碼，可使用JavaScript代碼檢查工具。目前，流行的檢查工具主要是JSLint和JSHint。JSLint是JavaScript大牛Douglas Crockford所創立的。而JSHint則是從JSLint派生出來的，比JSLint更輕量級，而且它提供了一系列的可配置項，讓開發者可關掉某些以爲沒有必要的錯誤提示。JSHint使用起來更靈活，並不帶有強制性的限制，因此推薦開發者使用。

JSHint的檢查規則涵蓋了大部分的基本編碼規範，好比：缺乏分號、空格和tab混合使用、錯誤的轉義等。JSHint官方網站上列出了詳細的檢查項，每一個檢查項都有具體的解釋，這些也是學習JavaScript基本規範的好資料。

不少的代碼編輯器也集成了JSLint和JSHint這兩個代碼檢查工具，好比在WebStorm代碼編輯器的設置中就有針對此工具的單獨配置項，配置界面如圖所示。

圖 WebStorm中配置JSLint和JSHint

在WebStorm中啓用JSHint後，JavaScript代碼文件中就會有進行JSHint檢查的提示信息，以下圖所示。

這樣就能夠很方便地找到代碼中不夠嚴謹或存在問題的地方。固然，若是不想使用IDE的插件，也可使用一些自動化的工具，我最近一直在藉助Grunt工具來構建和發佈Web項目，grunt-contrib-jshint就是其中一個自動化的工具，此工具的運行效果圖以下：

此工具配合grunt-contrib-watch 使用，會持續不斷地檢查JavaScript代碼的質量。

如上就是在JavaScript編碼中提升代碼質量的一些基本手段，這些方式能夠避免一些最基本的低級錯誤，並提升代碼的可讀性，但並非說使用了嚴格模式和JSHint工具就能寫出高質量的代碼。高質量的代碼還須要代碼自己邏輯清晰，運行性能高，這些就須要開發者更深刻地瞭解JavaScript語言特性。