Question

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

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

组件的简短描述：

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的噩梦。

Answer 1

在这些问题中，有许多解决方案，这取决于你的思维方式。我更喜欢认为每个服务（或类）都有一些目标，需要一些其他服务来完成其目标，但它的目标是一个，清晰和小。让我们通过这种观点看你的代码。

问题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

Answer 2

您可以引入一个单独的服务来公开特定的调用，例如向网格添加项目。这两种服务都依赖于这种api服务，这允许数据服务放弃对主服务的依赖。这个单独的服务将要求您的主服务注册一个回调，当您想要添加项目时应该使用该回调。反过来，数据服务将能够使用此回调。

angular.module("gridApp").service("gridApiService", function () {

        var self = this;

        var addItemCallbacks = [];

        self.insertAddItemCallback = function (callback) {
            addItemCallbacks.push(callback);
        };

        self.execAddItemCallback = function (item) {
            addItemCallbacks.forEach(function(callback) {
                callback(item);
            });
        };

    });

在上面的示例中，服务提供了两个功能。 insert函数允许您从main函数注册一个回调函数，该函数可以在以后使用。 exec函数将允许您的数据服务使用存储的回调，传入新项目。

Answer 3

首先，我同意其他评论认为脱钩似乎有点极端;尽管如此，我确信你比我们知道你的项目需要多少。

我认为可接受的解决方案是使用pub / sub（观察者模式），其中gridSettingsService和gridDataService服务不会直接更新gridMainService，而是提升gridMainService可以挂钩并用于更新自身的通知。

因此，使用您提供的plunker，我所做的更改将是：

将$rootScope服务注入gridSettingsService，gridDataService和gridMainService。
从gridSettingsService和gridDataService，停止手动注入gridMainService，而不只是$broadcast通知及相关数据：

```

// in gridDataService
$rootScope.$broadcast('GridDataItemsReady', newItems);

// in gridSettingsService
$rootScope.$broadcast('SortModelChanged', sort);

```

在gridMainService中，列在通知中并使用传入的数据进行更新：

```

// in gridMainService
$rootScope.$on('GridDataItemsReady', function(event, newItem) {
    self.gridOptions.api.addItems(newItem);
});

$rootScope.$on('SortModelChanged', function(event, newSort) {
    self.gridOptions.api.setSortModel(newSort);
});

```

这是更新的plunker：https://plnkr.co/edit/pl8NBxU5gdqU8SupnMgy

Angular：具体案例的循环依赖

3 个答案: