ZoneJS 的原理与应用

目录

  • 序言
  • Zone 是什么
  • ZoneJS 的原理
  • ZoneJS 的应用场景
  • 参考

1. 序言

ZoneJS 是 Angular 团队受到 Dart 的 Zone 的启发,为 Angular v2 及其以上版本设计的核心模块。Angular 通过引入 ZoneJS 使得其变更检测机制更加简单与可靠。

2. Zone 是什么

在 ZoneJS 中有一个核心概念:Zone(域)。一个 Zone 表示一个 JavaScript 执行过程的上下文,其可以在异步任务之间进行持久性传递。

ZoneJS 的原理与应用插图

先看一个示例:

import 'zone.js'

const rootZone = Zone.current;
const zoneA = rootZone.fork({name: 'A'});

expect(Zone.current).toBe(rootZone);

setTimeout(function timeoutCb1() {
  // 此回调在 rootZone 中执行
  expect(Zone.current).toEqual(rootZone);
}, 0);

// 执行 run 方法,将切换 Zone.current 所保存的 Zone
zoneA.run(function run1() { 
  expect(Zone.current).toEqual(zoneA);

  // setTimeout 在 zoneA 中被调用
  setTimeout(function timeoutCb2() {
    // 此回调在 zoneA 中执行
    expect(Zone.current).toEqual(zoneA);
  }, 0);
});

// 退出 zoneA.run 后,将切换回之前的 Zone
expect(Zone.current).toBe(rootZone);

在上述代码中:

  1. Zone.currentZone 上的一个静态属性,用来保存全局此刻正在使用的 Zone
  2. Zone.run() 方法将切换 Zone.current 所保存的 Zone
  3. Zones 之间的关系:

最初的 rootZone 是 ZoneJS 默认创建的一个 Zone 实例。而通过 Zone.fork()方法,可以再创建子Zone(这也是一个 Zone 实例,因此可以继续调用 fork() 方法创建子 Zone,而其parent属性将关联创建其的父 Zone),这些 Zones 最终可以形成一个树形结构。

const rootZone = Zone.current;
const zoneA = rootZone.fork({name: 'A'});
const zoneB = rootZone.fork({name: 'B'});
const zoneC = zoneA.fork({name: 'C'});

上述代码中的 Zones 之间的关系如下图所示:

ZoneJS 的原理与应用插图(1)

从上图中也可以看出,这些 Zones 形成的树形结构是一颗有唯一根节点的树

3. ZoneJS 的原理

ZoneJS 通过 Monkey patch (猴补丁)的方式,暴力地将浏览器或 Node 中的所有异步 API 进行了封装替换。

比如浏览器中的 setTimeout

let originalSetTimeout = window.setTimeout;

window.setTimeout = function(callback, delay) {
  return originalSetTimeout(Zone.current.wrap(callback),  delay);
}

Zone.prototype.wrap = function(callback) {
  // 获取当前的 Zone
  let capturedZone = this;

  return function() {
    return capturedZone.runGuarded(callback, this, arguments);
  };
};

或者 Promise.then方法:

let originalPromiseThen = Promise.prototype.then;

// NOTE: 这里做了简化,实际上 then 可以接受更多参数
Promise.prototype.then = function(callback) {
  // 获取当前的 Zone
  let capturedZone = Zone.current;
  
  function wrappedCallback() {
    return capturedZone.run(callback, this, arguments);
  };
  
  // 触发原来的回调在 capturedZone 中
  return originalPromiseThen.call(this, [wrappedCallback]);
};

简单来说,ZoneJS 在加载时,对所有异步接口进行了封装,因此所有在 Zone 中执行的异步方法都会被当做为一个 Task 被其统一监管,并且提供了相应的钩子函数(hooks),用来在异步任务执行前后或某个阶段做一些额外的操作,因此可以实现:记录日志、监控性能、附加数据到异步执行上下文中等。

而这些钩子函数(hooks),其实就是通过Zone.fork()方法来进行设置的,具体可以参考如下配置:

Zone.current.fork(zoneSpec) // zoneSpec 的类型是 ZoneSpec

// 只有 name 是必选项,其他可选
interface ZoneSpec {
  name: string; // zone 的名称,一般用于调试 Zones 时使用
  properties?: { [key: string]: any; } ; // zone 可以附加的一些数据,通过 Zone.get('key') 可以获取 
  onFork: Function; // 当 zone 被 forked,触发该函数
  onIntercept?: Function; // 对所有回调进行拦截
  onInvoke?: Function; // 当回调被调用时,触发该函数
  onHandleError?: Function; // 对异常进行统一处理
  onScheduleTask?: Function; // 当任务进行调度时,触发该函数
  onInvokeTask?: Function; // 当触发任务执行时,触发该函数
  onCancelTask?: Function; // 当任务被取消时,触发该函数
  onHasTask?: Function; // 通知任务队列的状态改变
}

举一个onInvoke的简单列子:

let logZone = Zone.current.fork({ 
  name: 'logZone',
  onInvoke: function(parentZoneDelegate, currentZone, targetZone, delegate, applyThis, applyArgs, source) {
    console.log(targetZone.name, 'enter');
    parentZoneDelegate.invoke(targetZone, delegate, applyThis, applyArgs, source)
    console.log(targetZone.name, 'leave'); }
});

logZone.run(function myApp() {
    console.log(Zone.current.name, 'queue promise');
    Promise.resolve('OK').then((value) => {console.log(Zone.current.name, 'Promise', value)
  });
});

最终执行结果:

ZoneJS 的原理与应用插图(2)

4. ZoneJS 的应用场景

ZoneJS 的应用场景有很多,例如:

  • 可以用于开发调试、错误记录、分析和测试
  • 可以让框架知道什么时候可以重新渲染(在 Angular 中的应用)
  • 可以实现异步 Task 跟踪以及自动释放和清理资源
  • 等等

这里举几个比较实用的例子:

1. 在测试中的应用:不允许异步代码

const syncZoneSpec = {
  name: 'SyncZone',
  onScheduleTask: function() {
    throw new Error('No Async work is allowed in test.'); // 如果存在异步任务调度,将抛出异常
  }
}

function sync(fn) {
  return function(...args) {
    Zone.current.fork(syncZoneSpec).run(fn, args, this);
  }
}

it('should fail when doing async', sync(() => { 
  Promise.resolve('value');
}));

上述实现可以用来保证测试的代码中没有异步方法被调用。

2. 用于性能分析:监听异步方法的执行时间

const executeTimeZoneSpec = {
  name: 'executeTimeZone',
  onScheduleTask: function (parentZoneDelegate, currentZone, targetZone, task) {
    console.time('scheduleTask')
    return parentZoneDelegate.scheduleTask(targetZone, task);
  },
  onInvokeTask: function (parentzone, currentZone, targetZone, task, applyThis, applyArgs) {
    console.time('callback')
    parentzone.invokeTask(targetZone, task, applyThis, applyArgs);
    console.timeEnd('callback')
    console.timeEnd('scheduleTask')
  }
}

Zone.current.fork(executeTimeZoneSpec).run(() => {
  setTimeout(function () {
    console.log('start callback...')
    for (let i = 0; i < 100; i++) {
      console.log(i)
    }
  }, 1000);
});

// start callback...
// 0
// ...
// 100
// callback: 12.2890625ms
// scheduleTask: 1015.6650390625ms

在 JavaScript 中类似 setTimeout 这种异步调用,其回调执行的时机很难确定,想要直接监控其执行时间一般来说是比较苦难的,而通过引入 ZoneJS 则可以很容易实现这点。

3. 在框架中的应用:实现自动重新渲染

class VMTurnZoneSpec {
  constructor(vmTurnDone) {
    this.name = 'VMTurnZone';
    this.vmTurnDone = vmTurnDone;
    this.hasAsyncTask = false
  }

  onHasTask(delegate, current, target, hasTaskState) {
    const { microTask, macroTask, eventTask } = hasTaskState
    this.hasAsyncTask = microTask || macroTask || eventTask;
    if (!this.hasAsyncTask) {
      this.vmTurnDone();
    }
  }

  onInvokeTask(parent, current, target, task, applyThis, applyArgs) {
    try {
      return parent.invokeTask(target, task, applyThis, applyArgs);
    } finally {
      if (!this.hasAsyncTask) {
        this.vmTurnDone();
      }
    }
  }
}

上述代码中的ZoneSpec可以用来检查异步任务是否执行完毕,然后触发对应的回调方法。而像 Angular 这种框架,正是需要知道什么时候所有的任务执行完毕以此来执行 DOM 更新(变更检测)。

5. 参考

学习 Zone.js

zone.js – 暴力之美

zone.js and NgZone

ZoneJS in Angular

本站资源均源自网络,若涉及您的版权、知识产权或其他利益,请附上版权证明邮件告知。收到您的邮件后,我们将在72小时内删除。
若下载资源地址错误或链接跳转错误请联系站长。站长q:770044133。

» ZoneJS 的原理与应用

发表评论

免登录下载网,提供全网最优质的资源集合!