JavaScript調試器軟件架構

王婷婷，申啟杰

(1.銅仁學院數學與信息工程系，中國 銅仁 554300； 2.中交第四航務工程局有限公司信息中心，中國 廣州 510231)

JavaScript調試器軟件架構

王婷婷1*，申啟杰2

(1.銅仁學院數學與信息工程系，中國 銅仁 554300； 2.中交第四航務工程局有限公司信息中心，中國 廣州 510231)

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

JavaScript編程；C#語言；V8引擎；JavaScript調試器；委派；軟件界面

當前，基于Web瀏覽器的應用越來越受到用戶的喜愛和開發商的重視，而越來越多的成熟用戶對Web應用的易用性提出新的高要求，這就迫使開發商不斷地改進應用．例如，使用JavaScript代碼控制Web頁面的展現；使用AJAX技術改善Web頁面的控制等等．這些都使得作為Web應用的開發人員不得不去學習并使用JavaScript語言編寫應用程序．

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

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

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

1 軟件模塊

圖1 JavaScript調試器的整體架構Fig.1 Overall architecture of JavaScript debugger

JavaScript調試器分為3個模塊：編輯模塊，結果顯示模塊，JavaScript模塊[3-4]．整體架構如圖1所示．

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

JavaScript模塊是JavaScript調試器的核心，包括JavaScript引擎、代碼檢查器、參數配置器、代碼壓縮器、代碼輔助5個子模塊[5-7]．

JavaScript調試器的結果顯示模塊以列表的形式顯示當前JavaScript代碼的錯誤．結果顯示模塊分析代碼檢查器的檢查結果，顯示錯誤總數及錯誤明細，錯誤明細會細致顯示出錯的行號、字符位置、錯誤描述．

2 JavaScript模塊架構

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

圖2 JavaScript調試器的模塊架構Fig.2 The module architecture of JavaScript debugger

2.1 JavaScript調試器的C#開發語言和V8引擎

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

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

2.2 JavaScript調試器的代碼檢查器

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

2.3 JavaScript調試器的代碼壓縮器

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

圖3 JavaScript調試器的參數配置器配置界面Fig.3 The parameters configuration screen of JavaScript debugger

2.4 JavaScript調試器的參數配置器

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

參數配置器配置界面如圖3所示．

2.5 JavaScript調試器的代碼輔助子模塊

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

3 JavaScript調試器的軟件架構

圖4 JavaScript調試器的軟件架構Fig.4 Software architecture of JavaScript debugger

3.1 JavaScript調試器的軟件架構

JavaScript調試器采用了柔性可擴展的軟件架構，調試器的底層，為一個軟件基礎平臺，主要用于個模塊的接口通訊，基礎平臺之上，則是各個核心模塊，如圖4所示．上層模塊之間是相互獨立的，只要符合模塊的接口規范，可以很簡易的將功能模塊進行優和升級．

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

通過這種架構的設計，核心的功能都實現了可配置、可替換、可升級．當有新的Javascript標準發布，或者更好的功能模塊時，能夠快速實現軟件升級，而不會對整個系統造成影響．

3.2 模塊間信息傳遞

軟件使用了松散耦合的設計思想，不同的模塊都是獨立設計的，在與其他模塊進行交互的時候，不直接操作對方模塊，而是使用基礎平臺的接口．本軟件主要使用委派的信息交互方式來實現模塊間的信息傳遞．

圖5 A、B對象之間的委派Fig.5 The delegate between the object A and B

委派其實是一個容器，或稱為函數指針，里面存放需要調用的接口函數，如圖5所示．完全封閉的兩個對象A和B．A對象中有一個接口，負責處理傳遞過來的消息．B對象中定義了委派(Delegate)，指向A對象中的Interface A，當B對象需要傳遞消息時，對委派(Delegate)進行調用(Invoke)，將消息傳遞到A對象，由Interface A對消息進行處理．

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

圖6 JavaScript調試器中使用的委派Fig.6 The delegate used in JavaScript debugger

4 軟件界面

JavaScript調試器的軟件界面具有簡便易用、突出重點、容錯高等特點，見圖7．

圖7 JavaScript調試器的軟件界面Fig.7 The software interface of JavaScript debugger

5 結論

