首頁 > 開發者 > JavaScript
AngularJS HTML編譯器介紹，angularjs編譯器
概覽
AngularJS的HTML編譯器能讓瀏覽器識別新的HTML文法。它能讓你將行為關聯到HTML元素或者屬性上，甚至能讓你創造具有自訂行為的新元素。AngularJS稱這種行為擴充為“指令”
HTML在編寫靜態頁面時，有很多聲明式的結構來控制格式。比如你要把某個內容置中，你不必告訴瀏覽器“去找到視窗的中點位置，然後跟內容的中間結合”。你只需要添加一個 align="center" 的屬性給需要內容置中的元素就行了。這就是聲明式語言的強大之處。
但是聲明式語言也有力所不能及的地方，原因之一在於你不能用它來讓瀏覽器識別新的文法。比如說，你不要內容置中，而是居左到1/3,這時它就做不到了。所以我們需要一個辦法讓瀏覽器能學會新的HTML文法。
AngularJS生來內建一些對建立APP非常有用的指令。我們也希望你能自己創造一些對你自己的應用有用的指令。這些擴充的指令就是你建立APP的 “特定領域語言（Domain Specific Language）”。
編譯的過程都會在瀏覽器端發生；伺服器端不會參與到其中的任何步驟，也不會做先行編譯。
編譯器(complier)
編譯器是AngularJS提供的一項服務，它通過遍曆DOM來尋找和它相關的屬性。整個編譯的過程分為兩個階段。
1.編譯： 遍曆DOM並且收集所有的相關指令，產生一個連結函數。
2.連結： 給指令綁定一個範圍，產生一個動態視圖。範圍模型的任何改變都會反映到視圖上，並且視圖上的任何使用者操作也都會反映到範圍模型。這使得範圍模型成為你的商務邏輯裡唯一要關心的東西。
有一些指令，比如ng-repeat會為資料集合裡的每一項DOM元素都複製一次。將整個編譯過程分為編譯和連結兩個階段的作法改善了整體的效能，因為複製出來的模板總共只需要被編譯一次，然後連結到各自的模型執行個體上就行了。
指令
指令指示的是“當關聯的HTML結構進入編譯階段時應該執行的操作”。指令可以寫在元素的名稱裡，屬性裡，css類名裡，注釋裡。下面有幾個功能相同的使用ng-bind指令的例子。
複製代碼 代碼如下:
<span ng-bind="exp"></span>
<span class="ng-bind: exp;"></span>
<ng-bind></ng-bind>
<!-- directive: ng-bind exp -->
指令本質上只是一個當編譯器編譯到相關DOM時需要執行的函數。你可以在指令API文檔中找到更詳盡的關於指令的資料。
下面是一條能讓元素變得可拖拽的指令。注意<span>元素裡的那個draggable屬性。
index.html:
複製代碼 代碼如下:
<!doctype html>
<html ng-app="drag">
<head>
<script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<span draggable>Drag ME</span>
</body>
</html>
script.js:
複製代碼 代碼如下:
angular.module('drag', []).
directive('draggable', function($document) {
var startX=0, startY=0, x = 0, y = 0;
return function(scope, element, attr) {
element.css({
position: 'relative',
border: '1px solid red',
backgroundColor: 'lightgrey',
cursor: 'pointer'
});
element.bind('mousedown', function(event) {
startX = event.screenX - x;
startY = event.screenY - y;
$document.bind('mousemove', mousemove);
$document.bind('mouseup', mouseup);
});
function mousemove(event) {
y = event.screenY - startY;
x = event.screenX - startX;
element.css({
top: y + 'px',
left: x + 'px'
});
}
function mouseup() {
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
}
}
});
通過加入draggable屬性可以讓任何HTML元素都實現這個新的行為。我們這種改進的優美之處在於我們給了瀏覽器新能力。我們用了一種只要開發人員熟悉HTML規則，就會舉得很自然的方式擴充了瀏覽器理解新行為新文法的能力。
理解視圖
網上有很多的模板系統。他們大多數都是“將靜態字元模板和資料繫結，產生新字元，然後通過innerHTML插入到頁面元素中”。
這意味著資料上的任何改變，都會導致資料要重新和模板結合產生新字元，再插入到DOM裡。這其中會出現的問題有：需要讀取使用者輸入並和模型的資料結合，需要覆寫使用者的輸入，需要手動管理整個更新過程，缺少豐富的表現形式。
AngularJS則不同，AngularJS編譯器使用的是帶指令的DOM，而不是字串模板。它返回的是一個連結函數，這個函數和範圍模型結合就會產生一個動態視圖。這個視圖和模型的綁定過程是“透明的”。開發人員不需要做任何關於更新視圖的工作。並且應用沒有用到innerHTML，所以我們也不用覆寫使用者的輸入。更特別的是，Angular的指令不僅僅能使用字串形式的綁定，還可以使用一些指示行為的結構體。
AngularJS的編譯會產生一個“穩定的DOM”。這意味綁定了資料模型的DOM元素的執行個體不會在綁定的生命週期中發生改變。這也意味著代碼中可以擷取到DOM元素的執行個體引用並註冊事件，不用擔心這用引用會在模板和資料的結合時丟失。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
