Backbone事件模块

事件模块Backbone.Events是Backbone的核心,Model、Collection、View都依赖它。 数组

此外,事件模块的全部方法都挂在了全局的Backbone上,若是你的代码中须要用到自定义事件(实现观察者模式),能够直接使用它。 数据结构

 示符Events是内部的一个引用,为讨论方便,这里也省去了前缀Backbone。 闭包

1、Events API

1.0以前只提供了三个基本方法 on/once/off/trigger,1.0开始增长了几个实用方法 listenTo/listenToOnce/stopListening。 函数

如下是各个方法的意义 性能

  • on 添加自定义事件
  • off 删除自定义事件
  • trigger 派发自定义事件
  • once 添加只执行一次的自定义事件 (内部依赖于_.once)
  • listenTo 添加一个观察对象
  • listenToOnce 添加一个仅执行一次的观察对象
  • stopListening 删除添加的观察对象

2、Events的代码初窥

var Events = Backbone.Events = {
    on: function(name, callback, context) {
        // ...
    },
    once: function(name, callback, context) {
        // ...
    },
    off: function(name, callback, context) {
        // ...
    },
    trigger: function(name) {
        // ...
    },
    stopListening: function(obj, name, callback) {
        // ...
    }
};
 
var eventSplitter = /\s+/;
var eventsApi = function(obj, action, name, rest) {
    // ...
};
var triggerEvents = function(events, args) {
    // ...
};
var listenMethods = {listenTo: 'on', listenToOnce: 'once'};
 
_.each(listenMethods, function(implementation, method) {
    Events[method] = function(obj, name, callback) {
        // ...
    };
});
 
Events.bind   = Events.on;
Events.unbind = Events.off;
 
_.extend(Backbone, Events);

1. 先定义了一个对象(单例),直接挂上了接口方法on/once/off/trigger/stopListening,注意虽然Events头字母大写,这里不是定义一个类或构造器,而是一个单例对象。 this

    剩下的变量和函数都是辅助这个对象的,它们都在闭包空间里,外部不可访问如eventSplitter、eventsApi等 spa

2. eventSplitter用来实现空格间隔一次添加多个事件,如 .on('event1 event2', handler) prototype

3. eventsApi实现的很巧妙,它辅助on/once、off、trigger完成事件的添加、删除、派发。 rest

4. triggerEvent辅助trigger方法实现派发事件,它的实现有些特殊,见 冗余换性能 code

5. 后面的listenMethod和一个each迭代,会给Events添加两个新方法listenTo和listenToOnce

6. 再下面两行给on/off分别取了别名bind/unbind。其实这也是为了兼容老版本,最先的版本添加/删除事件为bind/unbind。

7. 最后一行把Events掺合到全局的Backbone对象上了

拓扑图以下

3、Events内部数据结构 (_events/_listeners)

相对来讲,目前的内部数据结构比较简单。采用传统的先哈希,后数组存储事件处理器对象,处理器对象上有callback和context及ctx。其内部有两个关键对象_eventshe _listeners,都如下划线开头,说明这是私有的(并不是真正私有,一种语法约定,真正私有可以使用闭包实现),仅供内部使用。

_events 这个哈希是默认是挂在Backbone.Events上,因为Events是一个对象,因此很容易被Mix到任何想增长自定义事件的类或对象上。此时_events则挂在该对象上。如Backbone.Model,Backbone.Collection,Backbone.View,当给其实例添加自定义事件时,_events则挂在它们的实例对象上。 

_events的结构以下

_.extend(Backbone, Events);

_listeners 和 _events同样默认也是挂在Backbone.Events上。顾名思义,它是一个监听器,便可觉得其它对象(具备Backbone.Events的全部方法的对象)被添加事件。它的key是以字母“l”开头后跟递增的数字组成,value是一个 “a mixin of Backbone.Events”。

_listeners的结构以下

最后又把Events上的全部方法都拷贝到标示符Backbone这个全局对象上,即给Backbone添加了以下方法。这时能够很方便的使用它给本身的类添加自定义事件。

4、 特殊事件“all”

事件名“all”,在trigger方法中,仔细看代码,你会发现trigger方法中调用了两次triggerEvents,一次是经过参数传进来的事件,另外一次则固定为“all”事件。

var events =this._events[name];
var allEvents =this._events.all;
if (events) triggerEvents(events, args);
if (allEvents) triggerEvents(allEvents, arguments);

trigger的一般实现只需把事件名,参数传进来,取哈希(这里是_events)上取该事件的全部handlers(存在在数组里),挨个执行。但这里为何每一次trigger调用还要单独取下all事件,而后执行呢?

若是只看Backbone.Events模块,是很难理解的。那么就搜索下整个Backbone.js,看“all”事件在哪些地方使用到。最后发现只在Backbone.Collection中用到,且仅一处。

model.on('all',this._onMod事件elEvent,this);

只看这一行代码,仍是难以理解。须要结合Backbone.Model和Backbone.Collection一块儿看。

这里先简单说下,咱们知道这行代码所在方法是Collection.add,在往collection中添加model时执行的,即添加的model都会注册一个“all”事件。而当model自身销毁(destroy)或修改(change)的时候,须要通知其所在Collection。

例如,model销毁后,Collection须要在集合中把它删除,Collection的长度也须要减一。model修改后,也须要通知Collection,这样给Collection添加的change事件也会触发。

这就是“all”事件的真正用途,之前曾想既然Backbone的View和通讯都依赖于jQuery,那么事件模块也彻底可使用$.Callbacks。未曾想到还有一个特殊的“all”事件。

5、Events与Model、Collection、View、Router、History的关系

来看下代码

_.extend(Model.prototype, Events, {
 
})
_.extend(Collection.prototype, Events, {
 
})
_.extend(View.prototype, Events, {
 
})
_.extend(Router.prototype, Events, {
 
})

把事件模块mixin到这几个类的原型上去了。一句话,这些类都具备Pub/Sub的功能,即均可以实现自定义事件,它们之间也就能够经过事件很方便的下降耦合。若是在加上数据、视图、逻辑的分层效果,这就是整个Backbone的精华了。

资料来源:http://www.cnblogs.com/snandy/

相关文章
相关标签/搜索