快捷導(dǎo)航

使用JSLint提高JS代碼質(zhì)量方法分享

更新時(shí)間：2013年12月16日 15:41:13 作者：

這篇文章主要介紹了JSLint提高JS代碼質(zhì)量的方法，有需要的朋友可以參考一下

隨著富 Web 前端應(yīng)用的出現(xiàn)，開發(fā)人員不得不重新審視并重視 JavaScript 語言的能力和使用，拋棄過去那種只靠“復(fù)制 / 粘貼”常用腳本完成簡(jiǎn)單前端任務(wù)的模式。JavaScript 語言本身是一種弱類型腳本語言，具有相對(duì)于 C++ 或 Java 語言更為松散的限制，一切以函數(shù)為中心的函數(shù)式編程思想也為開發(fā)人員提供了更加靈活的語法實(shí)現(xiàn)。然而，這種靈活性在帶來高效的同時(shí)，也成為初學(xué)或者經(jīng)驗(yàn)不足的 JavaScript 開發(fā)人員的噩夢(mèng)。形式各異的代碼風(fēng)格、隱含錯(cuò)誤的代碼行為，嚴(yán)重影響了整體代碼的可讀性和穩(wěn)定性，成為 Web 項(xiàng)目中最為常見問題之一。

因而，我們需要一個(gè)有效的 JavaScript 代碼質(zhì)量工具，以便能及時(shí)發(fā)現(xiàn)并修正 JavaScript 代碼中所隱含的問題，保證代碼交付質(zhì)量。JSLint 作為一個(gè)靈活有效的 JavaScript 代碼質(zhì)量檢測(cè)工具，允許使用者指定滿足其特定應(yīng)用開發(fā)需求的編碼風(fēng)格約定，使得整個(gè)項(xiàng)目的風(fēng)格統(tǒng)一，這種“規(guī)則”（options）驅(qū)動(dòng)的工作方式使得 JSLint 能夠適用于不同的代碼檢測(cè)需求。本文將首先向讀者介紹 JSLint 的基本概念和作用，講解其基于規(guī)則的工作方式，而后通過一個(gè)示例闡明其基本的使用方法，最后介紹如何將 JSLint 整合到 Ant 和 Eclipse 的應(yīng)用過程，以全方面展示如何將 JSLint 在日常開發(fā)任務(wù)中加以運(yùn)用。

什么是 JSLint
JavaScript 作為一門年輕、語法靈活多變且對(duì)格式要求相對(duì)松散的語言，代碼格式的混亂和某些語言特性的不正確使用，往往使得最終交付的產(chǎn)品中包含許多因編碼風(fēng)格約定造成的未預(yù)見的行為或錯(cuò)誤，這種習(xí)慣性的問題如果不及時(shí)指出并修改，往往會(huì)在項(xiàng)目的迭代過程中不斷的重現(xiàn)，嚴(yán)重影響 Web 產(chǎn)品的穩(wěn)定性與安全性。JSLint 正是 Douglas Crockford 同學(xué)為解決此類問題創(chuàng)建的工具，JSLint 除了能指出這些不合理的約定，還能標(biāo)出結(jié)構(gòu)方面的問題。雖然 JSLint 不能保證代碼邏輯一定正確，但卻有助于發(fā)現(xiàn)錯(cuò)誤并教會(huì)開發(fā)人員一些好的編碼實(shí)踐。值得一提的是 JSLint 工具本身也是一段 JavaScript 代碼，它是檢驗(yàn) JavaScript 代碼質(zhì)量的 JavaScript 腳本。JSLint 對(duì) JavaScript 腳本的質(zhì)量檢測(cè)主要包括以下幾個(gè)方面：

•檢測(cè)語法錯(cuò)誤：例如大括號(hào)“{}”的配對(duì)錯(cuò)誤。
•變量定義規(guī)范：例如未定義變量的檢測(cè)。
•代碼格式規(guī)范：例如句末分號(hào)的缺失。
•蹩腳語言特性的使用檢測(cè)：如 eval 和 with 的使用限制。
JSLint 的版本更新一直處于活躍狀態(tài)，截至本文撰寫之時(shí)，JSLint 最新版本的發(fā)布時(shí)間為 2010-10-10。很多主流代碼編輯器均對(duì) JSLint 提供了良好的擴(kuò)展支持，包括 Eclipse、VS2008 等等。

