下一代富客戶端WEB應(yīng)用前端開發(fā)框架

摘 要：目前，WEB應(yīng)用的規(guī)模和復(fù)雜度不斷提升，各種框架層出不窮，我們已經(jīng)具備了令人難以置信的能力。然而從實(shí)際的使用效果來看，我們所做的努力依然不夠。與各種服務(wù)端框架相比，前端框架在設(shè)計(jì)理念方面仍然存在很大的提升空間。在創(chuàng)建這些應(yīng)用的過程中所引入的復(fù)雜性同樣令人難以置信。我們需要的是只通過一個(gè)獨(dú)立的框架就可以構(gòu)建動(dòng)態(tài)、交互密集型的客戶端應(yīng)用，以及將代碼隔離成模塊的方法，這對(duì)提高可復(fù)用性、可維護(hù)性和可測(cè)試性都是非常有益的。它的核心功能包括MVC、模塊化、依賴注入、自動(dòng)雙向數(shù)據(jù)綁定和測(cè)試，等等。

關(guān)鍵詞：富客戶端WEB應(yīng)用；前端開發(fā)框架；MVC；模塊化；依賴注入；自動(dòng)雙向數(shù)據(jù)綁定

文章編號(hào)：1674-3520（2015）-04-00-02

引言

富客戶端開發(fā)技術(shù)是完全使用JavaScript編寫的客戶端技術(shù)。同其他歷史悠久的Web技術(shù)（HTML、CSS和JavaScript）配合使用，使Web應(yīng)用開發(fā)比以往更簡(jiǎn)單、更快捷。

富客戶端前端開發(fā)框架主要用于構(gòu)建單頁面Web應(yīng)用。它通過增加開發(fā)人員和常見Web應(yīng)用開發(fā)任務(wù)之間的抽象級(jí)別，使構(gòu)建交互式的現(xiàn)代Web應(yīng)用變得更加簡(jiǎn)單。同時(shí)也降低了構(gòu)建復(fù)雜應(yīng)用的難度。它提供了開發(fā)者在現(xiàn)代Web應(yīng)用中經(jīng)常要用到的一系列高級(jí)功能。在使用典型的WEB類庫時(shí)，你可以選擇并使用你所喜歡的功能；而對(duì)于富客戶端前端開發(fā)框架來說，你必須把它作為一個(gè)完整的套件來使用，框架中的所有東西都包含在里面。這樣一來后續(xù)的開發(fā)、擴(kuò)展和修改都變的可維護(hù)了。

一、富客戶端開發(fā)概念

（一）客戶端模板

多頁面 WEB 應(yīng)用會(huì)在服務(wù)端創(chuàng)建 HTML，把 HTML 和數(shù)據(jù)裝配并混合起來，然后再把生成的頁面發(fā)送到瀏覽器中。在某種程度上，大部分單頁面應(yīng)用——也叫做 AJAX 應(yīng)用——也會(huì)做同樣的事情。在這一方面，富客戶端框架的處理方式完全不同，在富客戶端框架中，模板和數(shù)據(jù)都會(huì)發(fā)送到瀏覽器中，然后在客戶端進(jìn)行裝配。這樣一來，服務(wù)器的角色就變成了僅僅為這些模板提供一些靜態(tài)的資源，然后為這些模板提供所需要的正確數(shù)據(jù)。

（二）Model View Controller（MVC）

MVC 背后的核心理念是： 你應(yīng)該把管理數(shù)據(jù)的代碼（model）、 應(yīng)用邏輯代碼（controller），以及向用戶展示數(shù)據(jù)的代碼（view）清晰地分離開。視圖會(huì)從模型中獲取數(shù)據(jù)，然后展示給用戶。當(dāng)用戶通過鼠標(biāo)點(diǎn)擊或者鍵盤輸入與應(yīng)用進(jìn)行交互的時(shí)候，控制器將會(huì)做出響應(yīng)并修改模型中的數(shù)據(jù)。最后，模型會(huì)通知視圖數(shù)據(jù)已經(jīng)發(fā)生了變更，這樣視圖就可以刷新其中顯示的內(nèi)容。

在富客戶端應(yīng)用中，視圖就是 Document Object Model（DOM，文檔對(duì)象模型），控制器就是 JavaScript 類，而模型數(shù)據(jù)則被存儲(chǔ)在對(duì)象的屬性中。

（三）數(shù)據(jù)綁定

在 AJAX 型的單頁應(yīng)用普及之前，類似 Rails、PHP 和 JSP 之類的平臺(tái)都可以幫助我們創(chuàng)建用戶界面（UI），它們會(huì)把 HTML 字符串和數(shù)據(jù)混合起來，然后再發(fā)送給用戶并顯示。而 jQuery 之類的庫則在客戶端繼承了這一模型，讓我們遵守類似的風(fēng)格，但是使用jQuery 可以單獨(dú)刷新 DOM 中的局部內(nèi)容，而不是刷新整個(gè)頁面。在 jQuery 中，我們會(huì)把 HTML 模板字符串和數(shù)據(jù)混合起來，然后把獲得的結(jié)果插入 DOM 中我們所期望的位置，插入的方式是把結(jié)果設(shè)置給一個(gè)占位符元素的 innerHtml 屬性。

以上機(jī)制都工作得相當(dāng)不錯(cuò)，但是當(dāng)想要把最新的數(shù)據(jù)插入到 UI 中，或者根據(jù)用戶輸入來修改數(shù)據(jù)的時(shí)候，你就需要做很多極其繁瑣的工作來保證數(shù)據(jù)的狀態(tài)是正確的，并且 UI 和 JavaScript 屬性要同時(shí)正確?，F(xiàn)在我們可以僅僅聲明 UI 中的某個(gè)部分需要映射到某個(gè) JavaScript 屬性，然后讓它們自己去同步。這種編程風(fēng)格叫做數(shù)據(jù)綁定。因?yàn)樗梢院?MVC 很好地結(jié)合起來，所以我們把它引入到了富客戶端框架中。這樣一來，當(dāng)編寫視圖和模型的時(shí)候，可以節(jié)省代碼量。在 UI 中，把數(shù)據(jù)從一個(gè)值修改成另一個(gè)值的大部分工作會(huì)自動(dòng)進(jìn)行。

（四）依賴注入

我們?cè)诰帉戭悾ň帉憳I(yè)務(wù)和邏輯）時(shí)的只需要簡(jiǎn)單地獲取它們所需要的東西，而不需要?jiǎng)?chuàng)建那些它們所依賴的東西。

這種風(fēng)格遵循了一種叫做迪米特法則[1] （Law of Demeter，http：//en.wikipedia.org/wiki/Law_of_Demeter）的設(shè)計(jì)模式，也叫做最少知識(shí)原則。既然 Controller 的職責(zé)是設(shè)置模型的內(nèi)部狀態(tài)，那么用這一法則就意味著，它不應(yīng)該去操心任何其他任何東西。

（五）指令

富客戶端框架內(nèi)置了很多指令，可以幫助你為你的應(yīng)用定義視圖，這些指令可以把常見的視圖定義成模板，它們可以設(shè)置應(yīng)用的運(yùn)行方式，或者用來創(chuàng)建可復(fù)用的組件。

同時(shí)，并不會(huì)受限于富客戶端框架內(nèi)置的指令。使用者可以編寫自己的指令用來擴(kuò)展 HTML 模板的功能，從而實(shí)現(xiàn)任何東西。

二、調(diào)用富客戶端框架

為了使用富客戶端框架，所有應(yīng)用都必須首先做兩件事情 ：

（一）加載富客戶端框架庫。

加載類庫的操作非常簡(jiǎn)單，與其他 JavaScript 類庫遵循同樣的規(guī)則。你可以從

內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）中加載類庫。

示例如下 ：

src=\"https：//ajax.cdn.com/ajax/libs/ria/1.0.0/framework.min.js\">

（二）使用 ng-app 指令告訴富客戶端框架應(yīng)該管理 DOM 中的哪一部分。

如果正在構(gòu)建一款純富客戶端應(yīng)用，那么可以把 ng-app 指令寫在 標(biāo)簽中，示例如下 ：

…

這樣就會(huì)告訴富客戶端框架去管理頁面上的所有 DOM 元素。

如果你有一款現(xiàn)存的應(yīng)用，該應(yīng)用正在用其他一些技術(shù)（如 Java 或 Rails）來管理DOM，那么你可以讓富客戶端框架只管理頁面中的一部分，只要在頁面中放入一些

…

…

…

三、Model View Controller風(fēng)格

富客戶端框架支持 Model View Controller 風(fēng)格的應(yīng)用設(shè)計(jì)。

一般使用對(duì)象的屬性來創(chuàng)建數(shù)據(jù)模型，甚至只用基本數(shù)據(jù)類型來存儲(chǔ)數(shù)據(jù)。如果想要給用戶展示一些文本，可以使用字符串，示例如下：

var someText = 'You have started your journey.'；

在 DOM 中插入占位符，然后像下面這樣設(shè)置其中的文本 ：

{{someText}}

我們把這叫做雙花括號(hào)插值語法，因?yàn)樗梢园研碌膬?nèi)容插入到現(xiàn)有的模板中。

控制器就是你所編寫的類或者類型，它的作用是告訴富客戶端框架該模型是由哪些對(duì)象或者基本數(shù)據(jù)構(gòu)成的，只要把這些對(duì)象或者基本數(shù)據(jù)設(shè)置到 $scope 對(duì)象上即可， $scope 對(duì)象會(huì)被傳遞給控制器 ：

function TextController（$scope） {

$scope.someText = someText；}

把以上所有東西整合起來，我們就獲得了如下內(nèi)容 ：

{{someText}}

src=\" https：//ajax.cdn.com/ajax/libs/ria/1.0.0/framework.min.js \">

把以上內(nèi)容加載到瀏覽器中，將會(huì)看到：

You have started your journey.

在很簡(jiǎn)單的情況下，以上使用基本數(shù)據(jù)類型的模型工作得很好，但是對(duì)于大多數(shù)應(yīng)用來說，需要?jiǎng)?chuàng)建模型對(duì)象類來容納數(shù)據(jù)。

varmessages = {}；

messages.someText = 'You have started your journey.'；

四、結(jié)論與展望

本文通過現(xiàn)代化WEB技術(shù)的發(fā)展和富客戶端應(yīng)用的催生，提出了富客戶端應(yīng)用框架的設(shè)計(jì)思想與構(gòu)建思路。富客戶端應(yīng)用的使用方式展示多圖層、大數(shù)據(jù)量用戶數(shù)據(jù)相對(duì)于傳統(tǒng)的使用加載頁面方式展現(xiàn)數(shù)據(jù)速度上有了極大的增強(qiáng)，提高了用戶體驗(yàn)，節(jié)約網(wǎng)絡(luò)資源，并且應(yīng)用在跨平臺(tái)方面較其它方式具有明顯優(yōu)勢(shì)。使用此方法構(gòu)建輕量級(jí)或重量級(jí)富客戶端應(yīng)用具有簡(jiǎn)單易行，靈活快速的優(yōu)點(diǎn)。

參考文獻(xiàn)：

[1]Jsonhomepage. Introducing JSON， 2012. http：∥www.json.org

[2]Wikipedia. HTML5， 2012. http：//zh.wikipedia.org/wiki/HTML5

[3]The HTML5 test. Other browsers， 2012. hhttp：//html5test.com

[4]AngularJS authoritative guide Dan Wahlin