之前有写过一些介绍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.

到目前为止，我感觉大家也不用太在意这里形容了个啥，前面我会用其它的形式让你慢慢理解它。这里权且对几个词有点印象即可：

  • 执行上下文：execute context
  • 放弃：persist
  • 异步工作：async tasks
  • 有Java背景的能够回顾一下ThreadLocal的作用和用法；用过JS沙箱的也能够类比一下。都没用过的也不碍事，不影响前面的浏览。
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.jsconst 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.jsconst teamA = {  name: 'teamA',  team: [],  sort: function() {    this.team.push(1);    this.team.push(2);    this.team.push(3);  }};module.exports = teamA
// demo1/teamB.jsconst teamB = {  name: 'teamB',  team: [],  sort: function() {    this.team.push(3);    this.team.push(2);    this.team.push(1);  }};module.exports = teamB
// demo1/judgement.jsconst 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.jsconst 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.jsconst 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.jsconst 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.jsrequire('zone.js');const thinking = require('./thinking');// 创立zone// Zone.current 获取以后 zone；以后zone为rootZone// Zone.current.fork  创立一个基于以后zone的子zoneconst 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();

然而上述代码还有俩个问题：

  • 裁判还是要期待3s后能力晓得两位队长的人员排序
  • 因为数据隔离，裁判也不晓得两位队长的人员排序后果。裁判只能委托两个队长本人打印排序后果
有没有方法让裁判本人能感知到两位队长何时排序完结，而后在两位队长排序完第一工夫发表排序后果呢？

其实如果大家认真看下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的父zoneconst 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 利用。

外围亮点：

  1. 跨端跨框架：应用 Renderless 无渲染组件设计架构，实现了一套代码同时反对 Vue2 / Vue3，PC / Mobile 端，并反对函数级别的逻辑定制和全模板替换，灵活性好、二次开发能力强。
  2. 组件丰盛：PC 端有100+组件，挪动端有30+组件，蕴含高频组件 Table、Tree、Select 等，内置虚构滚动，保障大数据场景下的晦涩体验，除了业界常见组件之外，咱们还提供了一些独有的特色组件，如：Split 面板分割器、IpAddress IP地址输入框、Calendar 日历、Crop 图片裁切等
  3. 配置式组件：组件反对模板式和配置式两种应用形式，适宜低代码平台，目前团队曾经将 OpenTiny 集成到外部的低代码平台，针对低码平台做了大量优化
  4. 周边生态齐全：提供了基于 Angular + TypeScript 的 TinyNG 组件库，提供蕴含 10+ 实用功能、20+ 典型页面的 TinyPro 中后盾模板，提供笼罩前端开发全流程的 TinyCLI 工程化工具，提供弱小的在线主题配置平台 TinyTheme

分割咱们：

  • 官网公众号：OpenTiny
  • OpenTiny 官网：https://opentiny.design/
  • OpenTiny 代码仓库：https://github.com/opentiny/
  • Vue 组件库：https://github.com/opentiny/tiny-vue （欢送 Star）
  • Angluar组件库：https://github.com/opentiny/ng （欢送 Star）
  • CLI工具：https://github.com/opentiny/tiny-cli （欢送 Star）

更多视频内容也能够关注OpenTiny社区，B站/抖音/小红书/视频号。