AngularJs html compiler詳解及示例代碼

2019-11-20 09:06:30

字體：大中小

來源：轉載

供稿：網友

原文再續，書接上回。。。依舊參考http://code.angularjs.org/1.0.2/docs/guide/compiler

一、總括

　　Angular的HTML compiler允許開發者自定義新的HTML語法。compiler允許我們對任意HTML元素或屬性，甚至是新的HTML標簽、屬性（如<beautiful girl=”cf”></beautiful >）附加行為。Angular將這些附加行為稱為directives。

　　HTML有很多專門格式化靜態文檔的預定義HTML樣式結構（可以告訴瀏覽器如何顯示標記的內容）。假設某東東需要被居中，而我們不需要教瀏覽器如何去做（此處省略N字）。我們只需要簡單地對需要居中的標簽加入align=”center”即可。這就是聲明式語言（declarative language）的牛X之處。

　　但是聲明式語言也有它的局限性，即你不能告訴瀏覽器如何處理在預定義范圍外的語法。例如，我們不能很簡單地告訴瀏覽器如何讓文本在瀏覽器的1/3處對齊。所以，我們正需要一個讓瀏覽器與時俱進，學學新語法的途徑。

　　Angular預先綁定了一些對構建應用有幫助的directives。我們也可以自己創建屬于自己應用的獨特的directives。這些directive擴展將成為我們自己的應用的“特定領域語言”（Domain Specific Language）。

　　這些編譯將僅僅發生在瀏覽器端，無須服務端或者預編譯步驟。

二、Compiler

　　Compiler作為Angular的一個服務（Service），負責遍歷DOM結構，尋找屬性。編譯過程分成兩個階段：

　　1. 編譯（Compile）：遍歷DOM節點樹，收集所有directives。返回結果是一個鏈接函數（linking function）。

　　2. 鏈接（Link）：將directives綁定到一個作用域（scope）中，創建一個實況視圖（live view）。在scope中的任何改變，將會在視圖中得到體現（更新視圖）；任何用戶對模版的活動（改變），將會體現在scope model中（雙向綁定）。這使得scope model能夠反映正確的值。

　　一些directives，諸如ng-repeat，會為每一個在集合（collection）中的元素復制一次特定的元素（組合）。編譯和鏈接兩個階段，使性能得以提升。因為克隆出來的模版(template)只需要編譯一次，然后為每一個集合中的元素進行一次鏈接（類似模版緩存）。

三、Directive

　　Directive是一個行為，在編譯過程中遇到特定的HTML結構時，它會被觸發。Directives可以放置在元素的name、attribute、class甚至注釋中。以下是幾種引用ng-bind（一個內置directive）的方法：

<span ng-bind="exp"></span><span class="ng-bind: exp;"></span><ng-bind></ng-bind><!-- directive: ng-bind exp -->

　　Directive只是一個當編譯器在DOM中遇到時會執行的一個函數（function）。directive API文檔中有詳細講解如何創建一個directive。

下面是一個樣例，可以讓一個元素跟你的鼠標玩躲貓貓……

<!DOCTYPE html><html lang="zh-cn" ng-app="HideAnkSeek"><head>  <meta charset="UTF-8">  <title>躲貓貓</title>  <style type="text/css">    .ng-cloak {      display: none;    }  </style></head><body><span class="ng-cloak" wildcat>一碰我就跑~~來點我啊~~</span><script src="../angular-1.0.1.js" type="text/javascript"></script><script type="text/javascript">  angular.module("HideAnkSeek", []).directive("wildcat", function ($document) {    var maxLeft = 400,maxTop = 300;    var msg = ["我閃~~", "抓我呀~~~", "雅蠛蝶~~", "噢耶~~", "你真遜~！","就差那么一點點了！","繼續吧~~總有一天我會累的"];    return function (scope, element, attr) {      element.css({        "position":"absolute",        "border":"1px solid green"      });      element.bind("mouseenter", function (event) {        element.css({          "left":parseInt(Math.random() * 10000 % maxLeft) + "px",          "top":parseInt(Math.random() * 10000 % maxTop) + "px"        }).text(msg[parseInt(Math.random() * 10000 % msg.length)]);      }).bind("click",function (event) {            element.text("噢My Lady Gaga。。。被你逮到了。。。");            element.unbind("mouseenter");          });    };  });</script></body></html>

　　在任意元素中添加“wildcat”這個屬性，將會使該元素擁有新的行為。就這樣，我們教會了瀏覽器如何處理會躲貓貓的元素（放心，你不是在某個房間，你不會掛的-_-!）。我們通過這一途徑擴展了瀏覽器的“詞匯量”。對于任意一個熟悉HTML規則的人，這算是一個比較自然的方式。

現在已經夜深了，明天繼續。。。廣告之后見

===================華麗的分割線=======================

四、理解視圖（View）

　　外面有許多模版系統，它們通常都通過模版字符串與數據進行連接，生成最終的HTML字符串，并將結果通過innerHTML屬性寫入某元素里。

　　這意味著任何數據發生改變時，都需要重新將數據、模版合并成字符串，然后當作innerHTML寫回對應元素中。這里存在一些問題：(這里直譯實在沒法懂..唯有YY)假設有這么一個場景，模版里包含輸入框。用戶對在輸入框進行輸入，模版同步更新。普通模版通過innerHTML、字符串與數據連接的方式更新視圖，這樣會打斷用戶的輸入，體驗不好。

　　Angular是與眾不同的。Angular編譯器（compiler）通過directives處理DOM，而不是通過處理字符串模版。處理結果是一個與scope model組合并生成實時模版的鏈接函數（linking function）。視圖與scope model的綁定對我們來說是透明的。開發者無須為更新視圖、model做任何動作。而且，因為沒有使用innerHTML更新視圖模版，所以用戶輸入不會被打斷。此外，angular directives不僅可以綁定文本值，而且還可以是擁有行為的結構（behavioral constructs）。