目前，與 JSLint 功能類似的 JavaScript 代碼檢測(cè)工具有很多，包括：YUI Test、Firebug、MS Script Debugger 、CompanionJS 等等，它們中大多數(shù)都是以瀏覽器插件的形式存在于客戶端瀏覽器進(jìn)行 JavaScript 運(yùn)行時(shí)的檢測(cè)和調(diào)試，JSLint 與這些工具的重要區(qū)別在于其更加注重靜態(tài)代碼格式的檢測(cè)，而這也正是當(dāng)前火熱的敏捷開發(fā)中持續(xù)構(gòu)建所需要和提倡的。

認(rèn)識(shí) JSLint 規(guī)則
JSLint 執(zhí)行代碼質(zhì)量檢測(cè)的原理核心在于用戶設(shè)定的規(guī)則集。JSLint 默認(rèn)提供的規(guī)則集包含了 Web 開發(fā)人員多年積累下來的認(rèn)為不好的開發(fā)風(fēng)格，我們可以根據(jù)自己項(xiàng)目的需求選擇構(gòu)建一套特定的規(guī)則。JSLint 將根據(jù)它進(jìn)行對(duì) JavaScript 腳本的掃描工作，并給出相應(yīng)的問題描述信息。規(guī)則的形式體現(xiàn)為多組鍵值對(duì)：[param:option]，以規(guī)則名做鍵，對(duì)規(guī)則調(diào)用與否做值。例如規(guī)則：“plusplus:true”是不允許 ++ 和 -- 運(yùn)算符的出現(xiàn)，“undef:true”是不允許使用未定義的變量。

由于 JSLint 工具本質(zhì)上是一個(gè)普通的 JS 腳本，其運(yùn)行也自然依賴于一個(gè) JS 運(yùn)行引擎，其被引擎加載后會(huì)在內(nèi)存中產(chǎn)生一個(gè)全局 JSLint 函數(shù)對(duì)象，該函數(shù)對(duì)象需要兩個(gè)輸入量：source 和 options，前者用來指定待檢測(cè)的腳本文件被解析后生成的字符串或字符串?dāng)?shù)組，后者則表示用戶自定義的規(guī)則選項(xiàng)。若 options 為空，JSLint 則使用其默認(rèn)的規(guī)則對(duì) source 進(jìn)行掃描檢測(cè)。

整個(gè)檢測(cè)過程就是對(duì)腳本中所含 JSLINT (source, options) 函數(shù)的一次執(zhí)行過程。當(dāng)指定的 source 腳本在 options 條件下檢測(cè)通過，則 JSLint 返回 true，否則返回 false，而這時(shí)則可以通過 JSLINT.errors 對(duì)象獲得詳細(xì)的錯(cuò)誤信息。圖 1 展示了 JSLint 的整個(gè)工作過程。

圖 1. JSLint 工作過程示意圖

如圖所示，規(guī)則集的配置方式有三種：

1.直接通過修改 JSLint.js 源碼來修改默認(rèn)規(guī)則。
2.在 JSLint 函數(shù)運(yùn)行時(shí)，同時(shí)設(shè)置 options 參數(shù)，動(dòng)態(tài)改變其規(guī)則選項(xiàng)（first overwrite）。此方式適用于對(duì)批量 js 文件使用同樣的一組自定義規(guī)則。
3.通過在待檢測(cè)的 js 文件頭部添加注釋類型的規(guī)則，對(duì)單個(gè) js 文件添加適用于該文件代碼的特殊規(guī)則（second overwrite）。此方式適用于對(duì)不同 js 文件設(shè)置特定的檢測(cè)規(guī)則，通常用于在該文件中引入一些全局變量。

您可能感興趣的文章: