在下一代互聯(lián)網(wǎng)應(yīng)用中的AllgUlarJS技術(shù)概述

宋濤　王玉峰　呂思思

[摘要]AngularJs是新興的JavaScriptMVC框架，它為業(yè)界帶來了重大的變化，包括對(duì)模塊化（templating）的創(chuàng)新實(shí)現(xiàn)，以及數(shù)據(jù)的雙向綁定（two-way data binding），這些特性使得它強(qiáng)大而易用。大多數(shù)開發(fā)者認(rèn)為，與其他框架相比，AngularJS明顯縮減了項(xiàng)目所需的代碼量。AngularJS是軟件中的杰作，它強(qiáng)調(diào)測(cè)試與代碼質(zhì)量，在JavaScript生態(tài)圈內(nèi)堪為表率，它的優(yōu)質(zhì)與創(chuàng)新，催生了周圍活躍的程序員社區(qū)，這反過來又讓AngularJS的人氣更加旺盛。下面我們來概述這項(xiàng)技術(shù)。

[關(guān)鍵詞]JavaScript MVC框架；數(shù)據(jù)的雙向綁定；單頁web應(yīng)用

1邂逅AngularJS

AngularJS是采用JavaScript語言編寫的客戶端MVC框架，幫助開發(fā)者編寫現(xiàn)代化的單頁面（single-page）應(yīng)用。它尤其適合編寫有大量CRUD（增刪改查）操作的，具有Ajax風(fēng)格的富客戶端應(yīng)用。

2熟悉框架

AngularJS是近年來不斷涌現(xiàn)的客戶端MVC框架中的新成員，它的出眾要?dú)w功于創(chuàng)新的模板系統(tǒng)、友好的開發(fā)過程和可靠的工程實(shí)踐。下面先來看看模板系統(tǒng)的獨(dú)特之處。

1）使用HTML作為模板語言

2）無須對(duì)DOM進(jìn)行顯式刷新，因?yàn)锳ngular.IS可以通過用戶動(dòng)作、瀏覽器事件、模型變化來決定在何時(shí)刷新何類模板。

3）有趣的和可擴(kuò)展的組件子系統(tǒng)能夠教會(huì)瀏覽器如何解釋自定義的HTML標(biāo)簽及屬性。

AngularJS最顯而易見的部分，也許就是上述的模板系統(tǒng)，但是，AngularJS并不只是簡單地包裝一些與開發(fā)單頁面web應(yīng)用相關(guān)的功能與服務(wù)。

實(shí)際上，AngularJS還隱藏著不少珠璣，如依賴注入及可測(cè)試性。通過依賴注入，可以用短小精煉且仔細(xì)測(cè)試過的服務(wù)來組建web應(yīng)用。另外，AngularJS框架的設(shè)計(jì)和周邊的工作群，在開發(fā)應(yīng)用的每個(gè)階段都鼓勵(lì)良好的測(cè)試實(shí)踐。

3AnguIarJS中的MVC模式

當(dāng)前大部分web應(yīng)用都基于知名的模型一視圖一控制器（MVC）模式的某形態(tài)。但是準(zhǔn)確來說，MVC并不是編程模式，而是更高級(jí)的框架模式，因此相當(dāng)抽象。更糟糕的是，當(dāng)前有很多MVC模式的變種和派生，開發(fā)者們都在按照自己對(duì)MVC的理解在設(shè)計(jì)架構(gòu)。這導(dǎo)致了同樣的名字（MVC）用于描述不同的架構(gòu)和編碼方式。

3.1控制器

控制器的主要職責(zé)是初始化作用域?qū)嵗Ｔ趯?shí)踐中，初始化邏輯又可以再分為：

1）提供模型的初始值。

2）增加UI相關(guān)的行為（函數(shù)）以擴(kuò)展$scope對(duì)象。

控制器實(shí)際上就是JavaSeript函數(shù)，它們不需要擴(kuò)展任何AngularJS特定的類，也不需要調(diào)用任何特定的AngularJS API，就可以正常工作。

3.2模型

AngularJS的模型實(shí)際上就是普通的JavaScript對(duì)象。與控制器類似，不需要特別的去擴(kuò)展任何AngularJS的底層類，也不用去構(gòu)造模型對(duì)象。

可以再模型層中使用任何當(dāng)前存在的純JavaScript的類或?qū)ο?。模型可擁有的屬性也不僅限于原始值，任何有效的JavaSeript對(duì)象或數(shù)都是可以的。只需要將模型簡單地指派給$scope，AngularJS就可確認(rèn)它的存在。

3.3視圖

實(shí)際上，AngularJS與HTML和DOM有著更加緊密的聯(lián)系，因?yàn)锳ngularJS依靠瀏覽器去解析模板文本。瀏覽器將文本轉(zhuǎn)換成DOM樹之后，AngularJS參與進(jìn)來，開始遍歷解析好的DOM結(jié)構(gòu)。當(dāng)遇到指令時(shí)。AngularJS就執(zhí)行相關(guān)邏輯，將指令轉(zhuǎn)換成頁面的動(dòng)態(tài)部分。

AngularJS擴(kuò)展了HTML的詞匯庫，這類似于創(chuàng)造了一門基于HTML的領(lǐng)域特定語言。并指導(dǎo)瀏覽器如何理解它。因此，常聽到AngularJS“教瀏覽器新把戲”的說法。

4聲明式模板視圖——命令式控制器邏輯

AngularJS提供了很多便利的指令，然而，重要的不是這些指令的語法或功能，而是隱藏在表象之下的關(guān)于如何構(gòu)建UI組件的AngularJS哲學(xué)。

AngularJS提倡聲明式UI結(jié)構(gòu)。在實(shí)踐中，這意味著模板專注于描述所需要的效果，而非其實(shí)現(xiàn)。下面我們舉例來說明。

我們希望創(chuàng)建一個(gè)讓用戶可以輸入短消息的表單，然后點(diǎn)擊按鈕來發(fā)送它。這里有些特別的用戶體驗(yàn)需求，短信息字?jǐn)?shù)要限制在100字以內(nèi)，一旦超出此限制，“Send”（發(fā)送）按鈕就要被禁用掉。當(dāng)用戶輸入消息時(shí)，他應(yīng)該知道還可以輸入多少字。一旦剩余字?jǐn)?shù)小于10，就標(biāo)示它的數(shù)字應(yīng)該改變顯式樣式，以警告用戶。另外，它還應(yīng)該可以清除用戶已經(jīng)輸入的消息。

上面的需求是相當(dāng)標(biāo)準(zhǔn)的文本表單，沒有多少挑戰(zhàn)性。盡管如此，也需要很多UI元素協(xié)同工作，例如，正確管理按鈕的disabled狀態(tài)，采用適當(dāng)樣式顯示剩余可輸入的準(zhǔn)確字?jǐn)?shù)等。代碼如下：

我們用上面的代碼作為基礎(chǔ)。首先，要顯示剩余字?jǐn)?shù)。代碼如下：

其次，在短消息超出字?jǐn)?shù)限制時(shí)，禁用“Send”按鈕。這可以用ng-disabled指令搞定，代碼如下：

Send

我們看到了重復(fù)出現(xiàn)的模式：僅需修改模板的很少一部分，就可以操縱UI，用模型狀態(tài)得出想要的結(jié)果。令人激動(dòng)的是，不用在JavaScript代碼中保存任何對(duì)DOM元素的引用，也不用顯式地操縱DOM元素。我們只是專注于模型的變化，而讓AngularJS去做辛苦的工作。所有需要做的，只是以指令的形式去提供一些提示而已。

再回到上面的例子。下一步是，當(dāng)可以輸入的文字?jǐn)?shù)量已經(jīng)不多時(shí)，改變剩余字?jǐn)?shù)的顯式樣式。這里可以看到更多的命令式UI實(shí)例，代碼如下：

模型的改變驅(qū)動(dòng)了CSS類的改變。而且，在代碼的任何地方都沒有顯式的DOM操作邏輯。uI基于聲明式的表達(dá)“愿望”，而重新繪制。Ng-class指令所表述的是這樣：“每次當(dāng)用戶輸入快要超出字?jǐn)?shù)限制的時(shí)候，應(yīng)該看到警告，元素應(yīng)該有text—warningCSS類。”這和另一種表述方式截然不同：“當(dāng)輸入新的字符促使字符數(shù)量超出限制時(shí)，找到一個(gè)元素，并為此元素添加text-warning CSS類。”

以上兩個(gè)表述雖然聽起來差別不大，但是，實(shí)際上聲明式和命令式是針鋒相對(duì)的。命令式編程風(fēng)格專注于描述通向理想結(jié)果的步驟，而聲明式編程風(fēng)格專注于描述結(jié)果本身，步驟則主要由支持的框架來處理。這就好像說：“親愛的AngularJS，當(dāng)模型在特定狀態(tài)時(shí)，我想要UI看起來是這樣。去吧，決定何時(shí)及怎樣重繪UI吧！”

通常來說，聲明式編程風(fēng)格更具表現(xiàn)力，它讓開發(fā)者從嚴(yán)格的底層實(shí)現(xiàn)中解放出來，寫出簡潔易讀的代碼。但是，為了讓聲明式編程風(fēng)格工作，需要能夠正確解釋高級(jí)命令的機(jī)制。一方面，程序要依賴這些機(jī)制，就要放棄某種程度的底層控制。另一方面，如果采用命令式編程風(fēng)格，就可以控制一切調(diào)整每個(gè)細(xì)節(jié)。但是，“掌控一切”的代價(jià)，就是要編寫大量底層的、重復(fù)的代碼。

AngularJS的指令用聲明表達(dá)出了需要的效果，所以不用再去按部就班地修改DOM元素。AngularJS提倡在模板中使用聲明式編程風(fēng)格，而在JavaScript代碼中使用命令式編程風(fēng)格。有了AngularJS的支持，很少需要步驟詳細(xì)的底層DOM操縱（唯一的例外是實(shí)現(xiàn)指令的代碼）。

由AngularJS指令編寫的聲明式的uI模板，能夠快速地描述復(fù)雜的交互性UI。AngularJS會(huì)接管何時(shí)及如何操縱DOM樹的所有底層決定。大部分情況下，AngularJS做“正確的事”，并如期望的那樣，及時(shí)更新UI。但是，理解AngularJS的內(nèi)部工作機(jī)制依然很重要，這樣可以在AngularJS需要時(shí)，為它提供適當(dāng)?shù)木€索?？梢赃\(yùn)用SOL的比喻，大部分情況下我們不需要擔(dān)心查詢規(guī)劃器是如何做出決定的，以便于我們?yōu)樗峁└嗟木€索。同樣的道理也適用于AngularJS所管理的UI：想要更有效地使用模板和指令，就要了解更多的內(nèi)部機(jī)制。

[責(zé)任編輯：王偉平]