Backbone中Events的中只有3个方法,分别是on, off, trigger,十分清晰,也没有其他依赖,下面我们来分析一下。
Events 是一个可以被mix到任意对象的模块,它拥有让对象绑定和触发自定义事件的能力。 事件在被绑定之前是不需要事先声明的,还可以携带参数。我们通过一个例子来看:
var object = {};
_.extend(object, Backbone.Events);
object.bind("alert", function(msg) {
alert("Triggered " + msg);
});
关键是_.extend ,调用了underscore中的extend的方法,又是extend下面是underscore从第690行开始的
//复制source对象中的所有属性覆盖到destination对象上,他是按照循序的,所以最后源将重写在前面参数相同名称的属性
_.extend = function(obj) {
each(slice.call(arguments, 1), function(source) {
for (var prop in source) {
obj[prop] = source[prop];
}
});
return obj;
};
/**
* Events 是一个可以被mix到任意对象的模块,
* 它拥有让对象绑定和触发自定义事件的能力。
* 事件在被绑定之前是不需要事先声明的,
* 还可以携带参数。我们通过一个例子来看:
* var object = {};
* _.extend(object, Backbone.Events);
* object.bind("alert", function(msg) {
* alert("Triggered " + msg);
* });
* object.trigger("alert", "www.csser.com");
* **/
var Events = Backbone.Events = {
/**
* 绑定 callback 函数到 object 对象。 当事件触发时执行回调函数 callback 。
* 如果一个页面中有大量不同的事件,按照惯例使用冒号指定命名空间
* : "poll:start", 或 "change:selection"
* */
on:function (events, callback, context) {
var calls, event, list;
if (!callback) return this;
events = events.split(eventSplitter);
calls = this._callbacks || (this._callbacks = {});
//保存回调函数,与事件 到对象的_callbacks上
while (event = events.shift()) {
//取出每个事件名放到_callbacks作用对象的属性,然后把回调函数push到这个数组中
list = calls[event] || (calls[event] = []);
list.push(callback, context);
}
return this;
},
/**
* 删除一个或许多回调。如果“上下文”是null,删除所有的回调
* 与功能。如果“回调”是null,删除所有的回调
* 事件。如果“事件”是null,移除所有绑定回所有事件
*
* object.unbind("change", onChange); 只移除onChange回调函数
* object.unbind("change"); 移除所有 "change" 回调函数
* object.unbind(); 移除对象的所有回调函数
*
* **/
off:function (events, callback, context) {
var event, calls, list, i;
// No events, or removing *all* events.
if (!(calls = this._callbacks)) return this;
if (!(events || callback || context)) {
delete this._callbacks;
return this;
}
events = events ? events.split(eventSplitter) : _.keys(calls);
// Loop through the callback list, splicing where appropriate.
while (event = events.shift()) {
if (!(list = calls[event]) || !(callback || context)) {
delete calls[event];
continue;
}
for (i = list.length - 2; i >= 0; i -= 2) {
if (!(callback && list[i] !== callback || context && list[i + 1] !== context)) {
list.splice(i, 2);
}
}
}
return this;
},
/**
* / /触发一个或许多事件,解雇所有绑定回调。回调是
* / /通过相同的参数作为“触发”是,除了事件的名字
* / /(除非你监听的“所有”,这将导致你的回调
* / /接收真实的事件名称作为第一个参数)。
* **/
trigger:function (events) {
var event, calls, list, i, length, args, all, rest;
if (!(calls = this._callbacks)) return this;
rest = [];
//事件分解
events = events.split(eventSplitter);
// Fill up `rest` with the callback arguments. Since we're only copying
// the tail of `arguments`, a loop is much faster than Array#slice.
for (i = 1, length = arguments.length; i < length; i++) {
rest[i - 1] = arguments[i];
}
// For each event, walk through the list of callbacks twice, first to
// trigger the event, then to trigger any `"all"` callbacks.
while (event = events.shift()) {
//复制回调列表来防止修改
if (all = calls.all) all = all.slice();
if (list = calls[event]) list = list.slice();
// 执行事件回调
if (list) {
for (i = 0, length = list.length; i < length; i += 2) {
list[i].apply(list[i + 1] || this, rest);
}
}
// 执行 "all" 回调.
if (all) {
args = [event].concat(rest);
for (i = 0, length = all.length; i < length; i += 2) {
all[i].apply(all[i + 1] || this, args);
}
}
}
return this;
}
};
//别名
Events.bind = Events.on;
Events.unbind = Events.off;