JavaScript調(diào)試器軟件架構(gòu)

王婷婷　申啟杰

摘 要 JavaScript編程變得越來越重要，一個獨(dú)立運(yùn)行的輕量的JavaScript調(diào)試器工具成為許多Web應(yīng)用開發(fā)人員迫切需要的一種工具.采用基于C++的V8引擎作為調(diào)試器的腳本解釋器，構(gòu)建出包含編輯模塊、結(jié)果顯示模塊、JavaScript模塊三個模塊的JavaScript調(diào)試器.其中JavaScript模塊又包含JavaScript引擎、代碼檢查器、參數(shù)配置器、代碼壓縮器、代碼輔助五個子模塊.使用委派的信息交互方式來實(shí)現(xiàn)模塊間的信息傳遞，使提出的調(diào)試器具有簡便易用、突出重點(diǎn)、容錯高的軟件界面.

關(guān)鍵詞 JavaScript編程；C#語言；V8引擎；JavaScript調(diào)試器；委派；軟件界面

中圖分類號 TP311 文獻(xiàn)標(biāo)識碼 A 文章編號 1000-2537（2014）06-0088-05

Abstract JavaScript programming is becoming increasingly important. An independent-running lightweight JavaScript debugger has become an important tool for Web application developers. The JavaScript debugger three modules， namely the editing module， the result displaying module and the JavaScript module is constructed by the script interpreter which adopts v8 engine based on C# language as debugger. Among them， the JavaScript module includes five submodules such as JavaScript engine， code checker， parameters configuration， code compressors and code assistance. Using the delegation information-interacted means to achieve information transmission between modules， the established debuger owns a software interface with qualities as using simply and easily， highlighting the keys and high fault tolerance.

Key words JavaScript programming； C# language； V8 engine； JavaScript debugger； delegation； software interface

當(dāng)前，基于Web瀏覽器的應(yīng)用越來越受到用戶的喜愛和開發(fā)商的重視，而越來越多的成熟用戶對Web應(yīng)用的易用性提出新的高要求，這就迫使開發(fā)商不斷地改進(jìn)應(yīng)用.例如，使用JavaScript代碼控制Web頁面的展現(xiàn)；使用AJAX技術(shù)改善Web頁面的控制等等.這些都使得作為Web應(yīng)用的開發(fā)人員不得不去學(xué)習(xí)并使用JavaScript語言編寫應(yīng)用程序.

提供JavaScript代碼調(diào)試的工具目前主要分為兩類：第一類工具是與大型的IDE工具集成的調(diào)試工具，如微軟的InterDev， Visual Studio. NET 2003/2005，Eclipse上的HTML編輯器插件，NetBeans上的HTML編輯器等等；第二類工具是作為瀏覽器的一個插件的調(diào)試工具，如FireFox瀏覽器上的FireBug插件[1-2].這兩類工具不同的是：第一類不能對JavaScript代碼進(jìn)行單步調(diào)試、設(shè)置斷點(diǎn)等代碼的跟蹤功能.相同的地方就是：為了調(diào)試JavaScript代碼，不得不啟動應(yīng)用自身，從而占用大量不必要的系統(tǒng)內(nèi)存資源.

盡管JavaScript的編程變得越來越重要，目前還沒有真正獨(dú)立的JavaScript調(diào)試工具.因此，一個獨(dú)立運(yùn)行的輕量的調(diào)試器工具成為許多Web應(yīng)用開發(fā)人員迫切需要的一種工具.它將使得Web應(yīng)用的開發(fā)人員能更好地調(diào)試JavaScript代碼，從而減輕開發(fā)的成本、提高開發(fā)工作的效率.

筆者采用C#語言構(gòu)建了一個獨(dú)立的、輕量的JavaScript代碼調(diào)試工具.所謂獨(dú)立性，是指該JavaScript代碼調(diào)試工具無須與現(xiàn)在的IDE和Web瀏覽器結(jié)合，它是一個獨(dú)立的應(yīng)用；所謂輕量級，是指該JavaScript代碼調(diào)試工具只占用系統(tǒng)很少的資源.該JavaScript代碼調(diào)試工具提供如下主要功能為：（1）對JavaScript代碼的單步調(diào)試；（2）設(shè)置斷點(diǎn)；（3）取消斷點(diǎn)；（4）跟蹤指定的變量；（5）定位出錯代碼位置.本文主要介紹該JavaScript代碼調(diào)試工具的軟件架構(gòu)思想.

