前言
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語言特性。