AngularJs1.x解讀 $watch 和 $digest

Rainie 發布于2019-08-23 12:01 / 3010人閱讀

摘要：對象其實就是一個簡單的。和和就像一個硬幣的兩面。他們組合在一起就是臟檢查循環的核心對于數據變化的響應。臟值檢測目的只有監控的值發生改變的時候我們才執行對應的。思路存儲上一次的值，和這一次值的進行比對。中默認的為，對外暴露可修改。

Scope object

Scope對象其實就是一個簡單的POJO(plain old JavaScript Object)。我們可以給它任意的添加屬性。

// scope.js
export default class Scope {

}
// test.js
const scope = new Scope();
scope.aProperty = 1;
expect(scope.aProperty).toBe(1);

$watch 和 $digest

$watch和$digest就像一個硬幣的兩面。他們組合在一起就是臟檢查循環的核心：對于數據變化的響應。

$watch：

$watch(watchExpression, listener, [objectEquality]);

watchExpression: 監聽的數據

listener：數據發生變化的時候調用

objectEquality: 后面多帶帶說

angularjs中將所有的 watchExpression 存放到一個叫作$$watcher的數組中，因此我們創建一個數組：

$$watchers = [];

$watch(watchFn, listenerFn) {

    const watcher = {
      watchFn,
      listenerFn
    };
    
    this.$$watchers.push(watcher);
}

$digest：

它遍歷scope上的所有watchers，計算 watchExpression ，并且調用它對應的 listenerFn。

_.forEach(this.$$watchers, watcher => {
  watcher.listenerFn();
});

臟值檢測

目的：只有監控的值發生改變的時候我們才執行對應的listener。
思路：存儲上一次的值，和這一次值的進行比對。

$digest() {
    // 將變量聲明提取到循環外面
    let newValue;
    let oldValue;
    
    _.forEach(this.$$watchers, watcher => {
      
      newValue = watcher.watchFn(this);
      // 第一次獲取last的時候值為undefined
      oldValue = watcher.last;
      // 只有當新舊值不相等的時候才執行listener
      if (newValue !== oldValue) {
        watcher.last = newValue;
        watcher.listenerFn(newValue, oldValue, this);
      }
    });
}

初始化watch的值

angularjs中的初始化值為一個函數：

function initWatchVal() {}

然后將其賦值給watch的last:

const watcher = {
  watchFn,
  listenerFn,
  last: initWacthVal
};

持續監測

添加一個幫助方法，將所有的watchFn運行一次，返回一個boolean值，表示是否有更新：

$digest() {
  
    let newValue;
    let oldValue;
    // 標記是否為臟
    let dirty;
    // 上來先執行一次看是否所有值發生變化，如果有變化，則第二次執行watch
    do {
      // 初次進來設置為false
      dirty = false;
    
      _.forEach(this.$$watchers, watcher => {
      
        newValue = watcher.watchFn(this);
        // 第一次獲取last的時候值為undefined
        oldValue = watcher.last;
        // 只有當新舊值不相等的時候才執行listener
        if (newValue !== oldValue) {
          dirty = true;
          watcher.last = newValue;
          // watcher.listenerFn(newValue, oldValue, this);
          const temp = oldValue === initWacthVal ? newValue : oldValue;
          watcher.listenerFn(newValue, temp, this);
        }
      });
    
    } while (dirty);
    
}

ttl

如果watch一直為不穩定的值，我們需要停止臟檢查。angularjs中默認的ttl為10，對外暴露可修改。

// 如果為臟，并且ttl達到0的時候
if (dirty && !(ttl--)) {
    throw "10 digest iterations reached";
}

停止臟檢查

添加lastDirtyWatch去判斷,看源碼。

執行$digest的時候將 lastDirtyWatch = null

當前watcer 和 lastDirtyWatch 相同的時候設置為 null

watch的listener里面包含有watch的時候，重置為 null

基于值的臟檢查

$watch(watchExpression, listener, [objectEquality]);

