【 js 基础 】【 源码学习 】backbone 源码阅读（一）

1 _.extend(某个模块.prototype, Events, { 
2      //...........这里定义了 某个模块 自己的一些方法...........
3 })

 1 // 绑定事件。将一个事件绑定到 `callback` 函数上。事件触发时执行回调函数`callback`。
 2 Events.on = function(name, callback, context) {};
 3 
 4 // “on”的控制反转版本。
 5 Events.listenTo = function(obj, name, callback) {};
 6 
 7 // 此函数作用于删除一个或多个回调。
 8 Events.off = function(name, callback, context) {};
 9 
10 // 解除 当前 object 监听的 其他对象上制定事件，或者说是所有当前监听的事件。
11 Events.stopListening = function(obj, name, callback) {};
12 
13 // 绑定事件只能触发一次。在第一次调用回调之后，它的监听器将被删除。如果使用空格分隔的语法传递多个事件，则处理程序将针对每个事件触发一次，而不是一次所有事件的组合。
14 Events.once = function(name, callback, context) {};
15 
16 // once的反转控制版本
17 Events.listenToOnce = function(obj, name, callback) {};
18 
19 // 触发一个或者多个事件，并触发所有的回调函数
20 Events.trigger = function(name) {};
21 
22 // 实例,保存当前对象所监听的对象
23 var Listening = function(listener, obj) {
24     this.id = listener._listenId; //监听方的id
25     this.listener = listener; // 监听方
26     this.obj = obj; // 被监听的对象
27     this.interop = true; 
28     this.count = 0; //监听了几个事件
29     this._events = void 0; // 监听事件的回调函数序列
30 };
31 
32 // Listening的实例可以有 on 方法绑定事件
33 Listening.prototype.on = Events.on;
34 
35 // Listening的实例用来解除正在监听的一个或多个回调。
36 Listening.prototype.off = function(name, callback) {};
37 
38 // 清理监听方和事件列表之间的内存绑定。
39 Listening.prototype.cleanup = function() {};
40 
41 // 等价函数命名
42 Events.bind = Events.on;
43 Events.unbind = Events.off;

A.listenTo(B, “b”, callback);

B.on(“b”, callback, A);

 1 // 绑定事件。将一个事件绑定到 `callback` 函数上。事件触发时执行回调函数`callback`。
 2 // 典型调用方式是`object.on(‘name‘, callback, context)`.
 3 // `name`是监听的事件名, `callback`是事件触发时的回调函数, `context`是回调函数上下文，即回调函数中的This(未指定时就默认为当前`object`).
 4 // 如果传递参数 `"all"，任何事件的发生都会触发该回调函数。回调函数的第一个参数会传递该事件的名称。举个例子，将一个对象的所有事件代理到另一对象：
 5 // 例子：
 6 // proxy.on("all", function(eventName) {
 7 //   object.trigger(eventName);
 8 // });
 9 Events.on = function(name, callback, context) {
10     // this._events 保存所有监听事件
11     // 调用 onApi 用来绑定事件
12     // eventsApi函数参数(iteratee, events, name, callback, opts)
13     // 参数中 如果还没有this._events，那么就初始化为空对象。
14     // 
15     // opts中参数：
16     // callback 事件的回调函数
17     // context 回调函数的上下文对象（即当调用on时，为context参数，当调用view.listenTo(....)时，为调用的对象如：view。）
18     // ctx 为context ，当context不存在时，为被监听的对象，如：model.on(…)或view.on(model,…)中的model
19     // listening 其实就是view._listeningTo中的某个属性值，可以看成: listening == view._listeningTo[‘l1’]
20     this._events = eventsApi(onApi, this._events || {},
21     name, callback, {
22         context: context,
23         ctx: this,
24         listening: _listening
25     });
26 
27     // 处理通过 listenTo 方法调用 on 绑定的情况
28     // 在下方定义的 Events.listenTo 中会调用 on 方法来绑定事件，当你调用listenTo方法的时候（如下一行的例子1）这个时候就会产生有 _listening 的情况。
29     // 例子1:A.listenTo(B, “b”, callback);
30     // _listening：在下方 Events.listenTo 方法中，被赋值为正在监听的对象的id，例子1中的 B 的 id。赋值语句如下：
31     // var listening = _listening = listeningTo[id];
32     // 结合下方的 listenTo 方法来理解这个变量
33     if (_listening) {
34         // 定义变量监听者 listener，赋值 this._listeners；如果还没有this._listeners，初始化为空对象。
35         var listeners = this._listeners || (this._listeners = {});
36         // 将上文定义的私有全局变量_listening 赋值给 listeners[_listening.id]; 即 监听者监听的对象id。
37         listeners[_listening.id] = _listening;
38         // Allow the listening to use a counter, instead of tracking
39         // callbacks for library interop
40         // todo
41         // 允许 listening 使用计数器，而不是跟踪库互操作性回调
42         _listening.interop = false;
43     }
44 
45     // 返回 this
46     return this;
47 };

 1 // 触发一个或者多个事件，并触发所有的回调函数
 2 Events.trigger = function(name) {
 3     // 每个Events对象内部有一个_events对象，保存某一个事件的回调函数队列。
 4     // 如果没有监听事件，则直接返回
 5     if (!this._events) return this;
 6 
 7     // 参数长度
 8     var length = Math.max(0, arguments.length - 1);
 9     // 新建一个数组
10     var args = Array(length);
11     // 在数组args中保存传递进来的除了第一个之外的其余参数,提取出来的参数最终回传递给下方定义的函数 triggerApi
12     for (var i = 0; i < length; i++) args[i] = arguments[i + 1];
13 
14     // 调用下方定义的triggerApi
15     eventsApi(triggerApi, this._events, name, void 0, args);
16     return this;
17 };

 1 var Todo = Backbone.Model.extend({
 2     model.trigger(‘destroy‘);
 3 });
 4 
 5 var TodoView = Backbone.View.extend({
 6     events: {
 7       "click a.destroy" : "clear",
 8     },
 9 
10     initialize: function() {
11       this.listenTo(this.model, ‘destroy‘, this.remove);
12     },
13 
14     clear: function() {
15       this.model.destroy();
16     },
17 
18     remove: function() {
19       this.$el.remove();
20     }
21 
22 });

this.listenTo(this.model, ‘destroy‘, this.remove);