我有一个包含项目的应用程序,您可以执行诸如添加新项目,更新项目文本,将项目移动到其他文件夹等操作.
我有一个项目工厂,它将所有项目作为普通对象保存在数组中,并且工厂返回一个具有各种方法的单例,如get(),set()等.
为了在问题中添加一些上下文,我也在使用Node.js和MongoDB.
无论如何,由于我拥有的各种工厂,如项目,文件夹和所有不同视图的控制器,我在很大程度上依赖于事件.举一些例子：
// items factory
update: function(params) {
// add to database,then...
.then(function() {
$rootScope.$emit('itemCreated');
});
}
// items controller
// I need to refresh the items list in the scope
$rootScope.$on('itemCreated',function() { // when an item is added to the database
$scope.items = items.getAll(); // retrieve all items from the items factory
});
这些是他们自己的事件“子集”,因为它们都与项目的“CRUD”操作有关.
但是,我也有其他事件.例如,我有一个侦听任何请求和响应的拦截器.我有一个使用指令的加载小部件(旋转轮的图像).该指令将在请求开始时显示加载小部件,并在请求结束时隐藏加载小部件.这也是基于事件的.
// on request $rootScope.$emit(_START_REQUEST_); // on any response $rootScope.$emit(_END_REQUEST_);
我试图通过简单地使它们成为常量来“模块化”这些请求和响应事件.
.constant('_START_REQUEST_','_START_REQUEST_');
我试图找到一个解决方案,以“模块化”我的所有其他事件,如在项目的CRUD操作上发出的事件.我有一个想法是定义items工厂内的所有项目CRUD事件：
events: {
update: 'itemUpdate',create: 'itemCreated'
// etc.
}
然后,我可以简单地将我的项目工厂注入控制器,并引用如下事件：
$rootScope.$on(items.events.update,function() {});
我还考虑过简单地定义所有事件,无论它们是拦截器事件还是项目事件,都是我应用程序中的常量.然而,似乎这个解决方案直接将项目事件耦合到模块本身,而不是项目工厂,这是我觉得它们“属于”的地方.
基本上,问题是现在所有的事件定义似乎都散布在各地.我的问题是：您建议在AngularJS中模块化和定义事件的模式或最佳实践是什么？
我同意这些项目事件应该属于事件源.您可以在项目工厂中实现一个
observer pattern,它隐藏了对$rootScope的依赖关系以获取事件监听器.这样,事件键本身就是项目工厂的私有细节,并且通过为其调用专用函数来明确对事件的订阅.这种方法使您的代码更加独立于$rootScope,并且比事件名称约定更容易维护(考虑使用搜索特定事件订阅方法与$rootScope.$emit / $on的用法)：
angular.module('events',[])
.service('items',['$rootScope',function($rootScope) {
var createdEventKey = 'item.created';
return {
create: function () {
$rootScope.$emit(createdEventKey,{"name": "aItemName"});
},onCreated: function(callback,scope) {
var unsubscribeFunction = $rootScope.$on(createdEventKey,function(event,payload) {
callback(payload);
});
// allow to unsubscribe automatically on scope destroy to prevent memory leaks
if (scope) {
scope.$on("$destroy",unsubscribeFunction);
}
return unsubscribeFunction;
}
}
}])
.controller('TestController',function($scope,items) {
items.onCreated(function (item) {
console.log("Created: " + item.name);
},$scope);
});
