隨著富Web 前端應用的出現,開發人員不得不重新審視並重視JavaScript 語言的能力和使用,拋棄過去那種只靠「複製/ 貼上」常用腳本完成簡單前端任務的模式。 JavaScript 語言本身是一種弱型別腳本語言,具有相對於C++ 或Java 語言更為鬆散的限制,一切以函數為中心的函數式程式設計思想也為開發人員提供了更靈活的語法實作。然而,這種彈性在帶來高效率的同時,也成為初學或經驗不足的JavaScript 開發人員的惡夢。形式各異的程式碼風格、隱含錯誤的程式碼行為,嚴重影響了整體程式碼的可讀性和穩定性,成為Web 專案中最常見問題之一。
因而,我們需要一個有效的JavaScript 程式碼品質工具,以便能及時發現並修正JavaScript 程式碼中所隱含的問題,保證程式碼交付品質。 JSLint 作為一個靈活有效的JavaScript 程式碼品質偵測工具,讓使用者可以指定滿足其特定應用開發需求的編碼風格約定,使得整個專案的風格統一,這種「規則」(options)驅動的工作方式使得JSLint 能夠適用於不同的程式碼檢測需求。本文將首先向讀者介紹JSLint 的基本概念和作用,講解其基於規則的工作方式,而後透過一個範例闡明其基本的使用方法,最後介紹如何將JSLint 整合到Ant 和Eclipse 的應用過程,以全方面展示如何將JSLint 在日常開發任務中加以運用。
什麼是JSLint
JavaScript 作為一門年輕、語法靈活多變且對格式要求相對鬆散的語言,程式碼格式的混亂和某些語言特性的不正確使用,往往使得最終交付的產品中包含許多因編碼風格約定造成的未預見的行為或錯誤,這種習慣性的問題如果不及時指出並修改,往往會在專案的迭代過程中不斷的重現,嚴重影響Web 產品的穩定性與安全性。 JSLint 正是Douglas Crockford 同學為解決這類問題所創造的工具,JSLint 除了能指出這些不合理的約定,還能標出結構上的問題。雖然JSLint 不能保證程式碼邏輯一定正確,但卻有助於發現錯誤並教導開發人員一些好的編碼實踐。值得一提的是JSLint 工具本身也是一段JavaScript 程式碼,它是檢驗JavaScript 程式碼品質的JavaScript 腳本。 JSLint 對JavaScript 腳本的品質偵測主要包括以下幾個面向:
•偵測語法錯誤:例如大括號「{}」的配對錯誤。
•變數定義規格:例如未定義變數的偵測。
•程式碼格式規格:例如句末分號的缺失。
•蹩腳語言特性的使用偵測:如eval 和with 的使用限制。
JSLint 的版本更新一直處於活躍狀態,截至本文撰寫之時,JSLint 最新版本的發佈時間為2010-10-10。許多主流程式碼編輯器對JSLint 提供了良好的擴充支持,包括Eclipse、VS2008 等等。
目前,與JSLint 功能類似的JavaScript 程式碼偵測工具有很多,包括:YUI Test、Firebug、MS Script Debugger 、CompanionJS 等等,它們大多數都是以瀏覽器插件的形式存在於用戶端瀏覽器進行JavaScript 運行時的檢測與調試,JSLint 與這些工具的重要區別在於其更注重靜態程式碼格式的檢測,而這也正是當前火熱的敏捷開發中持續建構所需要和提倡的。
認識JSLint 規則
JSLint 執行程式碼品質偵測的原理核心在於使用者設定的規則集。 JSLint 預設提供的規則集包含了Web 開發人員多年累積下來的認為不好的開發風格,我們可以根據自己專案的需求選擇建立一套特定的規則。 JSLint 將根據它進行對JavaScript 腳本的掃描工作,並給出相應的問題描述資訊。規則的形式體現為多組鍵值對:[param:option],以規則名做鍵,對規則呼叫與否做值。例如規則:「plusplus:true」是不允許++ 和-- 運算子的出現,「undef:true」是不允許使用未定義的變數。
由於JSLint 工具本質上是一個普通的JS 腳本,其運行也自然依賴於一個JS 運行引擎,其被引擎加載後會在內存中產生一個全域JSLint 函數對象,該函數對象需要兩個輸入量:source 和options,前者用來指定待偵測的腳本檔案被解析後產生的字串或字串數組,後者則表示使用者自訂的規則選項。若options 為空,JSLint 則使用其預設的規則對source 進行掃描偵測。
整個偵測過程就是對腳本中所含JSLINT (source, options) 函數的一次執行過程。當指定的source 腳本在options 條件下偵測通過,則JSLint 傳回true,否則傳回false,而這時則可透過JSLINT.errors 物件取得詳細的錯誤訊息。圖1 展示了JSLint 的整個工作流程。
圖1. JSLint 工作流程示意圖
如圖所示,規則集的配置方式有三種:
1.直接透過修改JSLint.js 原始碼來修改預設規則。
2.在JSLint 函數運行時,同時設定options 參數,動態改變其規則選項(first overwrite)。此方式適用於對批次js 檔案使用相同的一組自訂規則。
3.透過在待偵測的js 檔案頭部新增註解類型的規則,對單一js 檔案新增適用於該檔案程式碼的特殊規則(second overwrite)。此方式適用於對不同js 檔案設定特定的偵測規則,通常用於在該檔案中引入一些全域變數。