基于開源瀏覽器技術(shù)的客戶端平臺設(shè)計

宗蓮松

(西華大學(xué) 教務(wù)處，成都 610039)

應(yīng)用軟件的設(shè)計方法通常被劃分為B/S(瀏覽器/服務(wù)器)與C/S(客戶端/服務(wù)器)2種，其主要的區(qū)別在于是否通過Web頁面來實現(xiàn)應(yīng)用與用戶的交互。某個應(yīng)用應(yīng)該采用哪一種方式進(jìn)行開發(fā)主要取決于這2種方法的各自優(yōu)勢，通?？梢酝ㄟ^評估其實現(xiàn)軟件3層結(jié)構(gòu)(表現(xiàn)層、業(yè)務(wù)邏輯層、數(shù)據(jù)訪問層)中每一層的可行性和代價來決定。此外Web與C/S客戶端還具有許多細(xì)節(jié)上的差異，例如在網(wǎng)絡(luò)通信方面Web能夠通過標(biāo)準(zhǔn)的HTTP/HTTPS接口大大降低數(shù)據(jù)傳輸?shù)拈_發(fā)成本，而傳統(tǒng)客戶端則在即時通信和流媒體等領(lǐng)域扮演著重要角色。

網(wǎng)頁瀏覽器是一個非常復(fù)雜的客戶端軟件，它在傳統(tǒng)客戶端軟件的基礎(chǔ)上通過支持Web標(biāo)準(zhǔn)完成對Web技術(shù)的支撐，成為B/S與C/S軟件開發(fā)方式劃分的邊界。瀏覽器軟件屬于C/S軟件的范疇，因為通常情況下它實現(xiàn)了Web技術(shù)所依賴的基礎(chǔ)卻并不應(yīng)用Web技術(shù)來實現(xiàn)附加功能，而如果突破這一限制將能夠充分利用B/S與C/S的優(yōu)勢打造可以快速開發(fā)復(fù)雜應(yīng)用的軟件平臺。本文提出了一種將Web技術(shù)與傳統(tǒng)客戶端軟件相結(jié)合的新的軟件平臺，以支撐各種不同的客戶端應(yīng)用。

1 開源瀏覽器技術(shù)在客戶端軟件中的應(yīng)用現(xiàn)狀

Web技術(shù)，特別是由于Web UI和JavaScript腳本在軟件開發(fā)過程中的優(yōu)勢，使其在PC與移動客戶端的應(yīng)用越來越多，與應(yīng)用的整合也越來越深入。

在PC客戶端應(yīng)用中，應(yīng)用Web技術(shù)的主要方式是嵌入Web控件，常見于RSS、電子郵件、Blog客戶端以及即時通信和Web開發(fā)工具中。在Windows平臺上可以通過在應(yīng)用程序中嵌入IE控件來實現(xiàn);而Qt WebKit作為Qt開源項目的一部分，更提供了跨平臺實現(xiàn)的能力［1］?？丶淖饔弥饕谟谳o助界面展現(xiàn)，而沒有充分利用JavaScript腳本的動態(tài)語言特性來簡化業(yè)務(wù)實現(xiàn)和提高開發(fā)效率。

基于FireFox瀏覽器的XUL則將Web技術(shù)而不是原生代碼作為客戶端業(yè)務(wù)邏輯的主體，通過XULRunner解析并運(yùn)行由XML、DOM、CSS、JavaScript所構(gòu)成的應(yīng)用，也能夠與原生代碼通過XPCOM對象機(jī)制進(jìn)行交互，一定程度上實現(xiàn)了簡化客戶端應(yīng)用開發(fā)的“平臺”能力［2-3］。但是XUL仍然具有其局限性，主要適用于UI事件驅(qū)動的應(yīng)用。

在移動客戶端平臺上，PhoneGap能夠為Android、iOS等系統(tǒng)提供只使用JavaScript和HTML5/CSS3就能夠開發(fā)移動平臺桌面應(yīng)用的能力，同時提供訪問移動硬件平臺(如加速傳感器和攝像頭)的接口。

相比傳統(tǒng)的整合方式，Web操作系統(tǒng)(如Chrome OS)建立在平臺思想上，盡管脫離了當(dāng)前意義上的客戶端軟件范疇，卻提供了更為理想的客戶端軟件開發(fā)和運(yùn)行環(huán)境，在功能完備的基礎(chǔ)上大大降低了開發(fā)成本、提供更自然的用戶交互模式并增強(qiáng)了安全性等優(yōu)勢。

2 腳本驅(qū)動的客戶端軟件平臺及其應(yīng)用模型

為了降低客戶端開發(fā)成本，可以充分利用Web技術(shù)與JavaScript腳本的動態(tài)語言優(yōu)勢構(gòu)建一個客戶端平臺運(yùn)行環(huán)境(而不是應(yīng)用本身)，通過它來加載和運(yùn)行實際的客戶端業(yè)務(wù)邏輯代碼，并為應(yīng)用提供基礎(chǔ)的開發(fā)接口和運(yùn)行環(huán)境，如圖1所示。

圖1 新的客戶端平臺應(yīng)用模型

在新的軟件平臺中，定義平臺的設(shè)計目標(biāo)和應(yīng)用規(guī)則如下(也是與前述Web技術(shù)在客戶端軟件中應(yīng)用模式的主要區(qū)別):1)客戶端平臺本身并不實現(xiàn)具體的功能特性和業(yè)務(wù)邏輯，只為應(yīng)用的實現(xiàn)提供幫助;2)應(yīng)用本身采用更接近于Web開發(fā)的方式，盡可能減少原生代碼開發(fā)以提高開發(fā)效率;3)應(yīng)用可以在不編寫原生代碼的條件下，以客戶端軟件的形式實現(xiàn)Web應(yīng)用的功能;4)每一個用戶界面都以一個Web頁面進(jìn)行展現(xiàn)，必要時嵌入原生UI，而不是在客戶端界面中嵌入Web控件的傳統(tǒng)方案;5)能夠?qū)崿F(xiàn)與原生代碼的交互以使用操作系統(tǒng)平臺相關(guān)的能力。

相對于原生代碼JavaScript腳本的特性更適合描述業(yè)務(wù)邏輯流程，原生代碼適合實現(xiàn)平臺相關(guān)特性和較大運(yùn)算量的算法細(xì)節(jié)。在新的客戶端軟件平臺中，通過用JavaScript腳本替代原生代碼作為業(yè)務(wù)邏輯入口，在保持清晰的業(yè)務(wù)邏輯的同時提高開發(fā)效率［4］。

新的平臺保留Web開發(fā)中的所有關(guān)鍵開發(fā)方法，包括HTML、CSS、DOM及JavaScript，能夠快速地將Web應(yīng)用移植到該客戶端軟件平臺中。這既能夠增加Web應(yīng)用的交互性，也能夠隨客戶端發(fā)布避免Web應(yīng)用為兼容不同瀏覽器的額外工作，同時可以借助原生代碼的支持實現(xiàn)Web應(yīng)用無法實現(xiàn)的功能。

與瀏覽器運(yùn)行環(huán)境不同，客戶端軟件需要自主決定是否及何時顯示交互界面，業(yè)務(wù)邏輯的運(yùn)行需要能夠脫離可視化的網(wǎng)頁范圍。同時，客戶端軟件的行為方式也需要脫離單個頁面框架的束縛，可以由多個窗體共同完成客戶端軟件功能并對每個窗體有比在瀏覽器中更強(qiáng)的控制能力(例如窗體的模態(tài)與非模態(tài))。因此，需要使JavaScript能夠脫離HTML單獨(dú)運(yùn)行，并增加能夠由JavaScript控制的窗體對象和多窗體的界面體系。為了簡化界面框架的設(shè)計，可以限定每個窗體僅由一個Web頁面來表現(xiàn)(這并不會影響UI的靈活性，因為仍然可以在頁面中使用內(nèi)嵌的界面元素)。

客戶端軟件應(yīng)該不被局限只在網(wǎng)絡(luò)環(huán)境下運(yùn)行，但同時能夠讓HTML訪問本地資源能夠像通過HTTP訪問網(wǎng)絡(luò)資源一樣方便，這在Chromium的體系中可以通過實現(xiàn)新的URI Scheme來完成，將URI(統(tǒng)一資源標(biāo)識符)地址源映射到本地限定的HTML及其他資源，這樣做同時也增強(qiáng)了對本地資源的安全保護(hù)，頁面并不能利用這個途徑無限制地訪問任意資源。

