由於移動應用的盛行和HTML的廣泛運用JavaScript正越來越流行JavaScript受歡迎的部分原因是因為它的靈活便捷你可以快速上手它不需要重量級的開發環境也不需要第三方應用支持只要你打開一個文本編輯器然後保存最後通過網頁浏覽器運行即可
但是對於新手而言使用JavaScript處處存在陷阱在一段復雜的腳本中JavaScript語言的延展性常常引起怪異的bug例如未聲明的局部變量可能會不知不覺修改全局變量
現在打開JSLint網站正如其網站所言它是JavaScript代碼質量工具JSLint的作者是Douglas Crockford因其對JavaScript（ECMAScript）和JSON的貢獻而著名
JSLint幫助JavaScript程序員在編程過程中遵循一定的編碼規范JSLint是以基於嚴格模式（Strict Mode）為前提參考第版ECMAScript標准與一般模式相比嚴格模式下你的代碼需要按照更嚴格的規則運行
使用JSLint
我們來用JSLint運行一個示例寫一個簡單的jQuery插件通過prefix顯示msg接收的信息如果傳給type的值為false則不顯示prefix
（function （$） {
$fnloading = function（msg type cssClass）{
var prefixes = {
warning: Warning: + msg
error: Error: + msg
info: Info: + msg
warning: Caution: + msg
};
if （type） {
concatMsg = prefixes[type];
} else {
concatMsg = msg;
}
$（this）each（function（） {
var tis = $（this）
if （msg == false） {
l（）
} else {
l（concatMsg）
}
}）
} }）（jQuery）
盡管這段代碼作為jQuery的插件運行還算正常但當你用Firefox或Chrome運行時會發現有幾處明顯的錯誤以及一些不易察覺的問題與其耗費腦力解決這些問題不如通過JSLint來幫助我們將上面這段代碼拷貝至JSLint網站的文本框內然後點擊JSLint按鈕代碼建議和錯誤提示會出現在下方
JSLint指出的第一個錯誤是丟失use strict聲明這個錯誤表示該函數未在嚴格模式下執行為糾正該錯誤我們在函數主體的頭部添加use strict語句以啟動嚴格模式
use strict;
加入嚴格模式聲明語句後再次點擊JSLint按鈕提示丟失use strict的錯誤信息將消失現在我們可以繼續看下一個錯誤接下來的這個錯誤是關於空格的問題鑒於它不能算個真正的錯誤我們可以放心地忽略它
你可以將頁面最下方的messy white space選項改為true這樣你就可以保留function關鍵字後不留空格的寫法但是現在我們保留messy white space選項的default屬性因為這個功能也會幫助我們檢查其他空格問題這個我們之後再說
同樣需要注意的是雖然JSLint指出的第二個和第三個錯誤指向同一行代碼但錯誤點並不一樣後者JSLint建議在右括號）和左大括號{之間空一格現在我們糾正下這個錯誤
插入空格後再次點擊JSLint按鈕下一個錯誤出現在第行第個字符處prefixes對象包含了兩個一模一樣的warning屬性將第二個warning修改為caution
這次就不再點擊JSLint按鈕直接看下一個錯誤吧定義對象的代碼塊的最後多了一個逗號像這類錯誤Chrome和Firefox這些浏覽器也許會忽略但IE就不會那麼友好了所以我們把這個逗號移除掉
之後的兩個錯誤指向未定義的變量concatMsg如果一個變量在當前作用域中沒有被定義JavaScript就會全局查找看是否有在別處定義過若這時你還引入了外部代碼並碰巧在全局中定義過該變量那麼一旦出錯你很有可能要抓破頭皮費盡心力地尋找bug原因所幸有了JSLint我們可以將這類錯誤扼殺在搖籃中
現在糾正這個錯誤並重構代碼因為concatMsg的默認值為msg所以我們可以將msg先賦給它待需要時再修改如下所示關於concatMsg的代碼為
var concatMsg = msg;
if （type） {
concatMsg = prefixes[type];
}
繼續往下有一個與之前類似的空格問題糾正它緊接著JSLint指出丟失了一個分號（如下圖所示）JSLint會假設沒有分號結尾的命令行永遠不會被終止所以當下面出現if時JSLint認為這裡應該有個分號盡管根據語言規范結束的分號可有可無但是加上它是一個良好的習慣因為這類不良代碼在大項目協作中很容易引起莫名的bug所以平常編碼過程中應順手避免此類問題
接下來又是一個很好的錯誤例子JavaScript中有相等（==）和嚴格的相等（===）比較在這段案例代碼中如果不采用嚴格相等比較那麼不管msg為空字符串還是false值if內都為true所以這裡我們采用嚴格相等比較
好了讓我們再次點擊JSLint按鈕吧如下圖所示錯誤出現在第行JSLint認為合並變量聲明也是一個良好的編碼規范盡管concatMsg變量的聲明緊隨prefixes之後但JSLint認為用逗號隔開在一個命令語句中完成變量聲明更好
下一個錯誤則又是關於格式的問題咋一看不就是多空了一格嘛實在是太雞毛蒜皮了但是如果在大量的腳本中這種縮進問題搞不好也會引起難以發現的bug所以為了代碼的統一性我們還是往前移一格吧
下一個問題又和之前遇到的類似但形式不一樣JavaScript的函數也可歸屬為變量所以和其他變量賦值語句一樣JSLint希望在末尾加個分號
最後如下所示有兩個錯誤出現在最後一行第一個問題JSLint建議將閉括號移至jQuery之後因為這樣不會使閉包函數定義產生歧義第二個問題JSLint認為jQuery變量不存在但事實上你可能在實際頁面中已引入了jQuery文件所以我們可以在頁面最下面的文本框內輸入 jQuery來解決這個問題（譯者JSLint Directive上面的文本框）
再次運行JSLint它提示該函數需要接收三個參數但是在本示例中我們從未使用過第三個參數因此此處我們有兩種方法解決這個問題第一種刪除第三個參數第二種將下方的unused parameters項改為true如果你確實是因為某些原因需要保留這個參數則用第二種方法
好了用JSLint改進後的代碼如下所示
（function （$） {
use strict;
$fnloading = function （msg type cssClass） {
var prefixes = {
warning: Warning: + msg
error: Error: + msg
info: Info: + msg
caution: Caution: + msg
} concatMsg = msg;
if （type） {
concatMsg = prefixes[type];
}
$（this）each（function （） {
var tis = $（this）
if （msg === false） {
l（）
} else {
l（concatMsg）
}
}）
};
}（jQuery））
JSLint 指令
你可以通過JSLint指令在你的源代碼中直接定義JSLint變量這樣你就不用在頁面上來回操作如下示例注釋中定義了jQuery全局變量並將unparam設為true
/*global jQuery*/ /*jslint unparam: true */ （function （$） {
use strict;
…
}（jQuery））
總結
在這個簡短的例子中JSLint指出了一些明顯的和一些容易忽視的錯誤在實際運行代碼之前通過JSLint幫我們查找一些錯誤可以有效的提高我們的開發效率和代碼質量如果你真的是認真地想寫出優質的代碼那麼在放到服務器上運行之前先用JSLint檢查一遍吧JSLint還提供一個獨立的 JS文件版本所以你也可以把它下載下來在線下運行！
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19685.html
