Angular zone学习笔记

https://blog.thoughtram.io/angular/2016/01/22/understanding-zones.html

假设有这三个函数：

foo();
bar();
baz();function foo() {...}
function bar() {...}
function baz() {...}

要度量其运行时间：

var start,time = 0;timer = performance ? performance.now : Date.now;// start timer
start = timer();
foo();
bar();
baz();
// stop timer
time = timer() - start;
// log time in ms
console.log(Math.floor(time*100) / 100 + 'ms');

然而，如果这些函数是异步执行的函数呢？那么下列的时间度量代码，计算出来的duration就不准确了：

function doSomething() {console.log('Async task');
}// start timer
start = timer();
foo();
setTimeout(doSomething, 2000);
bar();
baz();
// stop timer
time = timer() - start;

什么是Angular的zone？

Zones can perform an operation - such as starting or stopping a timer, or saving a stack trace - each time that code enters or exits a zone. They can override methods within our code, or even associate data with individual zones.

zone可以在一段代码进入或者离开一个zone的时候，执行一个操作，比如开启或者关闭计时器，或者保存一个堆栈跟踪。

Zones are actually a language feature in Dart.

Zone实际上是编程语言Dart的一个特性。Dart编译之后的代码也是JavaScript，所以我们可以直接在JavaScript里实现Zone的特性。

Angular项目里通常都有zone.js的依赖：

导入zone.js依赖之后，我们获得了zone全局对象的访问权。可以使用其run方法，将某个函数放入一个zone里执行：

function main() {foo();setTimeout(doSomething, 2000);bar();baz();
}zone.run(main);

Zones can perform an operation each time our code enters or exits a zone.

支持fock操作：

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

fock的时候可以指定一些参数，定制fock出来的zone的行为：

var myZoneSpec = {beforeTask: function () {console.log('Before task');},afterTask: function () {console.log('After task');}
};var myZone = zone.fork(myZoneSpec);
myZone.run(main);// Logs:
// Before task
// After task
// Before task
// Async task
// After task

It turns out that there are a few other hooks. In fact, those aren’t just hooks, but monkey-patched methods on the global scope.

全局scope里还存在称为monke-patched的方法。

when we call setTimeout() we actually call Zone.setTimeout(), which in turn creates a new zone using zone.fork() in which the given handler is executed.

当我们调用setTimeout时，我们实际上调用的是Zone.setTimeout, 后者会使用zone.fork()，创建新的zone，而setTimeout里的函数，就运行在这个新fork出来的zone里面。

And that’s why our hooks are executed as well, because the forked zone in which the handler will be executed, simply inherits from the parent zone.

而hook执行两次的原因，是因为函数运行于fork出来的zone里面，而后者继承了parent zone的hook.

Zone.js重载了下列方法，并且以hook的方式提供给应用开发人员使用：

Zone.setInterval()
Zone.alert()
Zone.prompt()
Zone.requestAnimationFrame()
Zone.addEventListener()
Zone.removeEventListener()

We might wonder why methods like alert() and prompt() are patched as well. As mentioned earlier, those patched methods are hooks at the same time. We can change and extend them by forking a zone exactly the same way we did with beforeTask and afterTask. This turns out to be super powerful, because we can intercept calls to alert() and prompt() and change their behaviour when we write tests.

类似alert和prompt方法和其他方法一样同时被patch，在fork一个新zone时，可以传入我们自己的实现进去，在写单元测试代码时尤其有用。

用于度量一段异步执行代码执行时间的profilingZone的实现源代码：

var profilingZone = (function () {var time = 0,timer = performance ?performance.now.bind(performance) :Date.now.bind(Date);return {beforeTask: function () {this.start = timer();},afterTask: function () {time += timer() - this.start;},time: function () {return Math.floor(time*100) / 100 + 'ms';},reset: function () {time = 0;}};
}());

使用方式：

zone.fork(profilingZone).fork({'+afterTask': function () {console.log('Took: ' + zone.time());}}).run(main);

Angular zone学习笔记相关推荐

Angular 4 学习笔记1
文章目录一张图说明Angular程序架构 Angular开发环境搭建项目文件夹和各部分关系引入npm命令安装的外部模板使用指令生成组件启动项目指令数据绑定将css类绑定到html标签上 ...
Angular入门学习笔记
Angualr入门扫盲必备声明:这篇是我学习angualr的笔记,可以转载,但必须注明来源作者 kone 并附上本文链接 A:环境,工具 1:先确保安装了nodejs和npm Nodejs npm ...
Angular 4 学习笔记从入门到实战打造在线竞拍网站基础知识快速入门个人感悟
最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app. 先上个效果图: 环境&版本信息声明运行ng -v @ ...
为什么选择angular？-学习笔记
使用angular的原因: Angular是一款优秀的前端JS框架,已经被用于Google的多款产品当中. 它有一下的特性: 良好的应用程序结构: 双向数据绑定: 指令: HTML模版: 可嵌入,注入 ...
3、Angular JS 学习笔记 – Controllers [翻译中]
2019独角兽企业重金招聘Python工程师标准>>> 理解控制器在Angular中,一个控制器是一个javascript构造函数用于填充Angular作用域. 当一个控制器通过使 ...
4、Angular JS 学习笔记 – 创建自定义指令 [翻译中]
2019独角兽企业重金招聘Python工程师标准>>> 创建自定义指令注意:本指南是针对已经熟悉AngularJS基础的开发者.如果您只是想要开始,建议您先去看教程.如果你在寻找指 ...
Angular Universal 学习笔记
如果配置得当,我们可以将所有的内容都在服务器端渲染,避免在浏览器端再次调用 API. 首先命令行安装 Angular Universal: ng add @nguniversal/express-en ...
Angular library 学习笔记
原文 Use cases for Angular libraries Angular 库有 2 个常见用例: 构建可重用的组件库以在应用程序之间共享. 构建共享服务层功能 - 例如. 用于处理外部数据 ...
Angular Schematics 学习笔记
网址:https://angular.io/guide/schematics A schematic is a template-based code generator that supports ...

Angular zone学习笔记

Angular zone学习笔记相关推荐

最新文章

热门文章