在AngularJs中,$ watch是否有更高性能的替代方案?
问题描述:
我们有一个巨大的企业Angular应用程序,我们有性能问题,有时它会杀死浏览器(内存不足)。我们使用浏览器开发者分析器(DevTools)调试应用程序,并且它在$apply()
函数上花费很多时间。
我做了一些研究,看起来像$apply()
每次角度运行摘要循环时被触发。
我注意到控制器中有大量的$watch()
。该架构完全基于$watch()
(这是一种订阅/观察模式)。因此,我们没有别的选择,只有$watch()
。我不允许发布此应用程序的任何代码。
所以,我的问题是,是否有一个更高性能的选择观看数据结构,所以应用程序的性能可以提高?
答
没有一个具体的代码示例很难确定你的性能问题。 但是你的问题的答案是肯定的。作为事实上,我写了一个关于它的文章,没有长:optimizing-code-object-defineproperty-scope-watch-angularjs
你可以用Object.defineProperty(更有效地实现了手表的功能相同)(请参见下面的代码示例) 注:该解决方案不支持IE8及以下版本。
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', MyCtrl);
myApp.service('efficientWatch', efficientWatch);
MyCtrl.$inject = ['efficientWatch'];
function MyCtrl(efficientWatch) {
var self = this;
efficientWatch.watch('reactionText', self, function (newval) {
if (newval == 'watched') {
self.reacted = true;
}else{
self.reacted = false;
};
});
self.reacted = false;
self.placeholder = 'type the watched word';
}
function efficientWatch() {
this.watch = function (name, controllerProto, func) {
Object.defineProperty(controllerProto,
name, {
get: function() {
return this._personName;
},
set: function (newValue) {
this._personName = newValue;
//Call method on update
if (typeof func == 'function') func(newValue);
},
enumerable: true,
configurable: true
});
};
};
希望这是帮助你;)
你是说'$ watch'正确和消化周期在角度非常昂贵。我们可以通过很多方法使该逻辑更加高效,但这取决于您的特定体系结构和逻辑。这个问题非常广泛,试图更具体。 – NicolasMoise