建站
咨詢
售后
建站咨詢
新聞中心
由于移動應用的盛行和HTML5的廣泛運用，JavaScript正越來越流行。JavaScript受歡迎的部分原因是因為它的靈活便捷，你可以快速上手，它不需要重量級的開發(fā)環(huán)境，也不需要第三方應用支持，只要你打開一個文本編輯器，然后保存，***通過網(wǎng)頁瀏覽器運行即可。
創(chuàng)新互聯(lián)服務項目包括洪雅網(wǎng)站建設、洪雅網(wǎng)站制作、洪雅網(wǎng)頁制作以及洪雅網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，洪雅網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到洪雅省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！
但是，對于新手而言，使用JavaScript處處存在陷阱。在一段復雜的腳本中，JavaScript語言的延展性常常引起怪異的bug。例如，未聲明的局部變量可能會不知不覺修改全局變量。
現(xiàn)在，打開JSLint網(wǎng)站，正如其網(wǎng)站所言，它是“JavaScript代碼質(zhì)量工具”。JSLint的作者是Douglas Crockford，因其對JavaScript（ECMAScript）和JSON的貢獻而著名。
（譯注：Douglas Crockford是 web領(lǐng)域技術(shù)權(quán)威之一，他是JSON、JSLint、JSMin和ADSafe的創(chuàng)造者，也是名著《JavaScript: The Good Parts》（中文版《JavaScript語言精粹》）的作者。撰寫了許多廣為流傳、影響深遠的技術(shù)文章，包括“JavaScript:世界上最被誤解的語言”。）
JSLint幫助JavaScript程序員在編程過程中遵循一定的編碼規(guī)范。JSLint是以基于嚴格模式（Strict Mode）為前提，參考第5版ECMAScript標準。與一般模式相比，嚴格模式下你的代碼需要按照更嚴格的規(guī)則運行。
（譯注：對嚴格模式不了解的童鞋，可以參考這兩篇文章《ECMAScript 5.1簡介》《是時候使用JavaScript嚴謹模式(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的插件運行還算正常，但當你用Firefox或Chrome運行時，會發(fā)現(xiàn)有幾處明顯的錯誤，以及一些不易察覺的問題。與其耗費腦力解決這些問題，不如通過JSLint來幫助我們。將上面這段代碼拷貝至JSLint網(wǎng)站的文本框內(nèi)，然后點擊”JSLint”按鈕，代碼建議和錯誤提示會出現(xiàn)在下方。
JSLint指出的***個錯誤是：丟失“use strict”聲明。這個錯誤表示該函數(shù)未在嚴格模式下執(zhí)行。為糾正該錯誤，我們在函數(shù)主體的頭部，添加“use strict”語句以啟動嚴格模式。
- 'use strict';
加入嚴格模式聲明語句后，再次點擊“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這些瀏覽器也許會忽略，但IE就不會那么友好了，所以我們把這個逗號移除掉。
之后的兩個錯誤指向未定義的變量concatMsg。如果一個變量在當前作用域中沒有被定義，JavaScript就會全局查找看是否有在別處定義過。若這時你還引入了外部代碼，并碰巧在全局中定義過該變量，那么一旦出錯，你很有可能要抓破頭皮，費盡心力地尋找bug原因。所幸有了JSLint，我們可以將這類錯誤扼殺在搖籃中。
現(xiàn)在糾正這個錯誤，并重構(gòu)代碼。因為concatMsg的默認值為msg，所以我們可以將msg先賦給它，待需要時再修改。如下所示，關(guān)于concatMsg的代碼為：
- var concatMsg = msg;
- if (type) {
- concatMsg = prefixes[type];
- }
繼續(xù)往下，有一個與之前類似的空格問題，糾正它。緊接著，JSLint指出丟失了一個分號（如下圖所示）。JSLint會假設沒有分號結(jié)尾的命令行永遠不會被終止。所以，當下面出現(xiàn)if時，JSLint認為這里應該有個分號。盡管根據(jù)語言規(guī)范，結(jié)束的分號可有可無，但是加上它是一個良好的習慣。因為這類不良代碼在大項目協(xié)作中很容易引起莫名的bug。所以平常編碼過程中，應順手避免此類問題。
接下來又是一個很好的錯誤例子。JavaScript中，有‘相等’（==）和嚴格的‘相等’（===）比較。在這段案例代碼中，如果不采用嚴格‘相等’比較，那么不管msg為空字符串還是false值，if內(nèi)都為true。所以，這里我們采用嚴格‘相等’比較。
好了，讓我們再次點擊“JSLint”按鈕吧。如下圖所示，錯誤出現(xiàn)在第10行，JSLint認為合并變量聲明也是一個良好的編碼規(guī)范。盡管concatMsg變量的聲明緊隨prefixes之后，但JSLint認為用逗號隔開，在一個命令語句中完成變量聲明更好。
下一個錯誤則又是關(guān)于格式的問題。咋一看，不就是多空了一格嘛，實在是太雞毛蒜皮了。但是，如果在大量的腳本中，這種縮進問題搞不好也會引起難以發(fā)現(xiàn)的bug。所以，為了代碼的統(tǒng)一性，我們還是往前移一格吧。
下一個問題又和之前遇到的類似，但形式不一樣。JavaScript的函數(shù)也可歸屬為變量，所以和其他變量賦值語句一樣，JSLint希望在末尾加個分號。
***，如下所示，有兩個錯誤出現(xiàn)在***一行。***個問題，JSLint建議將閉括號移至jQuery之后，因為這樣不會使閉包函數(shù)定義產(chǎn)生歧義。第二個問題，JSLint認為jQuery變量不存在。但事實上你可能在實際頁面中已引入了jQuery文件，所以我們可以在頁面最下面的文本框內(nèi)輸入 “jQuery”來解決這個問題（譯者：JSLint Directive上面的文本框）。
再次運行JSLint，它提示該函數(shù)需要接收三個參數(shù)。但是在本示例中，我們從未使用過第三個參數(shù)。因此，此處我們有兩種方法解決這個問題。***種，刪除第三個參數(shù)。第二種，將下方的“unused parameters”項改為true。如果你確實是因為某些原因需要保留這個參數(shù)，則用第二種方法。
好了，用JSLint改進后的代碼如下所示：
- (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。
- /*global jQuery*/
- /*jslint unparam: true */
- (function ($) {
- ‘use strict’;
- …
- }(jQuery));
總結(jié)
在這個簡短的例子中，JSLint指出了一些明顯的和一些容易忽視的錯誤。在實際運行代碼之前，通過JSLint幫我們查找一些錯誤可以有效的提高我們的開發(fā)效率和代碼質(zhì)量。如果你真的是認真地想寫出優(yōu)質(zhì)的代碼，那么在放到服務器上運行之前先用JSLint檢查一遍吧。JSLint還提供一個獨立的 JS文件版本，所以你也可以把它下載下來在線下運行！
———————————————–我是分割線———————————————
譯者：
嚴格模式并不是所有的瀏覽器都支持，這是一個瀏覽器支持統(tǒng)計表。網(wǎng)頁前端可能暫時（甚至很長時間內(nèi)）還不能遵循嚴格模式，但是在移動開發(fā)中顯然采用嚴格模式更佳。不管目前是否能用上，我覺得前端工程師們都應該利用這些工具幫助自己養(yǎng)成良好的編碼習慣，好的習慣會讓你受益匪淺，在這里略矯情略夸張的引用一下電影《鐵娘子》中的一句話：Watch your habits, for they become your character
英文原文：Using JSLint to Refine Your Code
譯文鏈接：http://blog.jobbole.com/29583/
網(wǎng)站標題：用JSLint精煉提升JavaScript代碼
分享路徑：http://www.dlmjj.cn/article/djhspce.html
