ngZone或zone.js:猴子修补的地方?

时间:2017-11-05 15:39:20

标签: angular zone.js ngzone

我正在学习 ngZone 如何在 Angular 中工作。 我知道它正在对标准异步操作(例如setTimeout)进行猴子修补。

但谁在做猴子修补? zone.js库或Angular本身在ngZone中? 如果您能在源代码中显示具体位置,那就太棒了。

3 个答案:

答案 0 :(得分:2)

Angular运行zone.js中的区域,zone.js提供带有修补API的范围。

您可以自己使用zone.run(...)而不使用Angular中的任何内容,并获得修补后的API的所有效果。

另见https://github.com/angular/zone.js/

修补计时器的代码 https://github.com/angular/zone.js/blob/master/lib/common/timers.ts#L22

答案 1 :(得分:1)

区域库必须同时在浏览器和服务器端项目中工作。所以它比修补全局函数要复杂一点。

Zone不仅可以修补全局API,还可以在广播时修补事件对象。修补程序通过Zone.__load_patch完成,您可以看到这些模块中正在修补的内容。

https://github.com/angular/zone.js/blob/master/lib/browser/browser.ts

https://github.com/angular/zone.js/blob/master/lib/node/node.ts

https://github.com/angular/zone.js/blob/master/lib/rxjs/rxjs.ts

这显然不是一个简单的过程。我确定还有一些边缘情况,区域没有修补。

答案 2 :(得分:0)

猴子补丁由Zone.js完成。在ng_zone.ts中,加载了zone.ts,它创建了根区域以及猴子补丁API。

NGZone只是分叉了一个名为' angular'并在区域规范中提供callbacks。在这些回调中,在application_ref.ts中进一步订阅的emits事件和更改检测将被启动。

Monkey Patching:这是通过使用2个参数调用Zone.__load_patch()函数来完成的。第一个参数是猴子修补的API的标识符,第二个是修补函数,在执行时replaces实际的浏览器API和重新定义的版本。

现在,这只是冰山一角。实际魔法是通过调用utils.ts的patchMethod()来完成的。对于set / clearTimeOut,完成此操作here

在patchMethod()中,原始api保存在本地变量中,即delegate,并返回相同的内容,保存在timers.ts中的setNative变量中。

有关完整的工作流程,请参阅以下文章。

https://medium.com/reverse-engineering-angular/angular-deep-dive-zone-js-how-does-it-monkey-patches-various-apis-9cc1c7fcc321