由于移動應用的盛行和HTML5的廣泛運用，JavaScript正越來越流行。JavaScript受歡迎的部分原因是因為它的靈活便捷，你可以快速上手，它不需要重量級的開發環境，也不需要第三方應用支持，只要你打開一個文本編輯器，然后保存，最后通過網頁瀏覽器運行即可。
但是，對于新手而言，使用JavaScript處處存在陷阱。在一段復雜的腳本中，JavaScript語言的延展性常常引起怪異的bug。例如，未聲明的局部變量可能會不知不覺修改全局變量。
現在，打開JSLint網站，正如其網站所言，它是“JavaScript代碼質量工具”。JSLint的作者是Douglas Crockford，因其對JavaScript（ECMAScript）和JSON的貢獻而著名。
（譯注：Douglas Crockford是 web領域技術權威之一，他是JSON、JSLint、JSMin和ADSafe的創造者，也是名著《JavaScript: The Good Parts》（中文版《JavaScript語言精粹?》）的作者。撰寫了許多廣為流傳、影響深遠的技術文章，包括“JavaScript:世界上最被誤解的語言”。）
JSLint幫助JavaScript程序員在編程過程中遵循一定的編碼規范。JSLint是以基于嚴格模式（Strict Mode）為前提，參考第5版ECMAScript標準。與一般模式相比，嚴格模式下你的代碼需要按照更嚴格的規則運行。
（譯注：對嚴格模式不了解的童鞋，可以參考這兩篇文章《ECMAScript 5.1簡介》《是時候使用JavaScript嚴謹模式(Strict Mode)提升團隊開發效率》）
使用JSLint
我們來用JSLint運行一個示例。寫一個簡單的jQuery插件，通過prefix顯示msg接收的信息，如果傳給type的值為false則不顯示prefix。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | (function ($) {????$.fn.loading = 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) {????????????????tis.html('');????????????} else {????????????????tis.html(concatMsg);????????????}????????});?????}})(jQuery); |
盡管這段代碼作為jQuery的插件運行還算正常，但當你用Firefox或Chrome運行時，會發現有幾處明顯的錯誤，以及一些不易察覺的問題。與其耗費腦力解決這些問題，不如通過JSLint來幫助我們。將上面這段代碼拷貝至JSLint網站的文本框內，然后點擊”JSLint”按鈕，代碼建議和錯誤提示會出現在下方。
JSLint指出的第一個錯誤是：丟失“use strict”聲明。這個錯誤表示該函數未在嚴格模式下執行。為糾正該錯誤，我們在函數主體的頭部，添加“use strict”語句以啟動嚴格模式。
| 1 | 'use strict'; |
加入嚴格模式聲明語句后，再次點擊“JSLint”按鈕，提示丟失“use strict”的錯誤信息將消失。現在，我們可以繼續看下一個錯誤。接下來的這個錯誤是關于空格的問題，鑒于它不能算個真正的錯誤，我們可以放心地忽略它。
你可以將頁面最下方的“messy white space”選項改為true，這樣你就可以保留function關鍵字后不留空格的寫法。但是現在，我們保留“messy white space”選項的default屬性，因為這個功能也會幫助我們檢查其他空格問題，這個我們之后再說。
同樣需要注意的是，雖然JSLint指出的第二個和第三個錯誤指向同一行代碼，但錯誤點并不一樣。后者JSLint建議在右括號“）”和左大括號“{”之間空一格，現在我們糾正下這個錯誤。
插入空格后，再次點擊“JSLint”按鈕，下一個錯誤出現在第8行，第39個字符處。prefixes對象包含了兩個一模一樣的warning屬性，將第二個warning修改為caution。
這次就不再點擊“JSLint”按鈕，直接看下一個錯誤吧。定義對象的代碼塊的最后多了一個逗號。像這類錯誤，Chrome和Firefox這些瀏覽器也許會忽略，但IE就不會那么友好了，所以我們把這個逗號移除掉。
之后的兩個錯誤指向未定義的變量concatMsg。如果一個變量在當前作用域中沒有被定義，JavaScript就會全局查找看是否有在別處定義過。若這時你還引入了外部代碼，并碰巧在全局中定義過該變量，那么一旦出錯，你很有可能要抓破頭皮，費盡心力地尋找bug原因。所幸有了JSLint，我們可以將這類錯誤扼殺在搖籃中。
現在糾正這個錯誤，并重構代碼。因為concatMsg的默認值為msg，所以我們可以將msg先賦給它，待需要時再修改。如下所示，關于concatMsg的代碼為：
| 1 2 3 4 | var concatMsg = msg;if (type) {????concatMsg = prefixes[type];} |
繼續往下，有一個與之前類似的空格問題，糾正它。緊接著，JSLint指出丟失了一個分號（如下圖所示）。JSLint會假設沒有分號結尾的命令行永遠不會被終止。所以，當下面出現if時，JSLint認為這里應該有個分號。盡管根據語言規范，結束的分號可有可無，但是加上它是一個良好的習慣。因為這類不良代碼在大項目協作中很容易引起莫名的bug。所以平常編碼過程中，應順手避免此類問題。
接下來又是一個很好的錯誤例子。JavaScript中，有‘相等’（==）和嚴格的‘相等’（===）比較。在這段案例代碼中，如果不采用嚴格‘相等’比較，那么不管msg為空字符串還是false值，if內都為true。所以，這里我們采用嚴格‘相等’比較。
好了，讓我們再次點擊“JSLint”按鈕吧。如下圖所示，錯誤出現在第10行，JSLint認為合并變量聲明也是一個良好的編碼規范。盡管concatMsg變量的聲明緊隨prefixes之后，但JSLint認為用逗號隔開，在一個命令語句中完成變量聲明更好。
下一個錯誤則又是關于格式的問題。咋一看，不就是多空了一格嘛，實在是太雞毛蒜皮了。但是，如果在大量的腳本中，這種縮進問題搞不好也會引起難以發現的bug。所以，為了代碼的統一性，我們還是往前移一格吧。
下一個問題又和之前遇到的類似，但形式不一樣。JavaScript的函數也可歸屬為變量，所以和其他變量賦值語句一樣，JSLint希望在末尾加個分號。
最后，如下所示，有兩個錯誤出現在最后一行。第一個問題，JSLint建議將閉括號移至jQuery之后，因為這樣不會使閉包函數定義產生歧義。第二個問題，JSLint認為jQuery變量不存在。但事實上你可能在實際頁面中已引入了jQuery文件，所以我們可以在頁面最下面的文本框內輸入“jQuery”來解決這個問題（譯者：JSLint Directive上面的文本框）。
再次運行JSLint，它提示該函數需要接收三個參數。但是在本示例中，我們從未使用過第三個參數。因此，此處我們有兩種方法解決這個問題。第一種，刪除第三個參數。第二種，將下方的“unused parameters”項改為true。如果你確實是因為某些原因需要保留這個參數，則用第二種方法。
好了，用JSLint改進后的代碼如下所示：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | (function ($) {????'use strict';????$.fn.loading = 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) {????????????????tis.html('');????????????} else {????????????????tis.html(concatMsg);????????????}????????});????};}(jQuery)); |
JSLint?指令
你可以通過JSLint指令在你的源代碼中直接定義JSLint變量。這樣，你就不用在頁面上來回操作。如下示例，注釋中定義了jQuery全局變量，并將“unparam”設為true。
| 1 2 3 4 5 6 | /*global jQuery*//*jslint unparam: true */(function ($) {????‘use strict’;…}(jQuery)); |
總結
在這個簡短的例子中，JSLint指出了一些明顯的和一些容易忽視的錯誤。在實際運行代碼之前，通過JSLint幫我們查找一些錯誤可以有效的提高我們的開發效率和代碼質量。如果你真的是認真地想寫出優質的代碼，那么在放到服務器上運行之前先用JSLint檢查一遍吧。JSLint還提供一個獨立的JS文件版本，所以你也可以把它下載下來在線下運行！
譯者：
嚴格模式并不是所有的瀏覽器都支持，這是一個瀏覽器支持統計表。網頁前端可能暫時（甚至很長時間內）還不能遵循嚴格模式，但是在移動開發中顯然采用嚴格模式更佳。不管目前是否能用上，我覺得前端工程師們都應該利用這些工具幫助自己養成良好的編碼習慣，好的習慣會讓你受益匪淺，在這里略矯情略夸張的引用一下電影《鐵娘子》中的一句話：Watch your habits, for they become your character
英文原文：Using JSLint to Refine Your Code，編譯：伯樂在線 -?胡蓉
)
