之前有写过一些介绍 Angular 中一些理念的文章,接下来我们来聊聊 Angular 中的一些依赖,比如 zone.js。它是一个跨多个异步任务的执行上下文,在拦截或追踪异步任务方面有着特别强大的能力。来跟着啸达同学的文章,一起了解一下吧~
前言
最近一段时间因为工作上的安排,需要研究 Angular 中的一些内部机制和模块。Angular 作为一个专门为大型前端项目而设计的优秀框架,实际上有很多值得大家学习和借鉴的优点的。之前了解到 Angular 的变更检测跟 Vue 和 React 有本质的区别,而 Angular 的检测体系是离不开 zone.js 的,所以本系列就针对 zone.js 进行一些分享,也希望能够随着个人对 zone.js 逐步学习制作一个由浅入深地学习指导,欢迎大家积极上车,一起学习、探讨。
为什么要学习 zone.js
这个系列的文章会包含大量的猜想、验证、demo 和源码分析。在我自己学习的过程中,也出现过多次想要放弃,或者觉得差不多就行了的想法。所以如果想要坚持一件事,需要有一些明确的动机,毕竟动机不纯,想装纯也难。那么就我个人而言,除了工作上的需要之外,我觉得有以下两点驱动力:
动机一
17 年的时候,有幸参加了一次大厂的面试,技面的时候我被问到 Angular 是如何处理变更检测的。我对这块的知识十分模糊,所以乱答了一气。我把脑子里跟变更检测相关的词都掏了出来,结果越描越黑,最后不能自圆其说。面试官跟我说,希望我以后把这块内容理理顺。我答应了他,但没想到竟是 6 年以后。
动机二
相信每个 Angular 的开发者都会见过类似下面这样的报错信息,甚至有些初学 Angular 的同事也因此觉得 Angular 的学习曲线比较陡峭、错误信息极不友好。其实,大家认为这些不友好的错误信息正是 zone.js 强大的地方。在不了解 zone.js 的前提下,这确实有点反人类。所以希望在学完这个系列后,不仅知道这样的错误意味着什么,还能清楚这样的问题是怎么产生的。
at HTMLButtonElement.throwError (https://zonejs-basic.stackblitz.io/~/index.js:19:11)
at _ZoneDelegate.invokeTask (https://unpkg.com/zone.js:446:35)
at Zone.runTask (https://unpkg.com/zone.js:214:51)
at ZoneTask.invokeTask [as invoke] (https://unpkg.com/zone.js:528:38)
at invokeTask (https://unpkg.com/zone.js:1730:22)
at globalCallback (https://unpkg.com/zone.js:1761:31)
at HTMLButtonElement.globalZoneAwareCallback (https://unpkg.com/zone.js:1797:20)
at ____________________Elapsed_496_ms__At__Fri_Jan_20_2023_16_20_20_GMT_0800_________ (http://localhost)
at Object.onScheduleTask (https://unpkg.com/zone.js@0.8.20/dist/long-stack-trace-zone.js:108:22)
at _ZoneDelegate.scheduleTask (https://unpkg.com/zone.js:426:55)
at Zone.scheduleTask (https://unpkg.com/zone.js:257:47)
at Zone.scheduleEventTask (https://unpkg.com/zone.js:283:29)
at HTMLButtonElement.addEventListener (https://unpkg.com/zone.js:2038:37)
at HTMLButtonElement.bindSecondButton (https://zonejs-basic.stackblitz.io/~/index.js:16:8)
at _ZoneDelegate.invokeTask (https://unpkg.com/zone.js:446:35)
at Zone.runTask (https://unpkg.com/zone.js:214:51)
at ____________________Elapsed_1801_ms__At__Fri_Jan_20_2023_16_20_18_GMT_0800_________ (http://localhost)
at Object.onScheduleTask (https://unpkg.com/zone.js@0.8.20/dist/long-stack-trace-zone.js:108:22)
at _ZoneDelegate.scheduleTask (https://unpkg.com/zone.js:426:55)
at Zone.scheduleTask (https://unpkg.com/zone.js:257:47)
at Zone.scheduleEventTask (https://unpkg.com/zone.js:283:29)
at HTMLButtonElement.addEventListener (https://unpkg.com/zone.js:2038:37)
at main (https://zonejs-basic.stackblitz.io/~/index.js:5:8)
at _ZoneDelegate.invoke (https://unpkg.com/zone.js:412:30)
at Zone.run (https://unpkg.com/zone.js:169:47)
复制代码
简单认识一下
我不太会抽象概括,幸好 Angular 团队对 zone.js 的定义只有一句,但是它简单抽象到让你看了和没看都没什么区别:
A Zone is an execution context that persists across async tasks. You can think of it as thread-local storage for JavaScript VMs.
到目前为止,我觉得大家也不必太在意这里描述了个啥,后面我会用其它的方式让你渐渐了解它。这里姑且对几个词有点印象即可:
PS:Angular 团队对 zone.js 还有个视频介绍,建议大家可以等看完这篇文章后去了解一下。
ngZone 和 zone.js,傻傻分不清
最后在真正开始之前我要再补充一个知识点,有些人在学习 zone.js 的还见过 ngZone 这个东西,就认为这两个是一个东西。这里做个简单的声明,Angular 团队基于 zone.js 构建了 ngZone 服务。NgZone 定义 Angular 的执行上下文,可以先简单理解为是一个专门给 Angular 使用的定制化以后的 zone.js。那么关于 ngZone 的知识,可以关注一下系列四和西系列五(如果有的话),在那里会有对 ngZone 和 Angular 具体的变更检测方法做详细介绍。
所以一句话概括两者的关系,ngZone 生于 zone.js;长于 Angular(生于斯,长于斯)。
从一个游戏开始了解 zone.js
本文由真实事迹改编,如有雷同,绝非偶然
2022 年底,本人工作的部门组织了一场 switch 对决赛。游戏有 A、B 两支参赛队伍,每支队伍 15 人。要求每天两队之间进行 3 场对决,比赛一共会进行 5 一天,取得积分优势的团队获胜(输的那队要请赢的队伍吃饭)。主办方提供了 3 款游戏:第一场回旋镖;第二场马 8;第三场明星大乱斗。
如果只是关心哪里有这么好的部门的话,可以直接留言
既然游戏的种类和比赛顺序是固定的,那么每天各队派出的 3 位参赛选手的顺序就很重要:比如可以让熟悉某款游戏的选手去比对应的游戏;或者通过田忌赛马的方式耗费对方的潜力。那么,我们今天的示例就从队长选人开始:
第一版:无脑排兵被偷窥
这里我们有两支参赛队伍 teamA、teamB;这里假设 teamA 只能顺序排人,teamB 只能倒序排人。同时还有一个裁判,负责收集 teamA、teamB 两支队每天的排序情况。下图中代码大概意思就是,随着裁判一声令下,teamA、teamB(代码 AB 是顺序执行的,但是读者在这里先别纠结)分别开始排名布阵,排好之后,裁判函数打印两队排序:
// demo0/demo0.js
const teamA = {
name: 'teamA',
team: [],
sort: function() {
this.team.push(1);
this.team.push(2);
this.team.push(3);
}
};
const teamB = {
name: 'teamB',
team: [],
sort: function() {
// console.log(`${this.name}偷看${teamA.name}排名布阵, ${teamA.name}当前阵容是: `, teamA.team);
this.team.push(3);
this.team.push(2);
this.team.push(1);
}
};
function judgement() {
teamA.sort();
teamB.sort();
console.log('teamA: ', teamA.team);
console.log('teamB: ', teamB.team);
}
judgement();
// teamB偷看teamA排名布阵, teamA当前阵容是: [ 1, 2, 3 ]
// [console.log] teamA: [ 1, 2, 3 ]
// [console.log] teamB: [ 3, 2, 1 ]
复制代码
但是偏偏有年轻人不讲武德,耗子尾汁,在两队排兵期间偷窥对方阵容:如上文中注释代码所示,teamB 的队长在 teamA 排阵过程中悄悄打印出 teamA 的阵型,导致 teamB 队长可以针对性地进行兵力调整,已达到最好的效果。
这里真的想点名批评一下伍队长,不讲武德的人就是你
那么造成上述问题的原因主要是因为 teamA 和 teamB 对彼此都是可见的,即两队在排兵布阵的过程对对方是完全裸露的,导致让对手有了可乘之机,所以这也是接下来要调整的重点。
第二版:小黑屋中探讨军机
为了不让两队在排兵中知晓对方的阵容,需要将两队进行隔离。JS 中进行数据隔离有很多办法,从早期的闭包、后续有了通过模块(文件)进行隔离,到现在在 JS 中也可以使用面向对象的编程思想。这里,我们就先通过模块将两队隔离起来,文件结构如下:
├─demo1
│ ├─teamA.js
│ └─teamB.js
│ └─judgement.js
复制代码
teamA 与 tramB 中代码类似:
// demo1/teamA.js
const teamA = {
name: 'teamA',
team: [],
sort: function() {
this.team.push(1);
this.team.push(2);
this.team.push(3);
}
};
module.exports = teamA
复制代码
// demo1/teamB.js
const teamB = {
name: 'teamB',
team: [],
sort: function() {
this.team.push(3);
this.team.push(2);
this.team.push(1);
}
};
module.exports = teamB
复制代码
// demo1/judgement.js
const teamA = require('./teamA');
const teamB = require('./teamB');
function judgement() {
teamB.sort();
teamA.sort();
console.log('teamA: ', teamA.team);
console.log('teamB: ', teamB.team);
}
judgement();
// teamA: [ 1, 2, 3 ]
// teamB: [ 3, 2, 1 ]
复制代码
这一次,通过裁判程序将 teamA 和 teamB 导入,各队排序过程相对独立不受干扰。
第三版:容我想想
隔离的问题虽然解决了,这时 teamB 的队长觉得每次排序都太仓促了,需要把人员排序的任务领回去跟团队协商一下才行。这里我们使用异步任务来模拟各位队长将任务带回去排序的效果。
文件结构如下:
├─demo2
│ ├─teamA.js
│ └─teamB.js
│ └─judgement.js
│ └─thinking.js
复制代码
这一次,我们新增一个冥想程序:thinking.js,这里提供一个函数,通过异步的 setTimeout 随机等待 03 秒。两位队长针对每次比赛的出场人员顺序进行认真地思考,这里使用延时 03 秒的 thinking.js 模块模拟队长做出决定的过程。
// demo2/thinking.js
// 获取0~3随机数
function getRandomSec() {
return Math.random() * 3;
}
module.exports = function(cb) {
const random = getRandomSec() * 1000;
setTimeout(cb, random);
}
复制代码
队长代码示例:
// demo2/teamA.js
const thinking = require('./thinking');
const teamA = {
name: 'teamA',
team: [],
sort: function() {
// 此处容我想想
thinking(() => {
this.team.push(this.team.length + 1);
});
thinking(() => {
this.team.push(this.team.length + 1);
});
thinking(() => {
this.team.push(this.team.length + 1);
});
},
};
module.exports = team
复制代码
// demo2/teamB.js
const thinking = require('./thinking');
const teamB = {
name: 'teamB',
team: [],
sort: function() {
thinking(() => {
this.team.unshift(this.team.length + 1);
});
thinking(() => {
this.team.unshift(this.team.length + 1);
});
thinking(() => {
this.team.unshift(this.team.length + 1);
});
},
};
module.exports = team
复制代码
到这里,两个队长把各组的任务领回去了,可对战室里还有个裁判呢。因为之前 AB 两组瞬间就把阵容排好了,裁判马上就能知道各队的排序结果。现在大家都回去各排各的了,把裁判一个人晾这了。而且,这个裁判不知道要等多久两位队长才能把人排完(每个队长都需要 0~3 秒),所以裁判只能无奈地按照最长时间进行等待,即裁判要等待 3 秒再回来收集大家的结果:
// demo2/judgement.js
const teamA = require('./teamA');
const teamB = require('./teamB');
function judgement() {
teamB.sort();
teamA.sort();
setTimeout(() => {
console.log('teamA: ', teamA.team);
console.log('teamB: ', teamB.team);
}, 3000);
}
judgement();
// 苦等3秒出结果
// teamA: [ 1, 2, 3 ]
// teamB: [ 3, 2, 1 ]
复制代码
第四版:zone.js 版本
当你觉得所有人应该都满足的时候,裁判站出来了说他不满意。裁判不愿意一直在那里傻等结果,希望大家能在排序完毕后第一时间通知他,避免浪费时间。接下来就来看一下 zone.js 是如何解决这些问题的。
PS:这里大家先不要纠结 API 的用法和一些具体概念,后面的文章会一点一点给大家扫盲,先通过示例感受一下 zone.js 的功能。
示范前还是再澄清一下几个比较重要的需求:
两队的排序数据需要隔离
两队排序时需要有思考时间(0~3s)
裁判要第一时间知道两队排序已结束,并公布结果
前文介绍中说过,zone.js 的一个关键概念是执行上下文,当时我们说可以把这个异步上下文类比成 Java 的 LocalThread,即可以在单个线程内共享数据。那么在 JS 中,这个执行上下文也是有类比的,可以把它想象成一个沙箱——一个 JS 的 VM。在这个沙箱中,你可以把你的 JS 代码放在沙箱中运行,同时沙箱也有一个上下文的概念,这是一段共享的内存空间,可以供运行在沙箱中的代码所使用;同时沙箱和沙箱之间相互隔离、无法相互干扰。
Mark1:创建一个 zone,zone.js 通过fork方法可以创建一个 zone,我们可以先理解它就是一个沙箱。
Mark2:zone.js 中有一个静态方法,可以获取到 zone,Zone.current
有了这两个方法,就可以分别为 teamA 和 teamB 创建两个 zone。通过下面示例可见,代码中分别创建两个 zone,他们分别持有 teamA 和 teamB 的对象,而 teamA、B 对象保存在 zone 的 properties 中。
// demo3/judgement.js
require('zone.js');
const thinking = require('./thinking');
// 创建zone
// Zone.current 获取当前 zone;当前zone为rootZone
// Zone.current.fork 创建一个基于当前zone的子zone
const zoneA = Zone.current.fork({
// zone的名字
name: 'teamA',
// zone中可以通过properties设置一段共享内存
properties: {
// teamA对象
team: {
name: 'teamA',
team: [],
sort: function() {
thinking(() => {
this.team.push(this.team.length + 1);
});
thinking(() => {
this.team.push(this.team.length + 1);
});
thinking(() => {
this.team.push(this.team.length + 1);
});
},
},
},
});
const zoneB = Zone.current.fork({
name: 'teamB',
properties: {
team: {
name: 'teamB',
team: [],
sort: function() {
thinking(() => {
this.team.unshift(this.team.length + 1);
});
thinking(() => {
this.team.unshift(this.team.length + 1);
});
thinking(() => {
this.team.unshift(this.team.length + 1);
});
},
},
},
});
复制代码
上面代码中,teamA 和 teamB 不再被分别定义到两个文件中了,为了验证两个队伍的数据是否能够被不同的 zone 隔离开,我们分别在 zoneA 和 zoneB 中执行相同的代码(打印 properties 中的组名)。为此,我们还需要了解一下 zone.js 提供的另外两个 API。
Mark3:zone.js 提供一个run方法,可以在 zone 中执行一段代码
Mark4:zone.js 提供一个get方法,可以获取当前 zone 的 properties 属性
// 在zoneA的上下文中执行函数
zoneA.run(() => {
// 获取当前zone
const currentZone = Zone.current;
// 从properties中获取team属性
const team = currentZone.get('team');
console.log(team.name); // tramA
});
zoneB.run(() => {
const currentZone = Zone.current;
const team = currentZone.get('team');
console.log(team.name); // tramB
});
复制代码
可以看到,两个 zone 中数据相互隔离,在 run 的作用域中,只能获取到自己 zone 中的数据。
第一步改造
这里,我们首先做到了让 teamA 和 teamB 的数据隔离。两位队长把每队的人员信息都保存在各自的 zone 中,并在各自 zone 的上文中执行排序任务。整个任务期间,两个 zone 互不干涉。
function judgement() {
// teamA领任务回去
zoneA.run(() => {
const currentZone = Zone.current;
const team = currentZone.get('team');
team.sort();
});
// teamB领任务回去
zoneB.run(() => {
const currentZone = Zone.current;
const team = currentZone.get('team');
team.sort();
});
// 裁判3s后收集结果
setTimeout(() => {
// 打印teamA的结果
zoneA.run(() => {
const currentZone = Zone.current;
const team = currentZone.get('team');
console.log('teamA: ', team.team);
});
// 打印teamB的结果
zoneB.run(() => {
const currentZone = Zone.current;
const team = currentZone.get('team');
console.log('teamB: ', team.team);
});
}, 3000);
}
judgement();
复制代码
但是上述代码还有俩个问题:
有没有办法让裁判自己能感知到两位队长何时排序结束,然后在两位队长排序完第一时间宣布排序结果呢?
其实如果大家仔细看下 zone.js 对 fork 方法的定义后就能知道,fork 实际上只是创建出一个 child zone。zone.js 在初始化的时候回创建一个根 zone,然后所有的通过 fork 后会在根 zone 下创建一个子 zone。也就是说,zone 是具有继承关系的,官方习惯把这种关系叫做 zone 的可组合性。而每个子 zone 都保存了其父 zone 的对象;每个父 zone 也能监听到子 zone 的事件。
Mark5:可组合性:每个子 zone 都保存了其父 zone 的引用;每个父 zone 也能监听到子 zone 的事件。
每个子 zone 都保存了其父 zone 的引用这个好理解,那么每个父 zone 也能监听到子 zone 的事件怎么理解?其实这个就是 zone.js 最神奇的地方,zone.js 在初始化的时候对很多 API 都做了“手脚”——Monkey Patch,将这些异步方法封装成了 zone.js 中的异步任务。同时,由于在这些任务中定义很多勾子函数,导致 zone.js 可以完全监控这些异步任务的整个生命周期。
Mark6:追踪异步任务
正是由于 zone 的这种特性,使得 zone 被经常地用于异步任务的跟踪和调试中。比如上文在动机 2 中展示的那个难以理解的错误堆栈,就是 zone 跟踪异步异常的结果。
终极改造
最后这一版,我们给裁判也 fork 出一个 zone,而 teamA 和 tramB 的 zone 都是 fork 自裁判 zone 的。这么处理后,裁判 zone 中就可以检测到 teamA 和 tramB 中异步任务执行的全部生命周期。其中,示例中只是用了 zone.js 众多勾子中的一个——onHasTask
。这个函数会在执行队列中加入函数或没有函数时被调用。
本例中,teamA 执行完毕后会把执行结果更新到裁判 zone 中;teamB 也做同样的事。当两队都结束排序后,裁判 zone 通过配置的回调函数第一时间打印两位队长的排序结果。至此,该示例满足了我们上述的所有需求。
源码奉上:
require('zone.js');
const thinking = require('./thinking');
// 创建一个裁判zone,当做teamA和teamB的父zone
const zoneJudgement = Zone.current.fork({
name: 'judgement',
properties: {
// 存放teamA、teamB的排序结果
result: [],
},
// 异步任务状态改变时的回调
onHasTask: function (parentZoneDelegate, currentZone, targetZone, hasTaskState) {
// setTimeout属于宏任务,!hasTaskState.macroTask标识有宏任务执行完毕
if (!hasTaskState.macroTask) {
// 裁判任务执行结束
switch (targetZone.name) {
case 'judgement':
console.log(currentZone.get('result'));
break;
// A组排序任务执行结束
case 'teamA':
currentZone.get('result').push({
teamA: targetZone.get('team').team,
});
break;
// B组排序任务执行结束
case 'teamB':
currentZone.get('result').push({
teamB: targetZone.get('team').team,
});
break;
default:
break;
}
}
// 事件上抛
parentZoneDelegate.onHasTask(parentZoneDelegate, currentZone, targetZone, hasTaskState);
}
});
const zoneA = zoneJudgement.fork({
name: 'teamA',
properties: {
team: {
name: 'teamA',
team: [],
sort: function() {
thinking(() => {
this.team.push(this.team.length + 1);
});
thinking(() => {
this.team.push(this.team.length + 1);
});
thinking(() => {
this.team.push(this.team.length + 1);
});
},
},
},
});
const zoneB = zoneJudgement.fork({
name: 'teamB',
properties: {
team: {
name: 'teamB',
team: [],
sort: function() {
thinking(() => {
this.team.unshift(this.team.length + 1);
});
thinking(() => {
this.team.unshift(this.team.length + 1);
});
thinking(() => {
this.team.unshift(this.team.length + 1);
});
},
},
},
});
function judgement() {
zoneA.run(() => {
const currentZone = Zone.current;
const team = currentZone.get('team');
team.sort();
});
zoneB.run(() => {
const currentZone = Zone.current;
const team = currentZone.get('team');
team.sort();
});
}
zoneJudgement.run(judgement); // [ { teamA: [ 1, 2, 3 ] }, { teamB: [ 3, 2, 1 ] } ]
复制代码
总结
自此,通过一个小例子展示了一下 zone.js 的功能,同时根据例子浅述了一下 zone.js 的几个特点。前文为了方便理解,一直把 zone.js 类比成 LocalThread 或者沙箱。其实,zone.js 的能力远不止这些类比的对象,它还被大量用在处理异步任务和异步错误的跟踪中。至此,大家别忘了看下 Angular 团队给出的 zone.js 的视频介绍,可以更好地加深一下对本文的印象。
接下来,对于 zone 这个名字,个人感觉起的很到位(老外起名字总是很考究的)。zone 被翻译成地区、区域。就拿我们国家的区域划分来说,国家、省、市、区、街道...每个同级的地区划分都是相互隔离的,一级一级区域划分又是可以嵌套的。不得不说,这种嵌套又隔离的特点在上面示例中展示的淋漓尽致。
这是本系列的第一篇文章,只是浅浅地入门了一下 zone.js,后续会针对 zone.js 的 API、源码、以及如何跟 Angular 配合做进一步分析说明,感兴趣的可以蹲个续~
关于 OpenTiny
OpenTiny 是一套企业级组件库解决方案,适配 PC 端 / 移动端等多端,涵盖 Vue2 / Vue3 / Angular 多技术栈,拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具,可帮助开发者高效开发 Web 应用。
核心亮点:
跨端跨框架
:使用 Renderless 无渲染组件设计架构,实现了一套代码同时支持 Vue2 / Vue3,PC / Mobile 端,并支持函数级别的逻辑定制和全模板替换,灵活性好、二次开发能力强。
组件丰富
:PC 端有 100+组件,移动端有 30+组件,包含高频组件 Table、Tree、Select 等,内置虚拟滚动,保证大数据场景下的流畅体验,除了业界常见组件之外,我们还提供了一些独有的特色组件,如:Split 面板分割器、IpAddress IP 地址输入框、Calendar 日历、Crop 图片裁切等
配置式组件
:组件支持模板式和配置式两种使用方式,适合低代码平台,目前团队已经将 OpenTiny 集成到内部的低代码平台,针对低码平台做了大量优化
周边生态齐全
:提供了基于 Angular + TypeScript 的 TinyNG 组件库,提供包含 10+ 实用功能、20+ 典型页面的 TinyPro 中后台模板,提供覆盖前端开发全流程的 TinyCLI 工程化工具,提供强大的在线主题配置平台 TinyTheme
联系我们:
更多视频内容也可以关注 OpenTiny 社区,B 站/抖音/小红书/视频号。
评论