在AngularJS中清除工厂状态变化的最佳实践（1.x）

Posted 2021-03-27

我有一个非常大的应用程序，可以在数十个项目中查询大量数据（作为要求）。每个项目跟踪来自其他项目的不同数据，每个项目都有自己的父状态/解析（使用ui-router）。我可以通过各种技巧在单个页面上保持较低的数据利用率，但我很好奇的是，在不再需要的工厂单例中清除状态转换数据的最佳实践和最佳性能方法是什么？

本质上，我需要当前状态未使用的所有其他单例在状态转换时清空，因此浏览器不会因数据大小而溢出。

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

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垃圾从未使用的单例中收集的明显方法？