JavaScript調(diào)試器分為3個模塊：編輯模塊，結(jié)果顯示模塊，JavaScript模塊[3-4].整體架構(gòu)如圖1所示.

在JavaScript調(diào)試器中，編輯模塊負(fù)責(zé)編輯功能，包括新建文檔、打開文檔、保存、另存為、剪切、復(fù)制、粘貼、查找、撤銷、重做、跳轉(zhuǎn)到指定行列、放大、縮小等基本功能.編輯模塊采用窗體控制器對多個編輯窗口進(jìn)行管理和控制，支持多文檔的打開和編輯.

JavaScript模塊是JavaScript調(diào)試器的核心，包括JavaScript引擎、代碼檢查器、參數(shù)配置器、代碼壓縮器、代碼輔助5個子模塊[5-7].

JavaScript調(diào)試器的結(jié)果顯示模塊以列表的形式顯示當(dāng)前JavaScript代碼的錯誤.結(jié)果顯示模塊分析代碼檢查器的檢查結(jié)果，顯示錯誤總數(shù)及錯誤明細(xì)，錯誤明細(xì)會細(xì)致顯示出錯的行號、字符位置、錯誤描述.

2 JavaScript模塊架構(gòu)

JavaScript模塊是軟件的核心，JavaScript模塊包括JavaScript引擎、代碼檢查器、參數(shù)配置器、代碼壓縮器、代碼輔助5大子模塊[8-9]，如圖2所示.

2.1 JavaScript調(diào)試器的C#開發(fā)語言和V8引擎

JavaScript引擎是JavaScript代碼執(zhí)行的解釋器[10-11].目前，國際上開源的JavaScript引擎是Mozilla公司的Rhino和Google公司的V8[12-14].Rhino是用純 Java 實(shí)現(xiàn)的開源 JavaScript 引擎，F(xiàn)irefox瀏覽器采用了該引擎；而V8引擎則是用C++開發(fā)的開源引擎，用于Chrome瀏覽器上[15].Rhino引擎和V8引擎都為客戶端提供了JavaScript腳本執(zhí)行能力.它們都是開源的引擎，能很方便地將JavaScript腳本嵌入到程序中.

由于本軟件使用C#進(jìn)行開發(fā)，所以設(shè)計者采用基于C++的V8引擎作為調(diào)試器的腳本解釋器，并用C#把V8引擎封裝起來，作為一個獨(dú)立的運(yùn)行模塊.通過向CLI提供接口，使得調(diào)試器的其他部件能夠通過C#函數(shù)直接調(diào)用V8引擎.封裝后的V8引擎提供了C#語言到JavaScript語言的直接映射，能夠通過C#語言直接對JavaScript變量賦值；能夠獲取運(yùn)行中的JavaScript變量的值；也能夠直接獲得JavaScript腳本的運(yùn)行結(jié)果.

2.2 JavaScript調(diào)試器的代碼檢查器

代碼檢查器是JSLint標(biāo)準(zhǔn)的封裝，JSLint是JavaScript驗(yàn)證工具，它定義了一組比歐洲計算機(jī)制造商協(xié)會（ECMA）定義更為嚴(yán)格的編碼約定，可以掃描JavaScript源代碼來查找問題.如果JSLint發(fā)現(xiàn)一個問題，便會顯示描述這個問題的消息，并指出錯誤在源代碼中的大致位置.代碼檢查器封裝了JSLint，對外開放3個接口：（1）參數(shù)配置接口，可以接受參數(shù)配置器設(shè)置的調(diào)試信息；（2）代碼解釋接口，用于連接JavaScript引擎，將JavaScript提交到引擎中執(zhí)行；（3）結(jié)果輸出接口，可以格式化輸出錯誤信息（包括出錯的行、字符、錯誤描述），供結(jié)果顯示模塊進(jìn)行顯示.

2.3 JavaScript調(diào)試器的代碼壓縮器

代碼壓縮器使用了YUICompressor對JavaScript代碼進(jìn)行壓縮處理.用戶在編輯JavaScript語言時，應(yīng)當(dāng)做到格式清晰、注釋清楚、變量含義明確.但是這樣會導(dǎo)致JavaScript文件的體積變大，不利于網(wǎng)絡(luò)的傳輸.于是很有必要對編寫的代碼進(jìn)行代碼壓縮，實(shí)現(xiàn)去除注釋、去除空格、去除換行、替換長的函數(shù)或變量名等操作，將大而松散的JavaScript文件變得小巧而緊湊.

