javascript - Angular : circular dependency of specific case

前一段时间，我开始重构主项目的代码，根据指南将业务逻辑从 Controller 分离到服务。一切顺利，直到我遇到循环依赖(CD)的问题。我阅读了有关此问题的一些资源:

Question 1 on Stack Overflow

Question 2 on Stack Overflow

Miško Hevery blog

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

Link to Plunker

Link to GitHub

组件的简短描述:

gridCtrl 不包含任何业务逻辑，仅触发数据加载，并在数据准备就绪时显示网格。

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博客非常简短而且不错，但是我还没有设法将他的策略应用到我的案例中。

目前，我不太喜欢手动注入(inject)的方法，因为我将不得不大量使用它，并且代码看起来有些模糊。

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

最佳答案

在这类问题中，有许多解决方案，具体取决于您的思维方式。我更喜欢认为每个服务(或类)都有一些目标，并且需要其他一些服务来完成其目标，但是它的目标是一个清晰明确的目标。让我们通过此 View 查看您的代码。

问题1:

GridData :这里存放网格的数据。 MainService到这里来获取所需的数据，因此我们将其注入(inject)到mainService中，并使用loadRowData函数像您一样获取rowData数据，但是在$ interval中，您将mainService注入(inject)到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');

grid-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());
     })
     [..]

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

问题2 :

gridSettingsService :此服务更改mainService的设置，因此需要mainService，但是当有人要更改或了解mainService内部状态(数据，表单)必须与mainService接口(interface)通信时，mainService并不关心gridSettings。

因此，我从gridMainService删除了“网格设置”注入(inject)，只为Grid准备就绪时提供了一个放置回调函数的接口(interface)。

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