由于移動應(yīng)用的盛行和HTML5的廣泛運用，JavaScript正越來越流行。JavaScript受歡迎的部分原因是因為它的靈活便捷，你可以快速上手，它不需要重量級的開發(fā)環(huán)境，也不需要第三方應(yīng)用支持，只要你打開一個文本編輯器，然后保存，***通過網(wǎng)頁瀏覽器運行即可。

但是，對于新手而言，使用JavaScript處處存在陷阱。在一段復(fù)雜的腳本中，JavaScript語言的延展性常常引起怪異的bug。例如，未聲明的局部變量可能會不知不覺修改全局變量。

現(xiàn)在，打開JSLint網(wǎng)站，正如其網(wǎng)站所言，它是“JavaScript代碼質(zhì)量工具”。JSLint的作者是Douglas Crockford，因其對JavaScript（ECMAScript）和JSON的貢獻(xiàn)而著名。

（譯注：Douglas Crockford是 web領(lǐng)域技術(shù)權(quán)威之一，他是JSON、JSLint、JSMin和ADSafe的創(chuàng)造者，也是名著《JavaScript: The Good Parts》（中文版《JavaScript語言精粹》）的作者。撰寫了許多廣為流傳、影響深遠(yuǎn)的技術(shù)文章，包括“JavaScript:世界上最被誤解的語言”。）

JSLint幫助JavaScript程序員在編程過程中遵循一定的編碼規(guī)范。JSLint是以基于嚴(yán)格模式（Strict Mode）為前提，參考第5版ECMAScript標(biāo)準(zhǔn)。與一般模式相比，嚴(yán)格模式下你的代碼需要按照更嚴(yán)格的規(guī)則運行。

（譯注：對嚴(yán)格模式不了解的童鞋，可以參考這兩篇文章《ECMAScript 5.1簡介》《是時候使用JavaScript嚴(yán)謹(jǐn)模式(Strict Mode)提升團隊開發(fā)效率》）

使用JSLint

我們來用JSLint運行一個示例。寫一個簡單的jQuery插件，通過prefix顯示msg接收的信息，如果傳給type的值為false則不顯示prefix。

