现在几乎满世界的人都在问! 外面有人么? 这里是 USS AngularJS, 我们遇到麻烦了,我们的服务讲得是克灵贡语(Klingon) 而我们的控制器不能同它们的Ferengi 指令通信了. 有人能帮助我们么!
我已经不知道有多少次遇到这种有关什么才是AngularJS里面的组件通信的最佳方式这样的问题了. 很多时候答案都会是为此使用 $rootScope 对象去向任何想要收听的人广播$broadcast出一条消息. 然而,那还真不是做这件事的最佳方式. 组件之间广播消息意味着它们需要多少知道一些其它组件编码的细节,这样就限制了它们的模块化和重用.
本文我就将展示如何为AngularJS中的内部组件通信使用发布/订阅模式.
AngularJS 有多种方式可供你用于组件之间的通信,而最常使用的方法却需要你知道太多有关那些组件如何通信的细节,这样就增加了组件之间的耦合度,并降低了它们的模块性和内聚程度. 这样也就使得你的组件很难在其它应用程序中重用.
通过使用发布/订阅设计模式,我们可以降低组件之间的耦合度,并将它们的之间通信的细节封装起来. 这将能帮助增加你组件的模块化程度,可测试性以及可重用性.
我将会描述的发布/订阅模式实现由 Eric Burley, @eburley 在它的帖子angularjs.org 观察, 有关发布订阅模式.. 中推荐过。
我所描述的示例应用程序,会向你展示你可以将发布/订阅模式如何运用于内部控制器通信以及控制器的服务通信. 你可以在GitHub上我的资源库 angularjs-pubsub 下面找到源代码.
首先我们需要一条通信管道首先我们来讲讲用于处理发布和订阅信息的服务。我定义了一个服务接口,提供了发布和订阅信息的方法,我们可以用它来处理我们想要用来交换的信息。
在下面的代码中,我定义了两个内部信息; _EDIT_DATA_, 用来表示我们需要编辑跟随信息传过来的数据,和 _DATA_UPDATED_, 用来表示我们的数据已经被改变。这些都是定义在内部的,用户没办法访问到它们的,这样有助于隐藏具体实现。
而对于每条信息,有两个方法; 一个用来发布信息推送给订阅者,另一个可以让订阅者注册一个回调方法,当接收到信息的时候,这个方法就会被调用。
用来向订阅者发布信息方法是 editData,在第 9 行,还有 dataUpated,在第 19 行。它们通过 $rootScope.$broadcast 方法向待处理事件推送私有通知。
用来注册事件的方法,通过 $scope.$on 建立监听,当接收到广播的消息之后,就会轮流执行那些被订阅者注册到服务上的事件。同时,由于订阅者需要自己的 scope 作为参数传过来,我们可以用它来执行监听的信息,从而避免了维护监听者列表这些复杂的处理。注册事件的方法是 onEditData,在 13 行,还有 onDataUpdated 在 23 行。
为了隐藏实现细节,我用了 Revealing Module (揭示模块:好丑的名字)模式,只返回那些我希望让用户使用的方法。
angular.module(['application.services'])
// define the request notification channel for the pub/sub service
.factory('requestNotificationChannel', ['$rootScope', function ($rootScope) {
// private notification messages
var _EDIT_DATA_ = '_EDIT_DATA_';
var _DATA_UPDATED_ = '_DATA_UPDATED_';
// publish edit data notification
var editData = function (item) {
$rootScope.$broadcast(_EDIT_DATA_, {item: item});
};
//subscribe to edit data notification
var onEditData = function($scope, handler) {
$scope.$on(_EDIT_DATA_, function(event, args) {
handler(args.item);
});
};
// publish data changed notification
var dataUpdated = function () {
$rootScope.$broadcast(_DATA_UPDATED_);
};
// subscribe to data changed notification
var onDataUpdated = function ($scope, handler) {
$scope.$on(_DATA_UPDATED_, function (event) {
handler();
});
};
// return the publicly accessible methods
return {
editData: editData,
onEditData: onEditData,
dataUpdated: dataUpdated,
onDataUpdated: onDataUpdated
};
}])