首頁 > web前端 > js教程 > 淺析Angular變更偵測中的訂閱非同步事件

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

青灯夜游
發布: 2022-12-14 20:08:11
轉載
2458 人瀏覽過

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

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

如何訂閱非同步事件

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

zone.js

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

zone.js是透過打補丁的方式來對瀏覽器中常見方法和元素進行攔截,例如setTimeoutHTMLElement.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中文網其他相關文章!

來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板