下一代富客戶端WEB應用前端開發框架

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

關鍵詞：富客戶端WEB應用；前端開發框架；MVC；模塊化；依賴注入；自動雙向數據綁定

文章編號：1674-3520（2015）-04-00-02

引言

富客戶端開發技術是完全使用JavaScript編寫的客戶端技術。同其他歷史悠久的Web技術（HTML、CSS和JavaScript）配合使用，使Web應用開發比以往更簡單、更快捷。

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

一、富客戶端開發概念

（一）客戶端模板

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

（二）Model View Controller（MVC）

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

在富客戶端應用中，視圖就是 Document Object Model（DOM，文檔對象模型），控制器就是 JavaScript 類，而模型數據則被存儲在對象的屬性中。

（三）數據綁定

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

以上機制都工作得相當不錯，但是當想要把最新的數據插入到 UI 中，或者根據用戶輸入來修改數據的時候，你就需要做很多極其繁瑣的工作來保證數據的狀態是正確的，并且 UI 和 JavaScript 屬性要同時正確。現在我們可以僅僅聲明 UI 中的某個部分需要映射到某個 JavaScript 屬性，然后讓它們自己去同步。這種編程風格叫做數據綁定。因為它可以和 MVC 很好地結合起來，所以我們把它引入到了富客戶端框架中。這樣一來，當編寫視圖和模型的時候，可以節省代碼量。在 UI 中，把數據從一個值修改成另一個值的大部分工作會自動進行。

（四）依賴注入

我們在編寫類（編寫業務和邏輯）時的只需要簡單地獲取它們所需要的東西，而不需要創建那些它們所依賴的東西。

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

（五）指令

富客戶端框架內置了很多指令，可以幫助你為你的應用定義視圖，這些指令可以把常見的視圖定義成模板，它們可以設置應用的運行方式，或者用來創建可復用的組件。

同時，并不會受限于富客戶端框架內置的指令。使用者可以編寫自己的指令用來擴展 HTML 模板的功能，從而實現任何東西。

二、調用富客戶端框架

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

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

加載類庫的操作非常簡單，與其他 JavaScript 類庫遵循同樣的規則。你可以從

內容分發網絡（CDN）中加載類庫。

示例如下 ：

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

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

如果正在構建一款純富客戶端應用，那么可以把 ng-app 指令寫在 標簽中，示例如下 ：

…

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

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

…

…

…

三、Model View Controller風格

富客戶端框架支持 Model View Controller 風格的應用設計。

一般使用對象的屬性來創建數據模型，甚至只用基本數據類型來存儲數據。如果想要給用戶展示一些文本，可以使用字符串，示例如下：

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

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

{{someText}}

我們把這叫做雙花括號插值語法，因為它可以把新的內容插入到現有的模板中。

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

function TextController（$scope） {

$scope.someText = someText；}

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

{{someText}}

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

把以上內容加載到瀏覽器中，將會看到：

You have started your journey.

在很簡單的情況下，以上使用基本數據類型的模型工作得很好，但是對于大多數應用來說，需要創建模型對象類來容納數據。

varmessages = {}；

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

四、結論與展望

本文通過現代化WEB技術的發展和富客戶端應用的催生，提出了富客戶端應用框架的設計思想與構建思路。富客戶端應用的使用方式展示多圖層、大數據量用戶數據相對于傳統的使用加載頁面方式展現數據速度上有了極大的增強，提高了用戶體驗，節約網絡資源，并且應用在跨平臺方面較其它方式具有明顯優勢。使用此方法構建輕量級或重量級富客戶端應用具有簡單易行，靈活快速的優點。

參考文獻：

[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