在AngularJS(1.x)中清理工厂以了解状态变化的最佳实践

时间:2018-11-20 16:21:18

标签: angularjs angular-ui-router

我有一个非常大的应用程序,可以跨数十个项目查询大量数据(作为要求)。每个项目跟踪与其他项目不同的数据,并且每个项目都有自己的父状态/解析(使用ui-router)。我可以通过各种技巧使单个页面上的数据利用率保持较低水平,但我很好奇的是在不需要的工厂单例状态转移中清除数据的最佳实践和最有效的方法是什么< / b>?

从本质上讲,我需要当前状态未使用的所有其他单例在状态转换时为空,以便浏览器不会由于数据大小而溢出。

作为一种变通方法,我目前正在将数据传递给所有工厂,而不是直接将数据存储在其原始工厂中。相反,我正在解析一种外观模式,该模式可查询来自单独数据定义工厂的数据,并将所有已解析的数据路由至单个全局存储工厂,以供类似的视图指令使用。

angular.module('someModule', [])
.config(function($stateProvider){
   $stateProvider
   .state('state1', {
      resolve: {state1Data: function(facadeFactory){return facadeFactory.setState1()}}
   })
   .state('state2', {
      resolve: {state2Data: function(facadeFactory){return facadeFactory.setState2()}}
   });
})
.factory('facadeFactory', function facadeFactory($q, singleStorageFactory, dataSource1, dataSource2, dataSource3, dataSource4){
   var factory = {};
   factory.setState1 = function(){
      var dfd = $q.defer();
      dataSource1.getAllData()
      .then(function(result){ return dataSource2.getAllData(result);})
      .then(function(result){ return singleStorageFactory.setData(result);})
      .then(function(){dfd.resolve(true);});
      return dfd.promise;
   }

   factory.setState2 = function(){
      var dfd = $q.defer();
      dataSource3.getAllData()
      .then(function(result){ return dataSource4.getAllData(result);})
      .then(function(result){ return singleStorageFactory.setData(result);})
      .then(function(){dfd.resolve(true);});
      return dfd.promise;
   }
   return factory;
})
.factory('dataSource1', function dataSource1(){
   var factory = {};
   factory.dataDef = {
      name: "list1",
      cols: ['col1','col2','col3'],
      thisKey: 'col1'
   };
   factory.getAllData = function(currentData){
      // get data > add it to currentData if it exists > return aggregated data
   };
   return factory;
})
// dataSource2, dataSource3, and dataSource4 are same as dataSource1 albeit with different data definition
.factory('singleStorageFactory', function singleStorageFactory($q){
     var factory = {};
     factory.data;
     factory.setData = function(data){
          var dfd = $q.defer();
          factory.data = data;
          dfd.resolve(factory.data);
          return dfd.promise;
     };
     return factory;
});

由于其他一些要求,我希望将各个数据定义存储在自己的工厂中,这些其他要求涉及将跨项目的部分数据和部分数据汇总到某种类型的主跟踪器中,但这不在这里或那里。

最重要的是,这是防止大型数据集在状态转换时崩溃并使浏览器崩溃的正确方法,还是我缺少有关AngularJS垃圾如何从未使用的单例中收集的明显信息?

1 个答案:

答案 0 :(得分:1)

我们已经在我的办公室考虑过这一点,并且找不到任何真正的保存数据图形的方法,尤其是在数据量较大时。

我们导致每5-10分钟刷新一次页面,而并非100%的实时数据对我们有用。

$timeout(reload, 300000);// don't forget to inject $timeout in your controller

reload(){
$route.reload(); // don't forget to inject $route in your controller
}