AngularJS HTML編譯器介紹
概覽
AngularJS的HTML編譯器能讓瀏覽器識(shí)別新的HTML語(yǔ)法。它能讓你將行為關(guān)聯(lián)到HTML元素或者屬性上,甚至能讓你創(chuàng)造具有自定義行為的新元素。AngularJS稱(chēng)這種行為擴(kuò)展為“指令”
HTML在編寫(xiě)靜態(tài)頁(yè)面時(shí),有很多聲明式的結(jié)構(gòu)來(lái)控制格式。比如你要把某個(gè)內(nèi)容居中,你不必告訴瀏覽器“去找到窗口的中點(diǎn)位置,然后跟內(nèi)容的中間結(jié)合”。你只需要添加一個(gè) align="center" 的屬性給需要內(nèi)容居中的元素就行了。這就是聲明式語(yǔ)言的強(qiáng)大之處。
但是聲明式語(yǔ)言也有力所不能及的地方,原因之一在于你不能用它來(lái)讓瀏覽器識(shí)別新的語(yǔ)法。比如說(shuō),你不要內(nèi)容居中,而是居左到1/3,這時(shí)它就做不到了。所以我們需要一個(gè)辦法讓瀏覽器能學(xué)會(huì)新的HTML語(yǔ)法。
AngularJS生來(lái)自帶一些對(duì)創(chuàng)建APP非常有用的指令。我們也希望你能自己創(chuàng)造一些對(duì)你自己的應(yīng)用有用的指令。這些擴(kuò)展的指令就是你創(chuàng)建APP的 “特定領(lǐng)域語(yǔ)言(Domain Specific Language)”。
編譯的過(guò)程都會(huì)在瀏覽器端發(fā)生;服務(wù)器端不會(huì)參與到其中的任何步驟,也不會(huì)做預(yù)編譯。
編譯器(complier)
編譯器是AngularJS提供的一項(xiàng)服務(wù),它通過(guò)遍歷DOM來(lái)查找和它相關(guān)的屬性。整個(gè)編譯的過(guò)程分為兩個(gè)階段。
1.編譯: 遍歷DOM并且收集所有的相關(guān)指令,生成一個(gè)鏈接函數(shù)。
2.鏈接: 給指令綁定一個(gè)作用域,生成一個(gè)動(dòng)態(tài)的視圖。作用域模型的任何改變都會(huì)反映到視圖上,并且視圖上的任何用戶(hù)操作也都會(huì)反映到作用域模型。這使得作用域模型成為你的業(yè)務(wù)邏輯里唯一要關(guān)心的東西。
有一些指令,比如ng-repeat會(huì)為數(shù)據(jù)集合里的每一項(xiàng)DOM元素都克隆一次。將整個(gè)編譯過(guò)程分為編譯和鏈接兩個(gè)階段的作法改善了整體的性能,因?yàn)榭寺〕鰜?lái)的模板總共只需要被編譯一次,然后鏈接到各自的模型實(shí)例上就行了。
指令
指令指示的是“當(dāng)關(guān)聯(lián)的HTML結(jié)構(gòu)進(jìn)入編譯階段時(shí)應(yīng)該執(zhí)行的操作”。指令可以寫(xiě)在元素的名稱(chēng)里,屬性里,css類(lèi)名里,注釋里。下面有幾個(gè)功能相同的使用ng-bind指令的例子。
<span ng-bind="exp"></span>
<span class="ng-bind: exp;"></span>
<ng-bind></ng-bind>
<!-- directive: ng-bind exp -->
指令本質(zhì)上只是一個(gè)當(dāng)編譯器編譯到相關(guān)DOM時(shí)需要執(zhí)行的函數(shù)。你可以在指令A(yù)PI文檔中找到更詳盡的關(guān)于指令的資料。
下面是一條能讓元素變得可拖拽的指令。注意<span>元素里的那個(gè)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);
}
}
});
通過(guò)加入draggable屬性可以讓任何HTML元素都實(shí)現(xiàn)這個(gè)新的行為。我們這種改進(jìn)的優(yōu)美之處在于我們給了瀏覽器新能力。我們用了一種只要開(kāi)發(fā)者熟悉HTML規(guī)則,就會(huì)舉得很自然的方式擴(kuò)展了瀏覽器理解新行為新語(yǔ)法的能力。
理解視圖
網(wǎng)上有很多的模板系統(tǒng)。他們大多數(shù)都是“將靜態(tài)的字符模板和數(shù)據(jù)綁定,生成新字符,然后通過(guò)innerHTML插入到頁(yè)面元素中”。
這意味著數(shù)據(jù)上的任何改變,都會(huì)導(dǎo)致數(shù)據(jù)要重新和模板結(jié)合生成新字符,再插入到DOM里。這其中會(huì)出現(xiàn)的問(wèn)題有:需要讀取用戶(hù)輸入并和模型的數(shù)據(jù)結(jié)合,需要覆寫(xiě)用戶(hù)的輸入,需要手動(dòng)管理整個(gè)更新過(guò)程,缺少豐富的表現(xiàn)形式。
AngularJS則不同,AngularJS編譯器使用的是帶指令的DOM,而不是字符串模板。它返回的是一個(gè)鏈接函數(shù),這個(gè)函數(shù)和作用域模型結(jié)合就會(huì)生成一個(gè)動(dòng)態(tài)視圖。這個(gè)視圖和模型的綁定過(guò)程是“透明的”。開(kāi)發(fā)者不需要做任何關(guān)于更新視圖的工作。并且應(yīng)用沒(méi)有用到innerHTML,所以我們也不用覆寫(xiě)用戶(hù)的輸入。更特別的是,Angular的指令不僅僅能使用字符串形式的綁定,還可以使用一些指示行為的結(jié)構(gòu)體。
AngularJS的編譯會(huì)生成一個(gè)“穩(wěn)定的DOM”。這意味綁定了數(shù)據(jù)模型的DOM元素的實(shí)例不會(huì)在綁定的生命周期中發(fā)生改變。這也意味著代碼中可以獲取到DOM元素的實(shí)例引用并注冊(cè)事件,不用擔(dān)心這用引用會(huì)在模板和數(shù)據(jù)的結(jié)合時(shí)丟失。
相關(guān)文章
Angular7中創(chuàng)建組件/自定義指令/管道的方法實(shí)例詳解
這篇文章主要介紹了在angular7中創(chuàng)建組件/自定義指令/管道的相關(guān)知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04AngularJS實(shí)現(xiàn)的輸入框字?jǐn)?shù)限制提醒功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的輸入框字?jǐn)?shù)限制提醒功能,涉及AngularJS事件監(jiān)聽(tīng)與元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10Angular.js自定義指令學(xué)習(xí)筆記實(shí)例
這篇文章主要介紹了Angular.js自定義指令的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02angular2+node.js express打包部署的實(shí)戰(zhàn)
本篇文章主要介紹了angular2+node.js express打包部署的實(shí)戰(zhàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07AngularJS模糊查詢(xún)功能實(shí)現(xiàn)代碼(過(guò)濾內(nèi)容下拉菜單排序過(guò)濾敏感字符驗(yàn)證判斷后添加表格信息)
最近做項(xiàng)目遇到這樣的需求,要求添加球員的功能,具體樣式?jīng)]做具體要求,下面小編給大家?guī)?lái)了AngularJS模糊查詢(xún)功能實(shí)現(xiàn)代碼(過(guò)濾內(nèi)容下拉菜單排序過(guò)濾敏感字符驗(yàn)證判斷后添加表格信息),感興趣的朋友一起看看吧2017-10-10angularJS 發(fā)起$http.post和$http.get請(qǐng)求的實(shí)現(xiàn)方法
本篇文章主要介紹了angularJS 發(fā)起$http.post和$http.get請(qǐng)求的實(shí)現(xiàn)方法,分別介紹了$http.post和$http.get請(qǐng)求的方法,有興趣的可以了解一下2017-05-05