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