javascript – Angular Interdependent Services：避免循环依赖

我有两个独立的GUI,它们是同一系统的一部分.一个位于屏幕顶部(navEditor),另一个位于侧面(routeEditor).

他们需要经常互相更新两个,并互相调用其他功能.

每个服务都拥有大部分系统功能.当我试图从A-> B和B-> A调用函数时,我遇到了一个问题.当然,它创建了一个循环依赖,因为我必须将它们包含在彼此中才能获得访问权限.

我研究了几种解决方案,包括使用$rootScope.$broadcast.但是,一个常见的建议(在这里找到：angular JS – communicate between non-dependend services)提出了一种将两者连接在一起的“订户/发布者”方法.

这通过使用第三服务并让其他服务将事件和处理程序附加到它来避免循环依赖.

我更进了一步,只是让这个父服务为我的两个系统返回一个带有占位符对象的对象：

//BRIDGE SERVICE
myApp.service('$trafficSys', function(){
     this.sys = {
         navEditor: {}, //poulated by $routeEditor service
         routeEditor: {} ////poulated by $navEditor service
    }
});

//ROUTE-EDITOR
myApp.service('$routeEditor', ['$trafficSys',function($trafficSys) {
    var routeSystem = {
           //entire route editor system goes in here
        }
    $trafficSys.sys.routeEditor = routeSystem;
}]);

//NAV-EDITOR (Same Process as Route Editor)

然后,我只需要我的“navEditor”& “routeEditor”服务包括$trafficSys,然后将所有这些函数应用于navEditor或routeEditor对象.

我想知道的是,如果这被认为是反模式,如果我更加强制而不是声明.

我对大型应用程序不是很熟悉.我正在学习角度,所以我可以让自己更多地考虑建筑.然而,我发现我缺乏远见导致我怀疑我是否以最好的方式做事.

任何意见,将不胜感激.

解决方法:

您应该将业务逻辑留给角度应用程序的控制器.

将NAV-EDITOR和ROUTE-EDITOR置于独立的控制器中,并将其业务逻辑(功能调用)置于纤薄的控制器中.虽然$trafficSys.sys应该只是一个传递给你的控制器的Singleton,依赖注入$routeEditor,$trafficSys和$navEditor到你的控制器,如下所示：

 myApp.controller('RouteController', ['$scope', '$routeEditor', '$trafficSys' function($scope, $routeEditor) {
      // var trafficSys = $trafficSys.sys 
      //you could even put it on $scope if you need to databind -  $scope.trafficSys = $trafficSys.sys
      //$routeEditor business logic goes here using 
    }]);

myApp.controller('NavController', ['$scope', '$navEditor', '$trafficSys' function($scope, $navEditor) {
      // var trafficSys = $trafficSys.sys 
      //you could even put it on $scope if you need to databind -  $scope.trafficSys = $trafficSys.sys
      //$navEditor business logic goes here
    }]);

标签：javascript,angularjs,design-patterns,architecture,anti-patterns
来源： https://codeday.me/bug/20190708/1402609.html