您好,登錄后才能下訂單哦!
這篇文章主要介紹“Angular中zone.js的工作原理是什么”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“Angular中zone.js的工作原理是什么”文章能幫助大家解決問題。
什么是 Zone ? 官方文檔是這么解釋的:Zone 是一個跨多個異步任務的執(zhí)行上下文。一句話總結(jié)來說,Zone 在攔截或追蹤異步任務方面有著特別強大的能力。下面我們將通過一個示例來展示它的能力,并簡單剖析一下背后的工作原理。
<button id="b1">Bind Error</button> <button id="b2">Cause Error</button> <script> function main() { b1.addEventListener('click', bindSecondButton); } function bindSecondButton() { b2.addEventListener('click', throwError); } function throwError() { throw new Error('aw shucks'); } main(); </script>
這是一個簡單的 HTML 頁面。頁面加載時會給第一個按鈕添加點擊事件,其點擊事件函數(shù)的功能是給第二個按鈕添加點擊事件,而第二個按鈕的點擊事件函數(shù)功能是拋出一個異常。我們依次點擊第一個按鈕和第二個按鈕,控制臺顯示如下:
(索引):26 Uncaught Error: aw shucks at HTMLButtonElement.throwError ((索引):26:13)
但是如果我們通過zone.js
啟動運行代碼,控制臺輸出會有什么不同呢,我們先調(diào)整啟動代碼:
Zone.current.fork( { name: 'error', onHandleError: function (parentZoneDelegate, currentZone, targetZone, error) { console.log(error.stack); } } ).fork(Zone.longStackTraceZoneSpec).run(main);
此時控制臺輸出如下:
Error: aw shucks at HTMLButtonElement.throwError ((索引):26:13) at ZoneDelegate.invokeTask (zone.js:406:31) at Zone.runTask (zone.js:178:47) at ZoneTask.invokeTask [as invoke] (zone.js:487:34) at invokeTask (zone.js:1600:14) at HTMLButtonElement.globalZoneAwareCallback (zone.js:1626:17) at ____________________Elapsed_571_ms__At__Mon_Jan_31_2022_20_09_09_GMT_0800_________ (localhost) at Object.onScheduleTask (long-stack-trace-zone.js:105:22) at ZoneDelegate.scheduleTask (zone.js:386:51) at Zone.scheduleTask (zone.js:221:43) at Zone.scheduleEventTask (zone.js:247:25) at HTMLButtonElement.addEventListener (zone.js:1907:35) at HTMLButtonElement.bindSecondButton ((索引):23:10) at ZoneDelegate.invokeTask (zone.js:406:31) at Zone.runTask (zone.js:178:47) at ____________________Elapsed_2508_ms__At__Mon_Jan_31_2022_20_09_06_GMT_0800_________ (localhost) at Object.onScheduleTask (long-stack-trace-zone.js:105:22) at ZoneDelegate.scheduleTask (zone.js:386:51) at Zone.scheduleTask (zone.js:221:43) at Zone.scheduleEventTask (zone.js:247:25) at HTMLButtonElement.addEventListener (zone.js:1907:35) at main ((索引):20:10) at ZoneDelegate.invoke (zone.js:372:26) at Zone.run (zone.js:134:43)
通過對比我們知道:不引入zone.js
時,我們通過錯誤調(diào)用棧僅僅能夠知道,異常是由按鈕2的點擊函數(shù)拋出。而引入了zone.js
后,我們不僅知道異常是由按鈕2的點擊函數(shù)拋出,還知道它的點擊函數(shù)是由按鈕1的點擊函數(shù)綁定的,甚至能夠知道最開始的應用啟動是main
函數(shù)觸發(fā)。這種能夠持續(xù)追蹤多個異步任務的能力在大型復雜項目中異常重要,現(xiàn)在我們來看zone.js
是如何做到的吧。
zone.js
接管了瀏覽器提供的異步 API,比如點擊事件、計時器等等。也正是因為這樣,它才能夠?qū)Ξ惒讲僮饔懈鼜姷目刂平槿肽芰?,提供更多的能力?,F(xiàn)在我們拿點擊事件舉例,看看它是如何做到的吧。
proto[ADD_EVENT_LISTENER] = makeAddListener(nativeAddEventListener,..)
上述代碼中,proto
便指的是EventTarget.prototype
,也就是說這行代碼重新定義了addEventListener
函數(shù)。我們繼續(xù)看看makeAddListener
函數(shù)做了什么。
function makeAddListener() { ...... // 關鍵代碼1 nativeListener.apply(this, arguments); ...... // 關鍵代碼2 const task = zone.scheduleEventTask(source, ...) ...... }
該函數(shù)主要做了兩件事,一是在自定義函數(shù)中執(zhí)行瀏覽器本身提供的addEventListener
函數(shù),另外一個就是為每個點擊函數(shù)安排了一個事件任務,這也是zone.js
對異步 API 有強大介入能力的重要因素。
現(xiàn)在我們再回到本文開頭的示例中,看看控制臺為什么能夠輸出完整的完整的函數(shù)調(diào)用棧。剛剛我們分析過了makeAddListener
函數(shù),其中提到它為每個點擊函數(shù)安排了一個事件任務,也就是zone.scheduleEventTask
函數(shù)的執(zhí)行。這個安排事件任務函數(shù)最終其實執(zhí)行的是onScheduleTask
:
onScheduleTask: function (..., task) { const currentTask = Zone.currentTask; let trace = currentTask && currentTask.data && currentTask.data[creationTrace] || []; trace = [new LongStackTrace()].concat(trace); task.data[creationTrace] = trace; }
文章開頭控制臺輸出的完整的函數(shù)調(diào)用棧,存儲在currentTask.data[creationTrace]
里面,它是一個由LongStackTrace
實例組成的數(shù)組。每次有異步任務發(fā)生時,onScheduleTask
函數(shù)便把當前函數(shù)調(diào)用棧存儲記錄下來,我們看看類LongStackTrace
的構(gòu)造器就知道了:
class LongStackTrace { constructor() { this.error = getStacktrace(); this.timestamp = new Date(); } } function getStacktraceWithUncaughtError() { return new Error(ERROR_TAG); }
this.error
存儲的便是函數(shù)調(diào)用棧,getStacktrace
函數(shù)通常調(diào)用的是getStacktraceWithUncaughtError
函數(shù),我們看到new Error
大概就能夠知道整個調(diào)用棧是如何得來的了。
關于“Angular中zone.js的工作原理是什么”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識,可以關注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。