在 AngularJs 中是否有比 $watch 更高效的替代品？

Question

我们有一个庞大的企业 Angular 应用程序，我们遇到了性能问题，有时它会杀死浏览器（内存不足）。我们使用浏览器开发人员分析器 (DevTools) 调试应用程序，并且在 $apply() 功能上花费了大量时间。

我做了一些研究，看起来 $apply() 每次 angular 运行摘要循环时都会触发。

我注意到控制器中有大量 $watch()。该体系结构完全基于 $watch()（它是一种 subscribe/observe 模式）。因此，我们别无选择，只能 $watch()。我不允许发布此应用程序的任何代码。

所以，我的问题是，是否有比 watch 数据结构更高效的替代方案，从而可以提高应用程序的性能？

Answer 1

如果没有具体的代码示例，将很难确定您的性能问题出在哪里。但是，您的问题的答案是肯定的。事实上，我写了一篇关于它的文章，不久：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
        });
    };
};

希望对您有所帮助 ;)

在 AngularJs 中是否有比 $watch 更高效的替代品？

Is there a more performant alternative to $watch in AngularJs?

performance

watch

angularjs

angularjs-scope