(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的插件運行還算正常，但當(dāng)你用Firefox或Chrome運行時，會發(fā)現(xiàn)有幾處明顯的錯誤，以及一些不易察覺的問題。與其耗費腦力解決這些問題，不如通過JSLint來幫助我們。將上面這段代碼拷貝至JSLint網(wǎng)站的文本框內(nèi)，然后點擊”JSLint”按鈕，代碼建議和錯誤提示會出現(xiàn)在下方。

JSLint指出的***個錯誤是：丟失“use strict”聲明。這個錯誤表示該函數(shù)未在嚴(yán)格模式下執(zhí)行。為糾正該錯誤，我們在函數(shù)主體的頭部，添加“use strict”語句以啟動嚴(yán)格模式。

'use strict'; 

加入嚴(yán)格模式聲明語句后，再次點擊“JSLint”按鈕，提示丟失“use strict”的錯誤信息將消失?，F(xiàn)在，我們可以繼續(xù)看下一個錯誤。接下來的這個錯誤是關(guān)于空格的問題，鑒于它不能算個真正的錯誤，我們可以放心地忽略它。

你可以將頁面最下方的“messy white space”選項改為true，這樣你就可以保留function關(guān)鍵字后不留空格的寫法。但是現(xiàn)在，我們保留“messy white space”選項的default屬性，因為這個功能也會幫助我們檢查其他空格問題，這個我們之后再說。

同樣需要注意的是，雖然JSLint指出的第二個和第三個錯誤指向同一行代碼，但錯誤點并不一樣。后者JSLint建議在右括號“）”和左大括號“{”之間空一格，現(xiàn)在我們糾正下這個錯誤。

插入空格后，再次點擊“JSLint”按鈕，下一個錯誤出現(xiàn)在第8行，第39個字符處。prefixes對象包含了兩個一模一樣的warning屬性，將第二個warning修改為caution。

這次就不再點擊“JSLint”按鈕，直接看下一個錯誤吧。定義對象的代碼塊的***多了一個逗號。像這類錯誤，Chrome和Firefox這些瀏覽器也許會忽略，但I(xiàn)E就不會那么友好了，所以我們把這個逗號移除掉。

之后的兩個錯誤指向未定義的變量concatMsg。如果一個變量在當(dāng)前作用域中沒有被定義，JavaScript就會全局查找看是否有在別處定義過。若這時你還引入了外部代碼，并碰巧在全局中定義過該變量，那么一旦出錯，你很有可能要抓破頭皮，費盡心力地尋找bug原因。所幸有了JSLint，我們可以將這類錯誤扼殺在搖籃中。

現(xiàn)在糾正這個錯誤，并重構(gòu)代碼。因為concatMsg的默認(rèn)值為msg，所以我們可以將msg先賦給它，待需要時再修改。如下所示，關(guān)于concatMsg的代碼為：

var concatMsg = msg;  
if (type) {  
    concatMsg = prefixes[type];  
} 

繼續(xù)往下，有一個與之前類似的空格問題，糾正它。緊接著，JSLint指出丟失了一個分號（如下圖所示）。JSLint會假設(shè)沒有分號結(jié)尾的命令行永遠(yuǎn)不會被終止。所以，當(dāng)下面出現(xiàn)if時，JSLint認(rèn)為這里應(yīng)該有個分號。盡管根據(jù)語言規(guī)范，結(jié)束的分號可有可無，但是加上它是一個良好的習(xí)慣。因為這類不良代碼在大項目協(xié)作中很容易引起莫名的bug。所以平常編碼過程中，應(yīng)順手避免此類問題。

接下來又是一個很好的錯誤例子。JavaScript中，有‘相等’（==）和嚴(yán)格的‘相等’（===）比較。在這段案例代碼中，如果不采用嚴(yán)格‘相等’比較，那么不管msg為空字符串還是false值，if內(nèi)都為true。所以，這里我們采用嚴(yán)格‘相等’比較。

好了，讓我們再次點擊“JSLint”按鈕吧。如下圖所示，錯誤出現(xiàn)在第10行，JSLint認(rèn)為合并變量聲明也是一個良好的編碼規(guī)范。盡管concatMsg變量的聲明緊隨prefixes之后，但JSLint認(rèn)為用逗號隔開，在一個命令語句中完成變量聲明更好。

下一個錯誤則又是關(guān)于格式的問題。咋一看，不就是多空了一格嘛，實在是太雞毛蒜皮了。但是，如果在大量的腳本中，這種縮進(jìn)問題搞不好也會引起難以發(fā)現(xiàn)的bug。所以，為了代碼的統(tǒng)一性，我們還是往前移一格吧。

下一個問題又和之前遇到的類似，但形式不一樣。JavaScript的函數(shù)也可歸屬為變量，所以和其他變量賦值語句一樣，JSLint希望在末尾加個分號。

***，如下所示，有兩個錯誤出現(xiàn)在***一行。***個問題，JSLint建議將閉括號移至jQuery之后，因為這樣不會使閉包函數(shù)定義產(chǎn)生歧義。第二個問題，JSLint認(rèn)為jQuery變量不存在。但事實上你可能在實際頁面中已引入了jQuery文件，所以我們可以在頁面最下面的文本框內(nèi)輸入 “jQuery”來解決這個問題（譯者：JSLint Directive上面的文本框）。

再次運行JSLint，它提示該函數(shù)需要接收三個參數(shù)。但是在本示例中，我們從未使用過第三個參數(shù)。因此，此處我們有兩種方法解決這個問題。***種，刪除第三個參數(shù)。第二種，將下方的“unused parameters”項改為true。如果你確實是因為某些原因需要保留這個參數(shù)，則用第二種方法。

好了，用JSLint改進(jìn)后的代碼如下所示：

(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”設(shè)為true。

/*global jQuery*/ 
/*jslint unparam: true */ 
(function ($) {  
    ‘use strict’;  
…  
}(jQuery)); 

總結(jié) 

在這個簡短的例子中，JSLint指出了一些明顯的和一些容易忽視的錯誤。在實際運行代碼之前，通過JSLint幫我們查找一些錯誤可以有效的提高我們的開發(fā)效率和代碼質(zhì)量。如果你真的是認(rèn)真地想寫出優(yōu)質(zhì)的代碼，那么在放到服務(wù)器上運行之前先用JSLint檢查一遍吧。JSLint還提供一個獨立的 JS文件版本，所以你也可以把它下載下來在線下運行！

———————————————–我是分割線———————————————

譯者：

嚴(yán)格模式并不是所有的瀏覽器都支持，這是一個瀏覽器支持統(tǒng)計表。網(wǎng)頁前端可能暫時（甚至很長時間內(nèi)）還不能遵循嚴(yán)格模式，但是在移動開發(fā)中顯然采用嚴(yán)格模式更佳。不管目前是否能用上，我覺得前端工程師們都應(yīng)該利用這些工具幫助自己養(yǎng)成良好的編碼習(xí)慣，好的習(xí)慣會讓你受益匪淺，在這里略矯情略夸張的引用一下電影《鐵娘子》中的一句話：Watch your habits, for they become your character

英文原文：Using JSLint to Refine Your Code

譯文鏈接：http://blog.jobbole.com/29583/