AngularJs 中是否有比 $watch 更高效的替代方法？答案

【问题标题】：Is there a more performant alternative to $watch in AngularJs?AngularJs 中是否有比 $watch 更高效的替代方法？
【发布时间】：2016-02-06 12:33:07
【问题描述】：

我们有一个巨大的企业 Angular 应用程序，我们遇到了性能问题，有时它会杀死浏览器（内存不足）。我们使用浏览器开发者分析器 (DevTools) 调试应用程序，而 $apply() 函数需要花费大量时间。

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

我注意到控制器中有大量$watch()。该架构完全基于$watch()（它是一种订阅/观察模式）。因此，除了$watch()，我们别无选择。我不允许发布此应用程序的任何代码。

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

【问题讨论】：

你说得对，$watch 和摘要周期在 Angular 中非常昂贵。有很多方法可以使该逻辑更高效，但这实际上取决于您的特定架构和逻辑。这个问题很宽泛，尽量具体一点。

标签： angularjs performance angularjs-scope watch

【解决方案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
        });
    };
};

希望这对您有所帮助；）

【讨论】：