最核心的需求是為實現(xiàn)復(fù)雜多變的客戶端業(yè)務(wù)邏輯建立一套規(guī)則的開發(fā)模型，包括降低JavaScript與原生代碼實現(xiàn)互相調(diào)用及傳遞參數(shù)與對象的成本、為事件觸發(fā)同步回調(diào)或異步通知的支持以及實現(xiàn)靈活的線程模型。

以展現(xiàn)一個客戶端即時通信工具的登錄界面為例，希望主體的工作流程能夠在平臺基礎(chǔ)上用JavaScript代碼控制:

在這個示例中，客戶端平臺首先加載一段 JavaScript腳本并運(yùn)行，平臺中內(nèi)嵌了 JavaScript對象“Modules”，并允許腳本代碼通過它加載其他通過原生代碼或腳本所擴(kuò)展的JavaScript對象“ui”并調(diào)用相應(yīng)的方法ShowModalUI顯示一個Web界面，參數(shù)指定訪問經(jīng)過URI Scheme映射的本地資源login/login.html。UI框架經(jīng)過擴(kuò)展后，login.html能夠在頁面中嵌入其他JavaScript腳本控制新窗體的位置、大小及風(fēng)格。

通過對客戶端應(yīng)用需求的分析，可以對用例描述采用動名結(jié)構(gòu)的方式分離出所涉及的主要對象:WebUI、JavaScript業(yè)務(wù)邏輯、原生代碼所對應(yīng)的JavaScript接口、URI Scheme以及客戶端平臺預(yù)先內(nèi)嵌的JavaScript對象。客戶端平臺的職責(zé)則是需要完成對其中每一類對象及對象間關(guān)系的管理。

3 框架設(shè)計與實現(xiàn)

圖2 基于Chromium的客戶端軟件平臺結(jié)構(gòu)示意圖

通過分析客戶端平臺的應(yīng)用模型，構(gòu)建平臺需要實現(xiàn)的要素包括:1)脫離頁面環(huán)境加載并運(yùn)行JavaScript腳本;2)為腳本環(huán)境內(nèi)置必需的JavaScript對象;3)能夠?qū)⒃a封裝為JavaScript對象或接口供 JavaScript腳本調(diào)用［5］;4)提供原生代碼到JavaScript的回調(diào)或事件通知的途徑［6］;5)實現(xiàn)訪問本地資源的URI Scheme;6)以擴(kuò)展JavaScript對象的方式提供Web UI窗體支持。

Chromium是基于WebKit內(nèi)核的Chrome瀏覽器的開放源代碼項目名稱，其發(fā)布版本被分為Chromium Dev開發(fā)版本和官方Chrome瀏覽器版本。WebKit由網(wǎng)頁渲染引擎WebCore和JavaScript腳本引擎JavaScriptCore構(gòu)成。Chromium基于WebKit之上進(jìn)行擴(kuò)展，具備許多優(yōu)點:跨平臺、多進(jìn)程架構(gòu)、利用高效的V8 JavaScript引擎替換JavaScriptCore、實現(xiàn)了NPAPI插件體系、GPU加速、很好地支持HTML5標(biāo)準(zhǔn)等等。

在Chromium內(nèi)部包含了構(gòu)建客戶端平臺的基礎(chǔ)技術(shù)，例如JavaScript腳本與原生代碼的交互，對其進(jìn)行適當(dāng)?shù)母脑炷軌蚍项A(yù)期，下面將基于Chromium的框架進(jìn)一步闡述新的客戶端軟件平臺的設(shè)計重點。在新的平臺設(shè)計中，能夠依賴于Chromium框架的主要內(nèi)容在于使用WebKit展現(xiàn)可視化界面、通過JavaScript腳本引擎實現(xiàn)腳本與原生代碼的交互、以及為本地資源定義URI路徑以實現(xiàn)脫離對網(wǎng)絡(luò)環(huán)境的依賴，平臺與開源Chromium的關(guān)系如圖2所示。

由于Chromium中使用V8替代WebKit自帶的JSCore作為JavaScript腳本引擎，因此大多數(shù)需要在JavaScript與原生代碼之間進(jìn)行的交互的接口可以通過V8所提供的能力來實現(xiàn)。V8通過腳本運(yùn)行環(huán)境上下文來控制JavaScript對象在腳本中是否能夠被訪問，每個頁面都有相應(yīng)的腳本環(huán)境，也可以顯式的構(gòu)造一個上下文使JavaScript脫離頁面運(yùn)行［7］。下面是利用V8腳本引擎執(zhí)行JavaScript腳本的代碼片斷:

