如何跟踪AngularJS中的事件？

发布时间：2020-12-17 10:22:11 所属栏目：安全来源：网络整理

导读：我有一个包含项目的应用程序,您可以执行诸如添加新项目,更新项目文本,将项目移动到其他文件夹等操作. 我有一个项目工厂,它将所有项目作为普通对象保存在数组中,并且工厂返回一个具有各种方法的单例,如get(),set()等. 为了在问题中添加一些上下文,我也在使用N

我有一个包含项目的应用程序,您可以执行诸如添加新项目,更新项目文本,将项目移动到其他文件夹等操作.

我有一个项目工厂,它将所有项目作为普通对象保存在数组中,并且工厂返回一个具有各种方法的单例,如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);
});

完整示例：http://jsfiddle.net/8LtyB/32/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!