Angular異步執(zhí)行學(xué)習(xí)之zone.js使用
什么是 Zone ?
或許你聽說過 Angular 使用了zone.js
, 但 Angular 為什么要使用zone.js
, 它能夠提供哪些功能呢?今天我們單獨(dú)寫一篇文章聊聊zone.js
,關(guān)于它在 Angular 框架中發(fā)揮的作用將在下一篇文章講述。
什么是 Zone ? 官方文檔是這么解釋的:Zone 是一個(gè)跨多個(gè)異步任務(wù)的執(zhí)行上下文。一句話總結(jié)來說,Zone 在攔截或追蹤異步任務(wù)方面有著特別強(qiáng)大的能力。
工作原理剖析
下面我們將通過一個(gè)示例來展示它的能力,并簡(jiǎn)單剖析一下背后的工作原理。
<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>
這是一個(gè)簡(jiǎn)單的 HTML 頁面。頁面加載時(shí)會(huì)給第一個(gè)按鈕添加點(diǎn)擊事件,其點(diǎn)擊事件函數(shù)的功能是給第二個(gè)按鈕添加點(diǎn)擊事件,而第二個(gè)按鈕的點(diǎn)擊事件函數(shù)功能是拋出一個(gè)異常。我們依次點(diǎn)擊第一個(gè)按鈕和第二個(gè)按鈕,控制臺(tái)顯示如下:
(索引):26 Uncaught Error: aw shucks
at HTMLButtonElement.throwError ((索引):26:13)
zone.js啟動(dòng)
但是如果我們通過zone.js
啟動(dòng)運(yùn)行代碼,控制臺(tái)輸出會(huì)有什么不同呢,我們先調(diào)整啟動(dòng)代碼:
Zone.current.fork( { name: 'error', onHandleError: function (parentZoneDelegate, currentZone, targetZone, error) { console.log(error.stack); } } ).fork(Zone.longStackTraceZoneSpec).run(main);
此時(shí)控制臺(tái)輸出如下:
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)
通過對(duì)比我們知道:不引入zone.js
時(shí),我們通過錯(cuò)誤調(diào)用棧僅僅能夠知道,異常是由按鈕2的點(diǎn)擊函數(shù)拋出。而引入了zone.js
后,我們不僅知道異常是由按鈕2的點(diǎn)擊函數(shù)拋出,還知道它的點(diǎn)擊函數(shù)是由按鈕1的點(diǎn)擊函數(shù)綁定的,甚至能夠知道最開始的應(yīng)用啟動(dòng)是main
函數(shù)觸發(fā)。這種能夠持續(xù)追蹤多個(gè)異步任務(wù)的能力在大型復(fù)雜項(xiàng)目中異常重要,現(xiàn)在我們來看zone.js
是如何做到的吧。
zone.js
接管了瀏覽器提供的異步 API,比如點(diǎn)擊事件、計(jì)時(shí)器等等。也正是因?yàn)檫@樣,它才能夠?qū)Ξ惒讲僮饔懈鼜?qiáng)的控制介入能力,提供更多的能力?,F(xiàn)在我們拿點(diǎn)擊事件舉例,看看它是如何做到的吧。
proto[ADD_EVENT_LISTENER] = makeAddListener(nativeAddEventListener,..)
上述代碼中,proto
便指的是EventTarget.prototype
,也就是說這行代碼重新定義了addEventListener
函數(shù)。
makeAddListener函數(shù)
我們繼續(xù)看看makeAddListener
函數(shù)做了什么。
function makeAddListener() { ...... // 關(guān)鍵代碼1 nativeListener.apply(this, arguments); ...... // 關(guān)鍵代碼2 const task = zone.scheduleEventTask(source, ...) ...... }
該函數(shù)主要做了兩件事,一是在自定義函數(shù)中執(zhí)行瀏覽器本身提供的addEventListener
函數(shù),另外一個(gè)就是為每個(gè)點(diǎn)擊函數(shù)安排了一個(gè)事件任務(wù),這也是zone.js
對(duì)異步 API 有強(qiáng)大介入能力的重要因素。
現(xiàn)在我們?cè)倩氐奖疚拈_頭的示例中,看看控制臺(tái)為什么能夠輸出完整的完整的函數(shù)調(diào)用棧。剛剛我們分析過了makeAddListener
函數(shù),其中提到它為每個(gè)點(diǎn)擊函數(shù)安排了一個(gè)事件任務(wù),也就是zone.scheduleEventTask
函數(shù)的執(zhí)行。這個(gè)安排事件任務(wù)函數(shù)最終其實(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; }
文章開頭控制臺(tái)輸出的完整的函數(shù)調(diào)用棧,存儲(chǔ)在currentTask.data[creationTrace]
里面,它是一個(gè)由LongStackTrace
實(shí)例組成的數(shù)組。每次有異步任務(wù)發(fā)生時(shí),onScheduleTask
函數(shù)便把當(dāng)前函數(shù)調(diào)用棧存儲(chǔ)記錄下來,我們看看類LongStackTrace
的構(gòu)造器就知道了:
class LongStackTrace { constructor() { this.error = getStacktrace(); this.timestamp = new Date(); } } function getStacktraceWithUncaughtError() { return new Error(ERROR_TAG); }
this.error
存儲(chǔ)的便是函數(shù)調(diào)用棧,getStacktrace
函數(shù)通常調(diào)用的是getStacktraceWithUncaughtError
函數(shù),我們看到 new Error
大概就能夠知道整個(gè)調(diào)用棧是如何得來的了。
本文分析的只是zone.js
能力的一個(gè)示例,如果你希望了解更多功能可以參閱官方文檔。通過這個(gè)示例,希望讀者能對(duì)zone.js
有一個(gè)大概的認(rèn)識(shí),因?yàn)樗彩?Angular 變更檢測(cè)不可或缺的基石,更多關(guān)于Angular異步執(zhí)行zone的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Angular實(shí)踐之將Input與Lifecycle轉(zhuǎn)換成流示例詳解
這篇文章主要為大家介紹了Angular實(shí)踐之將Input與Lifecycle轉(zhuǎn)換成流示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02AngularJS利用Controller完成URL跳轉(zhuǎn)
本文的主要內(nèi)容是介紹在AngularJS中怎樣利用Controller實(shí)現(xiàn)URL跳轉(zhuǎn),本文給出了實(shí)例代碼,簡(jiǎn)單明了,有需要的可以參考學(xué)習(xí)。2016-08-08Angular.js中定時(shí)器循環(huán)的3種方法總結(jié)
這篇文章主要給大家總結(jié)了angular.js中定時(shí)器循環(huán)的3種方法,分別是利用$interlval實(shí)現(xiàn)、$timeout的遞歸調(diào)用來實(shí)現(xiàn)以及$timeout借助arguments.callee來實(shí)現(xiàn),每種方法都給出了詳細(xì)的示例艾瑪供大家學(xué)習(xí)參考,需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-04-04Angular 數(shù)據(jù)請(qǐng)求的實(shí)現(xiàn)方法
本篇文章主要介紹了Angular 數(shù)據(jù)請(qǐng)求的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05Angular5中調(diào)用第三方j(luò)s插件的方法
下面小編就為大家分享一篇Angular5中調(diào)用第三方j(luò)s插件的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02AngularJS學(xué)習(xí)筆記之TodoMVC的分析
這篇文章主要介紹了AngularJS學(xué)習(xí)筆記之TodoMVC的分析的相關(guān)資料,需要的朋友可以參考下2015-02-02