JavaScript Eclipse 插件助您一臂之力，提高 JavaScript 生產(chǎn)力指日可待
JavaScript Development Toolkit（JSDT）是一種開(kāi)放源碼插件，它將健壯的 JavaScript 編程工具引入到 Eclipse 平臺(tái)中。JSDT 使開(kāi)發(fā)更加流暢、簡(jiǎn)化了編碼并提高了純 JavaScript 源文件和 HTML 內(nèi)置的 JavaScript 的生產(chǎn)力。
JavaScript 開(kāi)發(fā)并不容易。瀏覽器兼容性參差不齊、文檔非常糟糕、工具貧乏，這些因素使問(wèn)題進(jìn)一步惡化。幸運(yùn)的是，隨著最近針對(duì) Eclipse 的插件集 JavaScript Development Toolkit（JSDT）的發(fā)布，工具匱乏的局面有望得到改善。
Eclipse 是一個(gè)開(kāi)源的 IDE 框架，具有提高擴(kuò)展性和靈活性的架構(gòu)。JSDT 作為插件在 Eclipse 中運(yùn)行。在 Eclipse 中，JavaScript 并不是什么新鮮的概念，因?yàn)橐呀?jīng)可以從其他插件獲得 HTML 和一些 JavaScript 支持，但是 JSDT 的獨(dú)特之處在于其所提供的工具的健壯性和復(fù)雜性，這可顯著提高 Web 開(kāi)發(fā)的生產(chǎn)力。
JSDT 提供的許多特性和核心設(shè)計(jì)都可以在 Java Development Toolkit（JDT）中找到。JSDT 將要代替 Web Tools Platform V3.0 發(fā)行版中當(dāng)前的 JavaScript 編輯器。
IDE 和 JavaScript
您可能想知道為什么 JavaScript IDE 會(huì)如此流行。隨著 Web 2.0 的流行以及大量開(kāi)發(fā)人員都熱衷于在博客和社區(qū)頁(yè)面中使用 JavaScript，大量新的 JavaScript 工具不斷出現(xiàn)。盡管如此，Notepad 和瀏覽器的 Refresh 按鈕仍然是大多數(shù)程序員首選的 JavaScript 開(kāi)發(fā)環(huán)境。
問(wèn)題在于 JavaScript 語(yǔ)言的解釋性。與 Java™ 或 C 語(yǔ)言不同，JavaScript 是一種松類(lèi)型的語(yǔ)言，并且很難實(shí)現(xiàn)精確建模。對(duì)于較為正式的語(yǔ)言，需要優(yōu)先考慮已編譯代碼的效率，并且對(duì)語(yǔ)言的靈活性有所限制。JavaScript 的目標(biāo)則不一樣。各種因素試圖分化趨向同一個(gè)平臺(tái)的開(kāi)發(fā)人員，這導(dǎo)致了語(yǔ)言的不一致性。從工具和開(kāi)發(fā)的角度來(lái)看，這些不一致性使問(wèn)題更加復(fù)雜。
瀏覽器并不是惟一的問(wèn)題。面向?qū)ο蟮?JavaScript 是一種補(bǔ)充而不是關(guān)注的焦點(diǎn)。Ajax 工具箱努力使 JavaScript 朝面向?qū)ο蠓矫孓D(zhuǎn)變 — 但是各自采取不同的方式。這可能會(huì)使標(biāo)識(shí)對(duì)象和類(lèi)結(jié)構(gòu)變得很困難。這種語(yǔ)言有幾個(gè)嚴(yán)重的漏洞，程序員利用它們實(shí)現(xiàn)一些使用其他方式難以實(shí)現(xiàn)的技巧，這使問(wèn)題更加嚴(yán)重（或者更好，取決于您詢(xún)問(wèn)的對(duì)象）。其中一個(gè)例子是將主要的代碼塊封裝到一個(gè) evalf(..) 函數(shù)中，使它只在運(yùn)行時(shí)有效。我們目前仍然在克服這個(gè)問(wèn)題，以便在 JSDT 中精確建模。
現(xiàn)有的 JavaScript IDE
目前可以使用一些并不完整的 JavaScript 工具。但是很多流行的工具還不能提供真正的上下文感知內(nèi)容幫助，因?yàn)樗鼈內(nèi)鄙僬嬲?JavaScript 語(yǔ)言建模機(jī)制。在模型較少的 IDE 中，通過(guò)使用靜態(tài)平面文件列出可用的類(lèi)型，可以實(shí)現(xiàn)內(nèi)容完成和工具功能。這些類(lèi)型根據(jù)輸入的部分字符動(dòng)態(tài)調(diào)整，并且通常不會(huì)選擇代碼中定義的對(duì)象成員。內(nèi)容完成對(duì)上下文不敏感，因?yàn)槿绻麤](méi)有模型的話(huà)，可實(shí)現(xiàn)的功能將受到很大限制。
如果沒(méi)有語(yǔ)言模型，則很難或者不可能將代碼放入到上下文中。由于很多編程元素都依賴(lài)于代碼的上下文，因此使用工具建立上下文十分重要。缺少模型和代碼上下文的 IDE 同樣也會(huì)缺少充分的類(lèi)型解析和驗(yàn)證、作用域、可視性，或者其他任何對(duì)簡(jiǎn)化開(kāi)發(fā)非常重要的良好驗(yàn)證功能。
JSDT 設(shè)計(jì)
圖 1. JSDT 語(yǔ)言抽象棧
JSDT 對(duì) JavaScript 語(yǔ)言建模并實(shí)時(shí)隱含類(lèi)結(jié)構(gòu)，這通過(guò)一種全新的方式來(lái)實(shí)現(xiàn)。首先，構(gòu)建基本的語(yǔ)言元素。其次，推理引擎或引擎幫助填補(bǔ)所有類(lèi)結(jié)構(gòu)和語(yǔ)言差異。
基本語(yǔ)言模型
可以將推理和建模流程看作一個(gè)操作棧。模型的開(kāi)始部分是 JavaScript 源代碼。通過(guò)使用類(lèi)似 Eclipse JDT 的引擎，將源代碼轉(zhuǎn)換為私有的語(yǔ)言模型。語(yǔ)言的純模型遵守 ECMA-3 標(biāo)準(zhǔn)。
類(lèi)型和類(lèi)推理
對(duì) JavaScript 語(yǔ)言建模后，下一步是管理類(lèi)型和類(lèi)推理。許多基于 JavaScript 的工具箱（例如 Dojo、Rico、Prototype）通過(guò)自己的技術(shù)使 JavaScript 面向?qū)ο缶幊谈臃奖恪SDT 使用定制的、工具箱感知的推理引擎在工具箱內(nèi)部識(shí)別類(lèi)和類(lèi)型結(jié)構(gòu)。這些類(lèi)和類(lèi)型隨后可以添加到語(yǔ)言模型中。
公開(kāi)模型
最后，將私有模型及其推理部分轉(zhuǎn)換為公共語(yǔ)言模型。公共語(yǔ)言模型可用于源代碼、重構(gòu)和 as-you-type 工具。如果其中一種工具需要修改一些 JavaScript 源代碼，就得先在公共模型中進(jìn)行修改，并最終轉(zhuǎn)換到 JavaScript 源代碼。
管理變量和成員作用域
即使語(yǔ)言模型為描述 JavaScript 源代碼和上下文提供了基礎(chǔ)，還需要另外一個(gè)重要因素：環(huán)境上下文。JSDT 必須在運(yùn)行 JavaScript 的全局作用域時(shí)建立可用的變量和類(lèi)型。這些變量和類(lèi)型根據(jù) JavaScript 的運(yùn)行時(shí)環(huán)境而有所不同。當(dāng) JavaScript 在 Web 瀏覽器上下文中運(yùn)行時(shí)，對(duì)象、類(lèi)型、表示屏幕數(shù)據(jù)的字段以及瀏覽器對(duì)象在全局作用域中都是可用的。如果代碼是針對(duì)其他內(nèi)容而不是瀏覽器，那么整個(gè)對(duì)象集可能會(huì)不同。
圖 2. JSDT 庫(kù)配置
JSDT 使用庫(kù)機(jī)制管理項(xiàng)目中的通用對(duì)象、變量和類(lèi)型。可以將庫(kù)添加到項(xiàng)目中，以提供特定于用戶(hù)目標(biāo)運(yùn)行時(shí)環(huán)境的對(duì)象和變量集。如果存在兩個(gè)定義沖突成員的庫(kù)，則在相應(yīng)的用戶(hù)接口中聚合并注釋這些成員。這有助于創(chuàng)建在瀏覽器或環(huán)境之間通用的方法。
為流行的瀏覽器預(yù)打包庫(kù)非常簡(jiǎn)單。庫(kù)被捆綁在一個(gè)插件中，該插件包含有定義對(duì)象和類(lèi)型的 JavaScript 源文件。當(dāng) JSDT 對(duì)源代碼編輯器中打開(kāi)的文件進(jìn)行建模時(shí)，它首先對(duì)文件的源代碼建模，然后將項(xiàng)目的庫(kù)集合中的所有源文件添加到模型。庫(kù)源文件永遠(yuǎn)不會(huì)進(jìn)行驗(yàn)證，只用于定義對(duì)象結(jié)構(gòu)、附加在懸浮式幫助和內(nèi)容完成中可見(jiàn)的 JsDoc。
雖然庫(kù)的主要功能是管理 JavaScript 的運(yùn)行時(shí)上下文，但是它還提供了另一個(gè)重要特性 — 處理源文件交叉引用。純 JavaScript 不具備顯式的 include 函數(shù)。開(kāi)發(fā)人員的一個(gè)不良習(xí)慣就是將函數(shù)散布到多個(gè)源文件中。庫(kù)配置頁(yè)面可以幫助管理源文件之間的交叉項(xiàng)目可見(jiàn)性。如果某個(gè)項(xiàng)目文件夾被標(biāo)記為一個(gè)源文件，那么該文件夾中的所有 JavaScript 將包括在全局作用域中。使用 exclude 模式可以限制文件夾。
工具
撇開(kāi)較高層的設(shè)計(jì)不談，我們仔細(xì)看看這些特性。JSDT 的一些可視性較弱但非常重要的特性包括：相同文字突出顯示、自動(dòng)閉合大括號(hào)（以及圓括號(hào)、引號(hào)）以及自動(dòng)縮進(jìn)等。因此可以說(shuō)，“只要是良好 IDE 應(yīng)該具備的，JSDT 都提供支持”。
圖內(nèi)容幫助
圖 3. 內(nèi)容幫助
內(nèi)容完成可以通過(guò) Ctrl+Space 鍵任意調(diào)用。圖 3 展示了內(nèi)容幫助調(diào)用文檔對(duì)象。內(nèi)容完成對(duì)上下文敏感，并且基于全局作用域和 JavaScript 模型。完成條目顯示字段名、字段類(lèi)型和字段的聲明類(lèi)型。
檢測(cè)和糾正錯(cuò)誤
如果 IDE 可以主動(dòng)確定代碼錯(cuò)誤，它將非常有用。JSDT 可以檢測(cè)三種主要錯(cuò)誤類(lèi)型：語(yǔ)法/語(yǔ)言錯(cuò)誤、類(lèi)型/字段/方法可視性、流或邏輯錯(cuò)誤。所有的錯(cuò)誤警告級(jí)別都可以通過(guò)首選項(xiàng)頁(yè)面進(jìn)行單獨(dú)配置。
圖 4. 未解析的方法
JSDT 試圖解析對(duì)象的所有字段和方法。未解析的方法則標(biāo)記為錯(cuò)誤。
圖 5. 語(yǔ)法錯(cuò)誤
JSDT 還可以查找并標(biāo)記語(yǔ)法錯(cuò)誤。下面的 for() 語(yǔ)句丟失了一個(gè)分號(hào)。
圖 6. 流分析
圖 6 演示了流分析。由于 return 語(yǔ)句后面的所有代碼都不能執(zhí)行，因此將其標(biāo)記為錯(cuò)誤。
圖 7. 快速修復(fù)
一些錯(cuò)誤具有快速修復(fù)選項(xiàng)。在圖 7 中，當(dāng)用戶(hù)單擊未解析變量 formyValue 旁邊的錯(cuò)誤標(biāo)記時(shí)，JSDT 將顯示一些糾正錯(cuò)誤的選項(xiàng)。
代碼格式化
源代碼有時(shí)會(huì)混亂。您可能期望易于閱讀、結(jié)構(gòu)良好、格式化良好的代碼。這就需要在進(jìn)行開(kāi)發(fā)和調(diào)試時(shí)對(duì)代碼進(jìn)行格式化。JSDT 支持許多 as-you-type 格式化特性，比如可配置自動(dòng)縮進(jìn)和字符成對(duì)匹配。這些特性都有助于加快開(kāi)發(fā)和提高可讀性。
如果您收到的代碼非常混亂，該怎么辦？只需要單擊一下鼠標(biāo)，JSDT 代碼格式化程序就可以整理并重新格式化混亂的 JavaScript 代碼。格式化引擎是高度可配置的，因此可以導(dǎo)出配置供團(tuán)隊(duì)共享。
其他 JSDT 特性
上面列出的僅是 JSDT 支持的特性的一部分。下面列出非常簡(jiǎn)單但必須具備的 JSDT 特性：
- 語(yǔ)法突出顯示
- 折疊/行號(hào)
- 完整描述、顯示類(lèi)、函數(shù)和字段
- 突出顯示并檢查大括號(hào)/圓括號(hào)匹配
- 自動(dòng)完成大括號(hào)、圓括號(hào)和縮進(jìn)
- 標(biāo)記出現(xiàn)位置
- 注釋切換（行或塊）
- 生成元素 JsDoc
- 用 do，for，try/catch，while 包圍
- 用戶(hù)可配置的完成模板
- 提取函數(shù)/修改函數(shù)簽名
- 縮排糾正
- 打開(kāi)聲明
- 開(kāi)放類(lèi)型結(jié)構(gòu)
- 開(kāi)放調(diào)用結(jié)構(gòu)
- 可定制的代碼格式化
- 全搜索
- 重構(gòu)/重命名/移動(dòng)
- 斷點(diǎn)支持
- 使用 JsDoc 為 Firefox、Internet Explorer 和 ECMA-3 定義瀏覽器庫(kù)
- 通過(guò) JsDoc + JavaScript 原型定義支持用戶(hù)定義的庫(kù)
- 庫(kù)映像支持
- ATF Project 提供的調(diào)試支持
結(jié)束語(yǔ)
如果需要一種免費(fèi)的 Web 開(kāi)發(fā)環(huán)境，請(qǐng)選擇 Eclipse。由于新增了 JSDT，Eclipse 的 JavaScript 能力超越了市場(chǎng)上其他同類(lèi)產(chǎn)品。開(kāi)放源碼項(xiàng)目促成了 JSDT 的快速發(fā)展，JSDT 將像 JavaScript 一樣快速地演進(jìn)。
參考資料
學(xué)習(xí)
獲得產(chǎn)品和技術(shù)
討論
關(guān)于作者
 |
|
|
|
Bradley Childs 2004 年畢業(yè)于 Texas A&M University。他在 IBM 從事中間件開(kāi)發(fā)，后來(lái)又轉(zhuǎn)到新興技術(shù)方面。他和 Phil Berkland 密切合作開(kāi)發(fā) JSDT。他在 Ajax Tooling Framework 項(xiàng)目社區(qū)中非常活躍。
|
http://www.spitv.net
http://goku.spitv.net
http://sxin99.com
posted on 2008-07-18 22:58
GoKu 閱讀(1947)
評(píng)論(5) 編輯 收藏