2.4 JavaScript調(diào)試器的參數(shù)配置器

參數(shù)配置器主要用于配置整個JavaScript模塊的參數(shù)，包括代碼檢查器的參數(shù)、壓縮器的參數(shù)、腳本檢查超時時間等.這些配置參數(shù)會以xml配置文件的形式保存在本地，當(dāng)程序執(zhí)行時，從xml配置文件讀取配置信息，存儲在程序的臨時變量中，以方便程序快速調(diào)用.當(dāng)使用參數(shù)配置器進(jìn)行參數(shù)配置后，參數(shù)配置器一方面將配置結(jié)果存儲到xml配置文件，另一方面更新臨時變量的配置值，使配置能夠馬上生效.

參數(shù)配置器配置界面如圖3所示.

2.5 JavaScript調(diào)試器的代碼輔助子模塊

代碼輔助子模塊提供JavaScript編輯窗的代碼折疊、語法高亮、代碼片段、代碼縮進(jìn)功能.代碼輔助模塊的功能是基于xml配置的，xml中配置了需要高亮的語法關(guān)鍵詞、代碼縮進(jìn)空格數(shù)、代碼片段等信息.

3 JavaScript調(diào)試器的軟件架構(gòu)

3.1 JavaScript調(diào)試器的軟件架構(gòu)

JavaScript調(diào)試器采用了柔性可擴(kuò)展的軟件架構(gòu)，調(diào)試器的底層，為一個軟件基礎(chǔ)平臺，主要用于個模塊的接口通訊，基礎(chǔ)平臺之上，則是各個核心模塊，如圖4所示.上層模塊之間是相互獨(dú)立的，只要符合模塊的接口規(guī)范，可以很簡易的將功能模塊進(jìn)行優(yōu)和升級.

比如Javascript引擎模塊，有常見的V8和Rhino，它們通過不同的語言進(jìn)行編寫，通過封裝后，都可以動態(tài)部署到軟件中.又比如常見的代碼檢查模塊，有JSLint和JSHint，它們提供了不同規(guī)范程度的語法檢查，Javascript調(diào)試器的這種柔性架構(gòu)，能夠很方便的在它們之間進(jìn)行選擇，也可以更具實(shí)際的需要，選擇其他的一些代碼檢查器.

通過這種架構(gòu)的設(shè)計，核心的功能都實(shí)現(xiàn)了可配置、可替換、可升級.當(dāng)有新的Javascript標(biāo)準(zhǔn)發(fā)布，或者更好的功能模塊時，能夠快速實(shí)現(xiàn)軟件升級，而不會對整個系統(tǒng)造成影響.

3.2 模塊間信息傳遞

軟件使用了松散耦合的設(shè)計思想，不同的模塊都是獨(dú)立設(shè)計的，在與其他模塊進(jìn)行交互的時候，不直接操作對方模塊，而是使用基礎(chǔ)平臺的接口.本軟件主要使用委派的信息交互方式來實(shí)現(xiàn)模塊間的信息傳遞.

委派其實(shí)是一個容器，或稱為函數(shù)指針，里面存放需要調(diào)用的接口函數(shù)，如圖5所示.完全封閉的兩個對象A和B.A對象中有一個接口，負(fù)責(zé)處理傳遞過來的消息.B對象中定義了委派（Delegate），指向A對象中的Interface A，當(dāng)B對象需要傳遞消息時，對委派（Delegate）進(jìn)行調(diào)用（Invoke），將消息傳遞到A對象，由Interface A對消息進(jìn)行處理.

軟件中廣泛使用了委派來處理不同封閉對象的信息傳遞.比如代碼檢查后，將檢查結(jié)果傳遞到結(jié)果顯示模塊，就是這樣處理的.如圖6所示，DocumentForm中包含了ShowDebugResultArr的定義，這個定義指向DebugResultForm對象中的ShowDebugResultAction，當(dāng)語法檢查完成后，檢查的結(jié)果會通過委派，將語法檢查結(jié)果傳遞到錯誤顯示窗口（DebugResultForm）中，DebugResultForm通過函數(shù)ShowDebugResultAction來對傳過來的信息進(jìn)行處理和加工，并顯示到錯誤顯示窗口中.

