Javascript 角度,设置多个观察者触发动态事件的替代解决方案-优化观察者模式
因此,我有一个工厂,设置为监视URL更改,然后在控制器中激发和更改范围变量,以便在URL更改时保持更新。基本思想是我有一个URL对象,我存储它发送信息到不同的模块来控制它们的状态。这样用户就可以复制/标记URL并保存状态(如果愿意) 所以我现在所拥有的是绑定到每个控制器中由它控制的每个范围变量。它工作得很好,但是我遇到的问题是,如果我(可能)在url中有90个不同的状态,即90个观察者,并且每次我更改url时,函数都会触发90次,而最有可能的情况是,它只需要触发其中的一个或两个 下面是代码- 工厂:Javascript 角度,设置多个观察者触发动态事件的替代解决方案-优化观察者模式,javascript,angularjs,observer-pattern,Javascript,Angularjs,Observer Pattern,因此,我有一个工厂,设置为监视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");
现在我在两个不同的控制器中,每个控制器上有两个作用域,所以每次作用域$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])匹配,如果匹配,则激发。我不确定这是不是最好的方法。我正在寻找一个优化的观察者模式
我正在努力解决的是如何正确地设置它,并且肯定可以在这个问题上使用一些输入。感谢您抽出时间阅读 如果我正确理解了您的问题,那么从我的角度来看,最好的方法是将您的urlWatcher工厂更改为全局单例服务,并在此工厂内仅响应一次路由更改事件。工厂将保留当前路线参数,每个控制器可检查这些参数并根据这些参数进行设置。全球服务可能看起来像:
app.service("routeWatcher", function (){
var service={};
service.watchFunction=function (event, data){
service.currentRouteParams=data.params;
};
return service;
}])
它在全球范围内使用(服务是按需创建的,因此我们需要在启动时对其进行实例化):
然后,任何需要根据路线参数进行设置的控制器都可以从单点获得该值:
app.controller("test1", function ($scope, routeWatcher){
/*I need to get my specific route params here*/
$scope.param=routeWatcher.currentRouteParams["param"];
})
这是我的Plunk,其中第一个视图/控制器使用路由中的参数
app.controller("test1", function ($scope, routeWatcher){
/*I need to get my specific route params here*/
$scope.param=routeWatcher.currentRouteParams["param"];
})