一、啟動(dòng)階段

        大家應(yīng)該都知道，當(dāng)瀏覽器加載一個(gè)HTML頁面時(shí)，它會(huì)將HMTL頁面先解析成DOM樹，然后逐個(gè)加載DOM樹中的每一個(gè)元素節(jié)點(diǎn)。我們可以把AngularJS當(dāng)做一個(gè)類似jQuery的js庫，我們通過<script>標(biāo)簽引入到HTML中，那么此時(shí)Angular就做為一個(gè)普通的DOM節(jié)點(diǎn)等待瀏覽器解析，當(dāng)瀏覽器解析到這個(gè)節(jié)點(diǎn)時(shí)，發(fā)現(xiàn)它是一個(gè)js文件，那么瀏覽器會(huì)停止解析剩余的DOM節(jié)點(diǎn)，開始執(zhí)行這個(gè)js（即angular.js），同時(shí)Angular會(huì)設(shè)置一個(gè)事件監(jiān)聽器來監(jiān)聽瀏覽器的DOMContentLoaded事件。當(dāng)Angular監(jiān)聽到這個(gè)事件時(shí)，就會(huì)啟動(dòng)Angular應(yīng)用。

        二、初始化階段

        Angular開始啟動(dòng)后，它會(huì)查找ng-app指令，然后初始化一系列必要的組件（即$injector、$compile服務(wù)以及$rootScope），接著重新開始解析DOM樹。

        三、編譯、鏈接

        $compile服務(wù)通過遍歷DOM樹的方式查找有聲明指令的DOM元素。當(dāng)碰到帶有一個(gè)或多個(gè)指令的DOM元素時(shí)，它會(huì)排序這些指令（基于指令的priority優(yōu)先級），然后使用$injector服務(wù)查找和收集指令的compile函數(shù)并執(zhí)行它。

        每個(gè)節(jié)點(diǎn)的編譯方法運(yùn)行之后，$compile服務(wù)就會(huì)調(diào)用鏈接函數(shù)。這個(gè)鏈接函數(shù)為綁定了封閉作用域的指令設(shè)置監(jiān)控。這一行為會(huì)創(chuàng)建實(shí)時(shí)視圖。

        最后，在$compile服務(wù)完成后，AngularJS運(yùn)行時(shí)就準(zhǔn)備好了。

        四、運(yùn)行階段

        Angular提供了自己的事件循環(huán)。指令自身會(huì)注冊事件監(jiān)聽器，因此當(dāng)事件被觸發(fā)時(shí)，指令函數(shù)就會(huì)運(yùn)行在AngularJS的$digest循環(huán)中。$digest循環(huán)會(huì)等待$watch表達(dá)式列表，當(dāng)檢測到模型變化后，就會(huì)調(diào)用$watch函數(shù)，然后再次查看$watch列表以確保沒有模型被改變。

        一旦$digest循環(huán)穩(wěn)定下來，并且檢測到?jīng)]有潛在的變化了，執(zhí)行過程就會(huì)離開Angular上下文并且通常會(huì)回到瀏覽器中，DOM將會(huì)被渲染到這里。

        將以上過程的關(guān)鍵步驟繪制成一張圖，如下：

以上就是AngularJS 執(zhí)行流程的詳細(xì)介紹，后續(xù)繼續(xù)整理相關(guān)資料，謝謝大家對本站的支持。

最新評論