Angular: 特定案例的循环依赖

Question

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

Question 2 on Stack Overflow

Miško Hevery blog

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

Link to Plunker

Link to GitHub

组件的简短描述：

gridCtrl不包含任何业务逻辑，仅触发数据加载，当数据准备好时，显示网格。
gridMainService 这是主服务，包含object gridOptions。这个object是grid的核心object，包含一些api，框架初始化，行数据，列headers等。通过这项服务，我计划控制所有相关的网格内容。函数loadGridOptions由gridCtrl触发，等待相应服务加载行数据和列定义。然后，它用这个数据初始化 gridOptions object.
gridConfigService 这是一个简单的服务，用于加载列定义。这里没问题。
gridDataService 此服务用于通过函数 loadRowData 加载行数据。该服务的另一个特点：它模拟来自服务器的实时更新（$interval 函数）。 这里是问题 1！
gridSettingsService 此服务用于将一些设置应用于网格（例如，应如何对列进行排序）。 问题 2 在这里！

问题一： 我在 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。

问题二： 我在 gridMainService 和 gridSettingsService 之间存在循环依赖。首先，gridMainService 触发，当网格初始加载时，然后通过以下函数设置默认设置：

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

但是，要进行一些更改，gridSettingsService 需要访问 gridMainService 及其 object gridOptions，以便应用设置：

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

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

问题： 如何正确解决这些 CD 盒？因为，Miško Hevery 的博客很短而且很好，但我没有设法将他的策略应用到我的案例中。

目前，我不太喜欢手动注入的方法，因为我不得不经常使用它，而且代码看起来有点模糊。

请注意： 我只准备了我的大项目的演示。您可能会建议将所有代码放入 gridDataService 并准备就绪。但是，我在这个服务中已经有 500 LOC，如果我合并所有服务，那将是一个 ~1300 LOC 的噩梦。

Answer 1

您可以引入一个单独的服务来公开特定的调用，例如将项目添加到网格。这两个服务都将依赖此 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 2

这类问题有很多种解法，就看你怎么想了。我更愿意认为每个服务（或 class）都有一些目标并且需要一些其他服务来完成它的目标，但它的目标是一个明确的小目标。让我们通过这个视图查看您的代码。

问题一：

GridData：这里存放的是grid的数据。 MainService 来这里获取所需的数据，因此我们将其注入 mainService 并像您一样使用 loadRowData 函数获取 rowData 数据，但是在 $interval 中，您将 mainService 注入到 gridData 中，但 gridData 不需要 mainService 来结束它的目标（从服务器获取项目）。

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

网格-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内部状态（数据， form) 必须与 mainService 接口通信。

所以，我从 gridMainService 中删除了 grid Settings 注入，只提供了一个接口来放置 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

Ag-grid-controller.js:

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

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

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);
});

```

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

Angular: 特定案例的循环依赖

Angular: circular dependency of specific case

javascript

dependency-injection

circular-dependency

angularjs