進入正文前的說明:本文中的示例代碼并非AngularJs源碼,而是來自書籍<
在這篇文章中,希望能讓您理清楚以下幾項與scope相關(guān)的功能:
1.dirty-checking(臟檢測)核心機制,主要包括:$watch 和 $digest;
2.幾種不同的觸發(fā)$digest循環(huán)的方式:$eval, $apply, $evalAsync, $applyAsync;
3.scope的繼承機制以及isolated scope;
4.依賴于scope的事件循環(huán):$on, $broadcast, $emit.
現(xiàn)在開始我們的第一部分:scope和dirty-checking
dirty-checking(臟檢測)原理簡述:scope通過$watch方法向this.$$watchers數(shù)組中添加watcher對象(包含watchFn, listenerFn, valueEq, last 四個屬性)。每當(dāng)$digest循環(huán)被觸發(fā)時,它會遍歷$$watchers數(shù)組,執(zhí)行watcher中的watchFn,獲取當(dāng)前scope上某屬性的值(一個watcher對應(yīng)scope上一個被監(jiān)聽屬性),然后去同watcher中的last(上一次的值)做比較,若兩值不相等,就執(zhí)行l(wèi)istenerFn。
function Scope() { this.$$watchers = []; // 監(jiān)聽器數(shù)組 this.$$lastDirtyWatch = null; // 每次digest循環(huán)的最后一個臟的watcher, 用于優(yōu)化digest循環(huán) this.$$asyncQueue = []; // scope上的異步隊列 this.$$applyAsyncQueue = []; // scope上的異步apply隊列 this.$$applyAsyncId = null; //異步apply信息 this.$$postDigestQueue = []; // postDigest執(zhí)行隊列 this.$$phase = null; // 儲存scope上正在做什么,值有:digest/apply/null this.$root = this; // rootScope this.$$listeners = {}; // 存儲包含自定義事件鍵值對的對象 this.$$children = []; // 存儲當(dāng)前scope的兒子Scope,以便$digest循環(huán)遞歸 }
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。