zone.js由入门到放弃之一——通过一场游戏认识zone.js

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

但是上述代码还有俩个问题：

• 裁判还是要等待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的父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 应用。

核心亮点：

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站/抖音/小红书/视频号。