4 軟件界面

JavaScript調(diào)試器的軟件界面具有簡便易用、突出重點(diǎn)、容錯高等特點(diǎn)，見圖7.

5 結(jié)論

上文所述獨(dú)立運(yùn)行的輕量的JavaScript調(diào)試器的軟件結(jié)構(gòu)思想為：

第一，基于C#的V8引擎作為調(diào)試器的腳本解釋器，通過C#將V8引擎封裝，并向CLI開放函數(shù)接口；

第二，包含編輯模塊、結(jié)果顯示模塊、JavaScript模塊3個模塊；

第三，JavaScript模塊包含JavaScript引擎、代碼檢查器、參數(shù)配置器、代碼壓縮器、代碼輔助5個子模塊；

第四，使用委派的信息交互方式來實(shí)現(xiàn)模塊間的信息傳遞；

第五，軟件界面簡便易用、重點(diǎn)突出、容錯高.

參考文獻(xiàn)：

[1] SURPASS L.Javascript腳本的調(diào)試工具有哪些 [DB/OL].（2012-01-06）[2013-12-01].http：//www.cnblogs.com/lidabo/archive/2012/01/06/2314739.html.

[2] 佚 名.5個優(yōu)秀的Javascript 調(diào)試工具[DB/OL].（2012-02-24）[2013-12-01].http：//www.php100.com/html/webkaifa/javascript/2012/0224/9911.html.

[3] 廖立新，全秀娥.基于Flash的熱傳導(dǎo)綜合實(shí)驗(yàn)儀的模擬軟件設(shè)計[J].吉首大學(xué)學(xué)報自然科學(xué)版， 2013，34 （6）：22-25.

[4] 薛 輝，鄧 軍，葉柏龍，等.分布式數(shù)據(jù)交換平臺在電子政務(wù)中設(shè)計與實(shí)現(xiàn)[J].湖南師范大學(xué)自然科學(xué)學(xué)報， 2012，35（6）：44-47.

[5] 谷 偉.基于網(wǎng)絡(luò)的自適應(yīng)測試系統(tǒng)的設(shè)計與實(shí)現(xiàn)[J].湘潭大學(xué)自然科學(xué)學(xué)報， 2013，35（2）：98-102.

[6] 李振亭，王一博.基于云計算的網(wǎng)絡(luò)學(xué)習(xí)生態(tài)系統(tǒng)模型[J].河南師范大學(xué)學(xué)報：自然科學(xué)版， 2013，41（2）：64-67.

[7] 羅江河，孫松林，肖名濤，等.基于Matlab的油菜移栽機(jī)栽植機(jī)構(gòu)運(yùn)動學(xué)建模與分析 [J].湖南農(nóng)業(yè)大學(xué)學(xué)報：自然科學(xué)版， 2013，39（6）：693-698.

[8] 武俊生.雙基、改性雙基數(shù)據(jù)庫應(yīng)用系統(tǒng)設(shè)計[J].湖南師范大學(xué)自然科學(xué)學(xué)報， 2013，36（2）：35-39.

[9] 文雄軍，劉樹錕，廖曙光.智能公交系統(tǒng)電子站牌的研究與設(shè)計[J].湖南師范大學(xué)自然科學(xué)學(xué)報， 2012，35（5）：42-46.

[10] [美]JOHN R.精通JavaScript DOM [M].陳賢安，江疆，譯.北京：人民郵電出版社， 2008.

[11] 張亞飛.JavaScript開發(fā)王[M].北京：電子工業(yè)出版社， 2008.

[12] 陳爭航.JavaScript編程寶典[M].2版.北京：電子工業(yè)出版社， 2008.

[13] [美]DAVID F.JavaScript權(quán)威指南[M].5版.李強(qiáng)，譯.北京：機(jī)械工業(yè)出版社， 2007.

[14] [英]JEREMY K. JavaScript DOM編程藝術(shù)[M].楊濤，王建橋，楊曉云，等譯.北京：人民郵電出版社， 2007.

[15] [美]JOHN R. NET 2.0應(yīng)用程序調(diào)試[M].陳緣，鄒建峰，鄭瓊，譯.北京：電子工業(yè)出版社， 2008.

（編輯 胡文杰）