为多个观察者设置触发动态事件的替代解决方案-优化的观察者模式

Question

因此，我有一个工厂，可以监视URL的更改，然后在控制器中触发和更改范围变量，以在URL更改时使它们保持更新。 基本思想是我要存储一个URL对象，该对象将信息发送到不同的模块中以控制其状态。 这样一来，用户便可以复制/标记URL并设置为已保存状态。

因此，我现在所拥有的已绑定到由此控制的每个控制器中的每个作用域变量。 效果很好，但是我遇到的问题是，如果我（可能）在URL中有90个不同的状态，即90个观察者，并且每次更改URL时，该功能都会触发90次，而最有可能的情况是向其中的一两个开火。

所以这是现在的代码-

该工厂 ：

 .factory('urlWatch', function(urlFactory) {
    return {
        listenToUrl: function(scope, moduleName, stateName, bindTo) { 
            //create closure for binding a watch to specific scope on controller
            scope.$on('$locationChangeSuccess', function(event) {
                //parseState just checks if it's an acceptable state
                scope[bindTo] = urlFactory.parseState(moduleName, stateName);
            });
        }
    };

});

在控制器中，我将执行以下操作：

//set initial state
$scope.mod1m1 = urlFactory.parseState("module1", "mod1");
//hook onto url listener
urlWatch.listenToUrl($scope, "module1", "mod1", "mod1m1");

因此，现在我在2个不同的控制器中都有这个控制器，每个控制器在2个作用域上，因此每次scope。$ on（'$ locationChangeSuccess'）触发时，它都会发送到所有4。

我要弄清楚的是，是否有一种方法可以对此进行优化，使其仅发送所需信息。 我可以很轻松地保留url对象的“ 1 back”版本，以检查发生了什么更改，并可能将其包装在条件中？

假设我可以访问更改的内容，例如，我可以这样做吗？

.factory('urlWatch', function(urlFactory) {
    return {
        listenToUrl: function(scope, moduleName, stateName, bindTo, whatsChanged) { 

            scope.$on('$locationChangeSuccess', function(event) {
                 if(whatsChanged == moduleName[stateName]){
                //parseState just checks if it's an acceptable state
                scope[bindTo] = urlFactory.parseState(moduleName, stateName); }
            });
        }
    };

});

检查更改的url项是否与当前项（moduleName [stateName]）匹配，如果匹配，则触发。 我不确定这是否是解决此问题的最佳方法。 我正在寻找一种优化的观察者模式。

我正在努力的是如何正确设置它，并且肯定可以在此问题上使用一些输入。 感谢您抽出宝贵的时间阅读！

Answer 1

如果我正确地理解了您的问题，那么从我的角度来看，最好的方法是将urlWatcher工厂更改为全局单例服务，并仅在该工厂内部对路由更改事件做出响应。 工厂将保留当前的路线参数，每个控制器都可以检查这些参数并根据它们进行设置。 全球服务可能看起来像：

app.service("routeWatcher", function (){
  var service={};

  service.watchFunction=function (event, data){
    service.currentRouteParams=data.params;
  };

  return service;
}])

全局使用（服务是按需创建的，因此我们需要在启动时实例化）：

.run(function ($rootScope, routeWatcher){
  $rootScope.$on('$routeChangeSuccess',routeWatcher.watchFunction);
})

然后，任何需要根据路由参数进行设置的控制器都可以从单点获得该值：

app.controller("test1", function ($scope, routeWatcher){
  /*I need to get my specific route params here*/
  $scope.param=routeWatcher.currentRouteParams["param"];
})

这是我的插件，第一个视图/控制器使用路由http://plnkr.co/edit/NbDoCgt71xPAZgKaSxwi?p=preview中的参数