淺析Angular變更偵測中的訂閱非同步事件

在上一篇文章中，我們介紹了具體什麼是變更檢測，用一個原生JS範例來更好的去理解變更檢測，以及介紹了在哪些場景下會觸發變更偵測。前文中總結了5種工作中常見的場景，但是我們需要先思考一下，Angular的變更偵測是否支援所有的非同步事件呢？如果支持，可以列出來嗎？如果有些不支持，哪些不支持呢？這些問題會在後續文章中詳細的解釋。 【相關教學推薦：《angular教學》】

如何訂閱非同步事件

只要發生了非同步操作，Angular就後進行變更偵測，那麼Angular是如何訂閱（感知）到非同步事件的呢？也就是說，當非同步事件執行的時候，Angular是怎麼知道的呢？先來了解zone.js。

zone.js

zone.js 提供了一種稱為zone的機制，用於封裝和攔截瀏覽器中的非同步任務，也提供了非同步生命週期鉤子和統一的非同步錯誤處理機制。

zone.js是透過打補丁的方式來對瀏覽器中常見方法和元素進行攔截，例如setTimeout和HTMLElement.prototype.onclick。 Angular在啟動時會利用zone.js修補幾個瀏覽器API，從而去實現非同步事件的捕獲，並在捕獲事件後呼叫變更偵測。

package.json如下範例：

{
  "dependencies": {  
     ...
    "zone.js": "~0.10.2"
  }
}

可以簡單來看zone.js。

例如，在Vue2中的資料響應式，我們都知道它是使用了Object.defineProperty來實現資料變更的攔截，但是它存在著許多問題，它只可以監聽物件的屬性變化，但是對於陣列的變化時無能為力的。數組原型中有7個方法可以造成數組的變化，而對於這些方法Vue都需要感知到他們，那要怎麼實現呢？拿push方法作為例子，需要把原始的push方法覆寫掉，實作一個新的push，新的push方法要保留原始push方法的功能，還要通知依賴進行更新。

zone.js中的實作和這個想法是一樣的，來看一段簡化的程式碼模擬一下setTimeout的補丁過程：

function setTimeoutPatch() {
  // 存储原始的setTimeout
  var originSetTimeout = window['setTimeout'];
  // 对浏览器原生方法的包裹封装
  window.setTimeout = function () {
      return global['zone']['setTimeout'].apply(global.zone, arguments);
  };
  // 创建包裹方法，提供给上面重写后的setTimeout使用
  Zone.prototype['setTimeout'] = function (fn, delay) {
    // 先调用原始方法
   originSetTimeout.apply(window, arguments);
   // 执行完原始方法后就可以做其他拦截后需要进行的操作了
   ...
  };
}

是不是對zone. js的基本原理有了了解了呢。

更多程式相關知識，請造訪：程式設計教學！ ！

以上是淺析Angular變更偵測中的訂閱非同步事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！