javascript – Angular:特定情况的循环依赖

前段时间,我开始重构我的主项目代码,将业务逻辑从控制器解耦到服务,根据指南.一切顺利,直到我遇到循环依赖(CD)的问题.我读了一些关于这个问题的资源:

Question 1 on Stack Overflow

Question 2 on Stack Overflow

Miško Hevery blog

不幸的是,对我来说现在还不清楚,如何解决我项目的CD问题.因此,我准备了一个小型演示,它代表了我项目的核心功能:

Link to Plunker

Link to GitHub

组件简述:

> gridCtrl不包含任何业务逻辑,仅触发dataload,当数据准备就绪时,显示网格.
> gridMainService这是主服务,它包含对象gridOptions.这个对象是网格的核心对象,包含一些api,由框架,行数据,列标题等初始化.从这项服务,我计划控制所有相关的网格东西.函数loadGridOptions由gridCtrl触发,并等待直到相应服务加载行数据和列定义.然后,它使用此数据gridOptions对象进行初始化.
> gridConfigService这是一个简单的服务,用于加载列定义.这里没问题.
> gridDataService此服务用于使用函数loadRowData加载行数据.此服务的另一个特性:它模拟来自服务器的实时更新($interval函数).问题1在这里!
> gridSettingsService此服务用于将一些设置应用于网格(例如,应如何对列进行排序).问题2在这里!

问题1:
我在gridMainService和gridDataService之间有一个循环依赖.第一个gridMainService使用gridDataService来加载具有以下功能的行数据:

self.loadRowData = function () {
    // implementation here
}

但是,gridDataService从服务器接收更新,并且必须在网格中插入一些行.所以,它必须使用gridMainService:

$interval(function () {

    var rowToAdd = {
      make: "VW " + index,
      model: "Golf " + index,
      price: 10000 * index
     };

     var newItems = [rowToAdd];

     // here I need to get access to the gridMainService
     var gridMainService = $injector.get('gridMainService');
     gridMainService.gridOptions.api.addItems(newItems);

     index++;

 }, 500, 10);

所以,我在这里遇到了第一张CD.

问题2:
我在gridMainService和gridSettingsService之间有一个循环依赖.首先,gridMainService触发,当网格最初加载时,然后通过以下函数设置默认设置:

self.onGridReady = function () {
    $log.info("Grid is ready, apply default settings");
    gridSettingsService.applyDefaults();
};

但是,要进行一些更改,gridSettingsService需要访问gridMainService及其对象gridOptions才能应用设置:

 self.applyDefaults = function() {
     var sort = [
       {colId: 'make', sort: 'asc'}
     ];

     var gridMainService = $injector.get('gridMainService');
     gridMainService.gridOptions.api.setSortModel(sort);
 };

题:
如何以正确的方式解决这些CD案例?因为,MiškoHevery博客很短,很好,但我没有设法将他的策略应用到我的案例中.

目前,我不喜欢手动注入的方法,因为我将不得不使用它很多,代码看起来有点模糊.

请注意:
我只准备了我的大项目的演示.您可以建议将所有代码放在gridDataService中并准备就绪.但是,我已经在这项服务中拥有500 LOC,如果我合并所有服务,那将是一场~1300 LOC的噩梦.

最佳答案
在这些问题中,有许多解决方案,这取决于您的思维方式.我更喜欢认为每个服务(或类)都有一些目标,需要一些其他服务来完成其目标,但它的目标是一个,清晰和小.让我们通过这个视图看你的代码.

问题1:

GridData:这里存在网格数据. MainService来这里获取所需的数据,所以我们将它注入mainService,我们使用loadRowData函数来获取rowData数据,但是在$interval中你将gridService注入gridData,但gridData不需要mainService来结束它目标(从服务器获取项目).

我使用观察者设计模式(使用$rootScope)解决了这个问题.这意味着当数据到达并且mainService来获取它时我会收到通知.

grid-data.service.js:

angular.module("gridApp").service("gridDataService",
         ["$injector", "$interval", "$timeout", "$rootScope",
 function ($injector, $interval, $timeout, $rootScope) {
   […]
   $interval(function () {
   [..]
   self.newItems = [rowToAdd];

    // delete this code
    // var gridMainService = $injector.get('gridMainService'); 
    // gridMainService.gridOptions.api.addItems(newItems);

    // notify the mainService that new data has come!
    $rootScope.$broadcast('newGridItemAvailable');

网格main.service.js:

 angular.module("gridApp").service("gridMainService",
          ["$log", "$q", "gridConfigService", "gridDataService", '$rootScope',
  function ($log, $q, gridConfigService, gridDataService, $rootScope) {
     [..]
     // new GridData data  arrive go to GridData to get it!
     $rootScope.$on('newGridItemAvailable', function(){
        self.gridOptions.api.addItems(gridDataService.getNewItems());
     })
     [..]

使用真实服务器时,最常见的解决方案是使用promises(而不是观察者模式),如loadRowData.

问题2:

gridSettingsService:此服务更改mainService的设置,因此它需要mainService但mainService不关心gridSettings,当有人想要更改或学习mainService时,内部状态(数据,表单)必须与mainService接口通信.

因此,我从gridMainService中删除了网格设置注入,并且只提供了一个接口,以便在Grid准备就绪时设置回调函数.

网格main.service.js:

angular.module("gridApp").service("gridMainService",
          ["$log", "$q", "gridConfigService", "gridDataService", '$rootScope',
 function ($log, $q, gridConfigService, gridDataService, $rootScope) {
   […]
   // You want a function to run  onGridReady, put it here!
   self.loadGridOptions = function (onGridReady) {
          [..]
          self.gridOptions = {
              columnDefs: gridConfigService.columnDefs,
              rowData: gridDataService.rowData,
              enableSorting: true,
              onGridReady: onGridReady // put callback here
            };
          return self.gridOptions;
        });
[..]// I delete the onGridReady function , no place for outsiders
    // If you want to change my state do it with the my interface

银网controller.js:

    gridMainService.loadGridOptions(gridSettingsService.applyDefaults).then(function () {
      vm.gridOptions = gridMainService.gridOptions;
      vm.showGrid = true;
});

这里的完整代码:https://plnkr.co/edit/VRVANCXiyY8FjSfKzPna?p=preview

转载注明原文:javascript – Angular:特定情况的循环依赖 - 代码日志