V8使用一種通過將JavaScript腳本注入到在腳本環(huán)境中的特殊方式來注冊腳本對象與接口，V8引擎在腳本的語法解析過程中如果遇到native function的聲明將會通過相應(yīng)的接口根據(jù)所提供的函數(shù)名稱查詢對應(yīng)的原生代碼是否存在。以下代碼片斷用于在特定的JavaScript運(yùn)行環(huán)境上下文中內(nèi)置Modules對象并將Modules.Load方法與原生代碼通過名稱LoadModule進(jìn)行關(guān)聯(lián)，如果查找到對應(yīng)的原生代碼接口會在調(diào)用時將JavaScript參數(shù)以其C++的封裝形式傳遞給原生代碼:

對本地資源的URI定義可以通過Chromium中的URLRequest::RegisterProtocolFactory接口來實現(xiàn)，在頁面請求一個指定的URI時，Chromium通過已注冊的URI協(xié)議規(guī)則生成對應(yīng)的URLRequestJob，因此能夠在所注冊的ProtocolFactory中生成自定義的URLRequestJob以控制對資源的訪問。由于瀏覽器基于同源策略控制Web資源訪問的安全性，在實現(xiàn)URI Scheme注冊后還需要將對應(yīng)的URI訪問添加到SecurityOrigin的白名單中。

因為Chromium對HTML5提供良好的支持，HTML5標(biāo)準(zhǔn)中有關(guān)WebWorker的定義能夠幫助我們簡化在JavaScript腳本中對應(yīng)用程序線程模型的控制，關(guān)于自定義事件的定義則能夠通過在JavaScript中調(diào)用addEventListener來簡化對原生代碼與腳本間的異步事件通知機(jī)制的設(shè)計。

4 結(jié)語

Web技術(shù)伴隨互聯(lián)網(wǎng)應(yīng)用的普及得到了廣泛應(yīng)用和快速發(fā)展，新的Web標(biāo)準(zhǔn)增強(qiáng)了網(wǎng)頁的視覺表現(xiàn)能力和業(yè)務(wù)處理能力。Web技術(shù)正在逐步實現(xiàn)以前只能由客戶端代碼才能完成的任務(wù)，同時客戶端開發(fā)工具也越來越多地將網(wǎng)頁相關(guān)的技術(shù)結(jié)合起來以提升開發(fā)效率和用戶體驗，人們越來越多地認(rèn)識到兩者的優(yōu)勢并加以應(yīng)用。和其他開源項目一樣，瀏覽器的開源項目能夠為人們在軟件設(shè)計方法和實踐中提供很多有價值的參考，利用瀏覽器作為B/S與C/S開發(fā)邊界的角色，深入挖掘瀏覽器技術(shù)對于合理利用Web與傳統(tǒng)技術(shù)優(yōu)勢、理解Web操作系統(tǒng)的設(shè)計目標(biāo)等有著一定的參考作用。

［1］宋杰，曹竹冬.基于Qt/Embedded的Web瀏覽器的設(shè)計與實現(xiàn)［J］.計算機(jī)與現(xiàn)代化，2010(10):136-138.

［2］吳谷，章炯民.基于XUL開發(fā)富客戶端應(yīng)用程序［J］.電腦知識與技術(shù)，2006(1):135-137.

［3］戚艷軍，李繼玲.圖形界面開發(fā)語言XUL應(yīng)用研究［J］.計算機(jī)技術(shù)與發(fā)展，2007(3):233-235.

［4］劉春梅，孫鵬，胡琳琳.基于JavaScript引擎的終端動態(tài)數(shù)據(jù)處理方法［J］.微計算機(jī)應(yīng)用，2010，31(4):25-30.

［5］蔣章概，陳榕.基于CAR構(gòu)件的WebKit本地擴(kuò)展策略［J］.計算機(jī)應(yīng)用，2009(12):195-197.

［6］宋國瑞，何宗鍵.基于Windows CE平臺的Widget引擎中JavaScript解析器和JSBinding研究［J］.軟件導(dǎo)刊，2010(12):12-14.

［7］岳坐剛，張凱兵.基于WEB服務(wù)的框架結(jié)構(gòu)分析［J］.西華大學(xué)學(xué)報:自然科學(xué)版，2004(S1):13-15.