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
可作为多个异步任务执行的上下文,并能够控制这些异步任务。
为了讲明白这句话,我分下面几步来说明:
- 怎么创建一个
zone
? - 一个
zone
会作为哪些异步任务执行的上下文? - 一个
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}`);
</