异步任务管理神器-zone.js

angular2使用了zone.js，这篇文章将介绍一下zone.js是干什么的，以及zone.js在angular2中是怎么应用的。

先看一下zone.js的官方说明

A Zone is an execution context that persists across async tasks, and allows the creator of the zone to observe and control execution of the code within the zone.

说通俗点：一个zone可作为多个异步任务执行的上下文，并能够控制这些异步任务。

为了讲明白这句话，我分下面几步来说明：

1. 怎么创建一个zone？
2. 一个zone会作为哪些异步任务执行的上下文？
3. 一个zone怎么控制异步任务？

---

1. 怎么创建一个zone？

需要通过已存在的zone来创建新的zone。
假设存在一个alreadyExistedZone，通过调用它的fork方法来创建一个新的zone。
fork方法传入的参数用来配置新的zone，参数中的name属性用来给zone设置一个名称，方便我们调试时知道当前zone是谁。

var newZone = alreadyExistedZone.fork({
    name: 'new-zone'
});
console.log(newZone.name); // new-zone

newZone被称为alreadyExistedZone的子zone。
newZone.parent可以访问到alreadyExistedZone，但没有提供从alreadyExistedZone访问newZone的方法。

console.log(newZone.parent === alreadyExistedZone); // true

一个zone可以有多个子zone，每次调用fork方法，都增加一个新的子zone。

---

你是不是有个疑问：第一个zone哪来的？
zone.js初始化时候生成好了，通过Zone.root来访问：

var rootZone = Zone.root;
console.log(rootZone.name); // <root>

可以看出最终所有的zone会生成一个树状结构，Zone.root就是这棵树的根。

---

2. 一个zone会作为哪些异步任务执行的上下文？

先看一段代码

console.log(`begin----current zone is ${Zone.current.name}`);

var zoneA = Zone.current.fork({
    name: 'ZoneA'
});

zoneA.run(() => {
    console.log(`run------current zone is ${Zone.current.name}`);
});

console.log(`end------current zone is ${Zone.current.name}`);

输出