上文所述獨立運行的輕量的JavaScript調試器的軟件結構思想為：

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

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

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

第四，使用委派的信息交互方式來實現模塊間的信息傳遞；

第五，軟件界面簡便易用、重點突出、容錯高．

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

[2] 佚 名．5個優秀的Javascript 調試工具[DB/OL]．(2012-02-24)[2013-12-01].http://www.php100.com/html/webkaifa/javascript/2012/0224/9911.html．

[3] 廖立新，全秀娥．基于Flash的熱傳導綜合實驗儀的模擬軟件設計[J]．吉首大學學報自然科學版，2013，34 (6):22-25．

[4] 薛 輝，鄧 軍，葉柏龍，等．分布式數據交換平臺在電子政務中設計與實現[J]．湖南師范大學自然科學學報，2012，35(6):44-47．

[5] 谷 偉．基于網絡的自適應測試系統的設計與實現[J]．湘潭大學自然科學學報，2013，35(2):98-102．

[6] 李振亭，王一博．基于云計算的網絡學習生態系統模型[J]．河南師范大學學報:自然科學版，2013，41(2)：64-67．

[7] 羅江河，孫松林，肖名濤，等．基于Matlab的油菜移栽機栽植機構運動學建模與分析 [J]．湖南農業大學學報:自然科學版，2013，39(6):693-698．

[8] 武俊生．雙基、改性雙基數據庫應用系統設計[J]．湖南師范大學自然科學學報，2013，36(2):35-39．

[9] 文雄軍,劉樹錕，廖曙光．智能公交系統電子站牌的研究與設計[J]．湖南師范大學自然科學學報，2012，35(5):42-46．

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

[11] 張亞飛．JavaScript開發王[M]．北京：電子工業出版社，2008．

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

[13] [美]DAVID F．JavaScript權威指南[M]．5版.李強，譯．北京：機械工業出版社，2007．

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

[15] [美]JOHN R. NET 2.0應用程序調試[M]．陳緣，鄒建峰，鄭瓊，譯．北京：電子工業出版社，2008．

(編輯 胡文杰)

重要啟事

“優先數字出版”是以紙質版期刊錄用稿件為出版內容，先于紙質期刊出版日期出版的數字期刊出版方式．我刊已于2012年起與中國學術期刊(光盤版)電子雜志社簽訂了優先數字出版協議．凡被我刊錄用的稿件一經優先數字出版，讀者即可在中國知網(CNKI)全文數據庫進行檢索和下載．凡向本刊投稿的作者，如無特別申明，均被視為作者授權本刊編輯部在紙質期刊出版前，可以在中國學術期刊(光盤版)電子雜志社主辦的“中國知網”(www.cnki.net)上優先數字出版；也被視為作者同意并授權我刊與其他電子雜志社簽訂的協議，并許可其在全球范圍內使用該文的信息網絡傳播權、數字化復制權、數字化匯編權、發行權及翻譯權，并不再額外支付稿酬．

本刊編輯部

The Software Architecture of JavaScript Debugger

WANGTing-ting1*,SHENQi-jie2

(1.Department of Mathematics and Information Engineering, Tongren University, Tongren 554300, China;2. IT Department, CCCC Fourth Harbor Engineering Co., Ltd., Guangzhou 510231, China)

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.

JavaScript programming; C# language; V8 engine; JavaScript debugger; delegation; software interface

2014-03-12

貴州省教育廳自然科學基金資助項目(黔教科2007097)

*

,E-mail：wttxb8@163.com

TP311

A

1000-2537(2014)06-0088-05

圖1 魚類4種色素細胞的顯微觀察(A：紅色素細胞(E)和虹彩細胞(I)； B：黑色素細胞(M)和黃色素細胞(X))(P.25)Fig.1 Four types of pigment cells in fish (A: Erythrocyte(E) and Iridocyte(I)；B: Melanocyte(M) and Xanthophore(X))(P.25)

圖2 濉溪縣淺層地下水中氟質量濃度等值線圖(P.9)Fig.2 Isogram of fluoride in shallow groundwater, Suixi(P.9)

圖3 淺層地下水富水量及流向圖(P.9)Fig.3 Diagram of water yield and flow of shallow groundwater(P.9)