笔者在阅读zone.js源码时，已更新至0.8.18版本，老版本里的很多api已废弃。

简介

Zone是什么？

Zone是一个执行上下文(execution context)。

Zone是干什么的？

Zone是用来对一些异步操作进行拦截或者追踪。他允许对一些异步操作进行拦截，并在异步操作的开始和结束阶段执行一些其他的操作。

名词解释

先简单介绍一下文章涉及的一些名词术语。

ZoneSpec

用于配置对zone进行拦截的具体方法和操作。

Current Zone

一个系统中可以有多个zone的实例，但是在某个时刻只能有一个zone处于激活(active)状态。这个激活状态的zone叫current zone。

Callback Wrapping

对于一个异步操作，需要做的是获取current zone， 并将自己的回调(callback)进行包装后来更新current zone。这就叫callback wrapping。

MicroTask

不可取消的任务，例如 XHR，promise等。

MacroTask

可取消任务，典型的就是timer相关，例如setTimeout, setImmediate, setInterval, requestAnimationFrame。

EventTask

事件型任务，是一个给事件添加事件监听的过程，例如，click事件等，不同于其他任务。

Root Zone

浏览器启动之后，就会生成一个zone，叫做root zone，随后所有的zone都是基于该root zone生成的子zone。当zone.js被加载时，全局变量里就会有zone这样一个对象，该对象即为root zone。

如何创建一个Zone

所有的zone都是由root zone派生而来。我们可以通过folk来创建一个新的zone。

var myZone = zone.fork();
myZone.run(main);

通过folk创建的了一个子zone，所有的子zone都能够继承父zone的特性，通过个folk函数一个参数对象ZoneSpec，来对zone的不同阶段进行拦截。ZoneSpec对象提供了一些不同阶段的钩子方法。例如:

• onFork- 当一个zone被folk时，该hook被调用。
• onIntercept- 当一个异步回调被包装进zone.run时调用。
• onInvoke- 当一个异步回调被执行时调用。
• onHandleError- 当有错误时调用。

注意
正如上面所说，因为现在的zone版本的更新，狠毒api也已经被废弃。引用原文中的很多API已经不再适用。
在老版本里，zone.js为一些浏览器级别的异步事件，如setTimeout，setInterval都分别folk了不同的zone，但在新的zone.js里废弃了这种做法。

阅读了Zone.js源码，下面仅以click异步事件给出了粗略的流程图。只是个人理解，我相信，远比这个复杂。并且该流程图不包含任何添加钩子的情况。

zone.js (2).png