判斷是否相等要包含數組和對象，angularjs內置的方法為：

angular.equals(o1, o2);

然后替換原來的新舊值的判斷：

// 判斷是否相等
function areEqual(newValue, oldValue, valueEq) {
  
  if (valueEq) {
    return _.isEqual(newValue, oldValue);
  } else {
    return newValue === oldValue;
  }

}

銷毀監聽

angularjs中的銷毀是給$watch的時候返回一個方法，當你調用的時候，直接將它從數組中移除。

$watch(watchFn, listenerFn, valueEq) {

    const watcher = {
      watchFn,
      listenerFn,
      valueEq, 
      last: initWacthVal
    };
    
    this.$$watchers.push(watcher);
    // 新加入一個watcher的時候將lastDirtyWatch初始化
    this.lastDirtyWatch = null;

    return () => {
      const index = _.find(this.$$watchers, watcher);
      if (index >= 0) {
        this.$$watchers.splice(index, 1);
      }
    };
}

對內簡單的分享,記錄下來。參照書名：build your own angularjs

云服務器 GPU云服務器 digester digest digester+weblogic watching

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97849.html

webpack 使用指南-緒論

摘要：在講解之前先回顧一下筆者在項目開發中的工作流變化時代此時工作流大致為結合插件處理視圖處理樣式等庫此時由于依賴少手動引入各種標簽結合調試界面時代利用指令服務控制器將邏輯拆分為多個文件利用編譯會將分為全局樣式和組件樣式下載各種依賴此時任需要手動在講解 webpack 之前先回顧一下筆者在項目開發中的工作流變化. jquery 時代此時工作流大致為 jquery 結合插件處理視圖 bo...

Nosee 2019-08-21 17:38 評論0 收藏0
Angular 學習筆記：$digest 實現原理

摘要：前綴表示私有變量上述代碼實現的并不實用，因為實際上我們需要的是監聽的對象數據發生改變時才執行相應的方法。我們使用來約束遍歷的最大次數，在中默認次數為。 $watch 和 $digest $watch 和 $digest 是數據綁定中的核心概念：我們可以使用 $watch 在 scope 中綁定 watcher 用于監聽 scope 中發生的變化，而 $digest 方法的執行即是遍歷 ...

baiy 2019-08-20 18:21 評論0 收藏0
angular的ViewModel設計

摘要：換言之，的對應的，此外它還有。它們共同構成的監控系統。和是相輔相成的。兩者一起，構成了作用域的核心功能數據變化的響應。迭代的最大值稱為。框架設計第三版，敬請期待 angular的ViewModel有一個專門的官方術語叫$scope, 它只是一個普通構造器（Scope）的實例。換言之，它是一個普通的JS對象。為了實現MVVM框架通常宣傳的那種改變數據即改變視圖的魔幻效果，它得裝備上更多更...

int64 2019-08-21 14:31 評論0 收藏0
angular性能優化心得

摘要：本文針對的讀者具備性能優化的相關知識雅虎條性能優化原則高性能網站建設指南等擁有實戰經驗。這種機制能減少瀏覽器次數，從而提高性能。僅會檢查該和它的子，當你確定當前操作僅影響它們時，用可以稍微提升性能。搬運自: http://atian25.github.io/2014/05/09/angular-performace/ 不知不覺，在項目中用angular已經半年多了，踩了很多坑...

guqiu 2019-08-19 14:44 評論0 收藏0
Angular面試從喜劇到悲劇的十個問題

摘要：雖然只有個問題，但是覆蓋了開發中的各個方面，有基本的知識點，也有在開發過程中遇見的問題，同時也有較為開放性的問題去辨別面試者的基礎水準和項目經驗如果自己一年前面試肯定是喜劇到悲劇的轉變。 showImg(https://segmentfault.com/img/bVyzEN); 雖然只有10個問題，但是覆蓋了angular開發中的各個方面，有基本的知識點，也有在開發過程中遇見的問題，同...

Scholer 2019-08-19 18:37 評論0 收藏0