在AngularJs中，$ watch是否有更高性能的替代方案？

问题描述：

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

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

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

所以，我的问题是，是否有一个更高性能的选择观看数据结构，所以应用程序的性能可以提高？

你是说'$ watch'正确和消化周期在角度非常昂贵。我们可以通过很多方法使该逻辑更加高效，但这取决于您的特定体系结构和逻辑。这个问题非常广泛，试图更具体。 – NicolasMoise

答

没有一个具体的代码示例很难确定你的性能问题。但是你的问题的答案是肯定的。作为事实上，我写了一个关于它的文章，没有长：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是否有更高性能的替代方案？

相关推荐