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

我們有一個巨大的企業Angular應用程序，我們有性能問題，有時它會殺死瀏覽器（內存不足）。我們使用瀏覽器開發者分析器（DevTools）調試應用程序，並且它在$apply()函數上花費很多時間。

我做了一些研究，看起來像$apply()每次角度運行摘要循環時被觸發。

我注意到控制器中有大量的$watch()。該架構完全基於$watch()（這是一種訂閱/觀察模式）。因此，我們沒有別的選擇，只有$watch()。我不允許發佈此應用程序的任何代碼。

所以，我的問題是，是否有一個更高性能的選擇觀看數據結構，所以應用程序的性能可以提高？

來源

2015-11-05 angnubby

你是說'$ 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 
     }); 
    }; 
};

希望這是幫助你;）

來源

2015-11-05 16:27:51 JoMendez

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

回答

相關問題