透过源码学前端 之 Backbone 二 -- 江潇
第二部分 Events - 首先讨论下 【 Observable -- 观察者模式 】
Events 是Backbone 框架的基础，个人认为其也是代码思维最精秒部分，
先做一个简单的demo，作为后面使用范例
var Person = function(){};
for( var key in Events ){
Person.prototype[key] = Events[key];
}
Person.prototype.setName = function( name ){
this.trigger( 'setName', name );
//do somthing
return this;
}
var person = new Person;
创建events对象
var Events = Backbone.Events = {
on : function( name, callback, context ){
//name: 事件名 'show', callback: 执行的函数 function, context：执行callback环境
if( !eventsApi( this, 'on', name, [callback, context]) || !callback ){
/*
* 作用：eventsApi针对当name为JSON 或 用 eventSplitter 间隔的字符串 情况，如当name 为 'show hide setValue' 时，通过eventsApi 分隔成数组，依次取单个元素再回到 on 函数里进行添加事件操作
* 当然如果callback为空，即不指定任何需要执行的 函数，该方法也没有任何意义。即停止
* 引申：此次学习两点
* 1、如何巧妙使用函数返回值
* 2、在if 判断中 组合使用 && || 等表示式
*/
return this;
}
/*
* 通过eventsApi 对 name 进行处理，执行到后面name只会是字符串 如 show
*/
this._events || ( this._events = {});
/*
* 作用：如果Events已有 _events 对象，则继续使用，无则创建一新对象，对组件添加的事件都将保存在 _events 内
* 引申：这样的写法很实用 且 简洁，初学者可能会使用if条件语句写成
if( !this._events ){
this._events = {};
}
或 使用三目运算
!this._events ? this._events = {} : '';
但这样通过 '||' 即达到此功能，A || B，当 A 符合条件时 B 不再执行，否则才执行。该写法适用于符合某一简单条件时，执行某一行命令，当需执行命令超过一行则不适合
举一反三，当情况相反，即符合A条件时，再执行B方法
this._events && console.log( this._events ); 即当this._events存在时在控制台上输出该对象
*/
var events = this._events[ name ] || ( this._events[name] = []);
/*
* 作用：此处用处同上，取对象_events里 key 为 name的值，如果没有则新定义数组
* 对比：较常见且不简洁的写法
*
if( !this._events[ name ] ){
this._events[name] = []
}
var events = this._events[name]
*/
events.push({callback: callback, content: content, ctx: context || this});
/*
* 作用：将本次定义的回调函数 callback 及 环境等定义成一个JSON形式，保存到this._evnets[name] 的数组里。当调用trigger方法里将依次执行该数据里的callback
*/
return this;
/*
* 作用：执行一个函数，即使不需要用到返回值时，默认返回 this 对后面的代码也会更有意义。
引申：如jquery里 ，$('#id').addClass('class').css({'width':'100'}).attr({'title': '返回this比无返回值有意义'});
否则就要 var dom = $('#id');
dom.addClass('class');
dom.css({'width':'100'});
dom.attr({'title': '返回this比无返回值有意义'});
*/
},
/*
* 作用：定义监听事件，为当前组件添加一个监听事件，放到this._events里
* 示例：通过上面的介绍，我们可以得用，on的添加方法有以下几种方式
1、添加一个监听事件
person.on( 'setName', function( name ){
console.log(name);
});
2、添加多个监听事件名，但都使用一个函数
person.on( 'setName show hide', function( config ){
console.log( config)
});
3、添加多个监听事件名，每个都对应一个函数
person.on({
setName: function(config){ //do something },
show: function(config){ //do other something },
hide: function(config){ //do another something },
});
*
*/
once : function( name, callback, context ){
if( !eventsApi( this, 'once', name, [callback, context]) || !callback){
return this;
}
//作用同 on
var self = this; //暂存当前环境量，以便在下面的函数里使用
var once = _.once( function(){
self.off( name, once ); //通过off方法移除添加的监听事件 name:callbaak
callback.apply( this, arguments ); //执行callback
});
/*
* 作用：_.once 作用详见 underscore，其意义就是在于对其参数里传递的 函数执行一次并记录，下次不再执行。
* 此处是对 callback 进入了二次包装，当执行该函数时，先删除该监听再执行。这样即达到了执行一次目的
*/
once._callback = callback;
/*
* 作用：此处的_callback 只作记录保存 callback，只once记录，只因为其callback已经被包装过，
* 后面进行off、trigger等方法需要核对callback时进行比较
*/
return this.on( name, once, context ); //通过 on 添加已经包装好 callback 的 once函数
},
/*
* 作用：定义只执行一次的监听事件，相对于 on ，其只是对 callback 进行了包装，在执行callback时，会off该方法，这样 _events 将没有该记录
* 示例：通过上面的介绍，我们可以得用，once 的添加方式 同 on;
*/
off : function( name, callback, context ){
var retain, //新事件队列，将不需要删除的事件保存在retain队列里，并将_events清空后，其堆栈指向retain
ev,
events, //某一name下的事件队列
name,
i,
l,
j,
k;
if( !this._events || !eventsApi( this, 'off', name, [callback, context])){
return this;
}
/*
* 作用：通过on方法知道所有的事件都定义在_events里，如果该实例没有_events，则无从删除
* 对 eventsApi的判断同 on
* 此处比前面两个方法少了 callback，是不指定某个callback时，则删除该name下的所有的方法
*/
if( !name && !callback && !context ){
this._events = {};
return this;
}
/*
* 作用：即当不传任何参数时，直接清空_events，即删除所有的事件
*/
names = name ? [name] : _.keys( this._events );
/*
* 作用：当参数name存在时，将其转为数组。
* 否则取_events 对象里的所有 key组成的数组，即name 为空时，取已经定义过的所有事件名，此处意味着将删除所有的事件名下的函数
*/
for( i = 0, l = names.length; i < l ; i++ ){
name = names[i];
if( events = this._events[name] ){ //如果该事件名在 _events 里被定义过，则取值赋给events
this._events[name] = retain = []; //清空原 _events里保存的对应name的事件
if( callback || context ){ //如果有传callback 或 context，意味着可能只会删除对应该参数的事件
for( j = 0, k = events.length ; j < k; j++ ){ //遍历_events下 某 name 的 事件组
ev = events[j];
if( (callback && callback !== ev.callback && callback !== ev.callback._callback ) || (context && context !== ev.context )){
retain.push( ev );
}
/*
* 作用：对 callback 及 context 进行匹配核对，如果任何一个存在且与 已添加事件相同，则删除。
* 此处是定义了一个相反的操作，即不存在，即不将该添加到新队列
* 引申：此处的 条件语句 判断组合使用了布尔组合，代码简洁，但对逻辑能力驾驭有更高要求，
* 对初学者刚开发时建议可以先用 分离的多层次的if判断理清逻辑头绪，再试着用此种布尔组合判断
* 我实际使用时，发现当逻辑未确定，且还需经常修改时该写法将增加开发成本，并不易为其他开发者所容易理解。可视情况使用
*/
}
}
if( !retain.length ){
delete this._events[ name ];
}
/*
* 作用：如果callback 和 context都没有，或者二者能匹配所有events，则retain为空，则删除该name下所有事件
*/
}
}
return this;
},
/*
* 作用： off定义了删除监听事件机制，其逻辑就是依次将_events[name]里事件暂保存到events，清空_events[name]。
* 再到 events里依次比较callback 或 context 是否有相同的存在，如果没有则通过临时变量retain再次添加到 _events[name]里。
* 引申： 1、如何清空一个Object 或 Array，网上有很多介绍，遍历delete，或 length设为0，但通过上面的功能，可以看出，
最简洁的清空对象及数组的方法是 obj = {}, arr = [].
* 示例：调用off有以下几种方式
1、person.off(); //清空所有事件
2、person.off( 'setName' ); //清空setName下的所有事件
3、person.off( 'setName show hide' ); //清空setName、show、hide下的所有事件
4、person.off( 'setName', func ); //清除 'setName' 下的 func事件
5、person.off( 'setName', func, context ); //清除 'setName' 下 同作用域 context 的 func 事件
6、上面 4、5同3的其它组合
*/
trigger : function( name ){
if( !this._events ){
return this;
}
var args = slice.call( arguments, 1 );
/*
* 作用：将截掉第一个参数name后的其它参数转成数组
* 引申：参数集合是伪数组，如需要使用数组的所有功能，常用的方式是通过 Array.prototype.slice.call( array )，转成真数组，这样其才有数组的所有原型方法
*/
if( !eventsApi( this, 'trigger', name, args)){
return this;
}
var events = this._events[ name ]; //取name对数事件集
var allEvents = this._events.all; //取name == 'all' 的事件集
if( events ){ //如果有对应的事件
triggerEvents( events, args ); //通过 triggerEvents调用执行
}
if( allEvents ){ //执行name为 All的事件队列
triggerEvents( allEvents, arguments );
}
return this;
},
/*
* 作用：触发通过on添加到this._events里的name下的事件队列
* 示例：调用trigger 有如下方式
1、person.trigger( 'setName', arg1 );
2、person.trigger( 'setName show', arg1 );
*/
stopListening: function( obj, name, callback ){
var listeners = this._listeners;
if( !listeners ){
return this;
}
var deleteListener = !name && !callback;
if( typeof name === 'object' ){
callback = this;
}
if( obj ){
(listeners = {})[obj._listenerId] = obj;
}
for( var id in listeners ){
listeners[id].off( name, callback, this );
if( deleteListener ){
delete this._listeners[id];
}
}
return this;
}
/*
* 作用：删除通过 listenOn 添加的监听事件
*/
};
var eventSplitter = /\s+/;
/*
* 作用：使用正则表达式定义分隔符，即不少一个空格
* 引申：1、详见正则表达式使用
*/
var eventsApi = function( obj, action, name, rest ){ //obj: Events, action: 'on', name:'show' ,rest: [callback, context ]
if( !name ){
return true;
}
/*
* 作用：当name 为空时，返回true，在父函数如 on 里经过 ! 反转取值为false，则会继续判断callback是否存在
* 此函数返回的true 或 false 完全是为了其父级函数调用判断方便
*/
if( typeof name === 'object' ){
for( var key in name ){
obj[action].apply( obj, [key, name[key]].concat( rest ))
}
return false;
}
/*
* 作用：当name为 object格式，如 {show: function(){console.log(show)}}，迭代取各元素到 Events里的 action事件里执行操作
*/
if( eventSplitter.test( name )){ //如果name 里含eventSplitter 如 'show hide'
var names = name.split( eventSplitter ); //用eventSplitter为分隔符截取name成数组
for( var i = 0, l = name.length; i < l; i++ ){
obj[action].apply( obj, [names[i]].concat( rest ));
}
return false;
}
/*
* 当name 为字符串且含 eventSplitter 时，用空格分隔截取name为数组，循环执行 Events 里执行action操作
*/
return true;
};
/*
* 作用：当name不是单个字符串，而是 Object 或 含 eventSplitter 的string时，分离提取，迭代执行原 on / off / trigger等操作
* 引用：【 ARRAY的使用 】
*/
var trggerEvents = function( events, args ){
var ev,
i = -1,
l = events.length,
a1 = args[0],
a2 = args[1],
a3 = args[2];
switch( args.length ){
case 0:
while( ++i < l ){
(ev = events[i]).callback.call( ev.ctx );
return;
}
case 1:
while( ++i < l ){
(ev = events[i]).callback.call( ev.ctx, a1);
return;
}
case 2:
while( ++i < l ){
(ev = events[i]).callback.call( ev.ctx, a1, a2);
return;
}
case 3:
while( ++i < 1 ){
(ev = events[i]).callback.call( ev.ctx, a1, a2, a3);
return;
}
default:
while( ++i < l ){
(ev = events[i]).callback.apply( ev.ctx, args );
}
}
};
/*
* 作用：通过trigger调用，执行添加在 this._events里的 callback，不过不清楚，为什么要区分 参数个数，最后的default本可以解决所有问题
*/
var listenMethods = { listenTo: 'on', listenToOnce: 'once' };
_.each( listenMethods, function( implementation, method ){ //implementation 为 listenMethods 里的value, method 为 key
Events[method] = function( obj, name, callback ){
var listeners = this._listeners || ( this._listeners = {});
var id = obj._listenerId || ( obj._listenerId = _.uniqueId( 'l' ));
listeners[id] = obj;
if( typeof name === 'object' ){
callback = this;
}
obj[ implementation ]( name, callback, this );
return this;
};
});
/*
* listendTo 作用同 on，不同在于添加监听的对象 为被动添加，如
_.extend( Person.prototype, Backbone.Events, {
eat: function( food ){
this.trigger( 'eat' + food );
}
});
var Food = function(){};
_.extend( Food.prototype, Backbone.Events, {
apple: function( ){
console.log('apple');
},
eage : function(){
console.log('eage');
}
});
var person = new Person;
var food = new Food;
person.on('eatapple', food.apple); //person主动通过on添加监听
person.eat('apple'); //控制台输出 apple;
person.eat('eage'); //控制台 无输出;
food.listenTo(person, 'eateage', food.eage); //person被动通过listenTo添加监听，达到同样的作用
person.eat('eage'); //控制台输出 eage;
// 而 Backbone 内的实际运用中，通常这样用
var person = new Person;
var Food = function( model ){
this.model = model;
this.init();
};
_.extend( Food.prototype, Backbone.Events, {
apple: function( ){
console.log('apple');
},
eage : function(){
console.log('eage');
},
init: function(){
this.listenTo( this.model, 'eatapple', this.apple );
this.listenTo( this.model, 'eateage', this.eage );
}
});
var food = new Food( person );
person.eat('apple'); //控制台输出 apple;
person.eat('eage'); //控制台输出 eage;
//listendTo 通常用于 view 与 生成 view 的 model 关联，这样可以在 view 内 为 model 添加监听事件，执行 view 的某方法
*/
Events.bind = Events.on; //行业内 bind 也常用于 绑定添加监听 的意义，此处只是增加一个出口名
Events.unbind = Events.off; //同上
_.extend( Backbone, Events ); //将Events的属性值 复制给 Backbone，作为对外输出口。
相关推荐
标题“透过源码学前端 之 Backbone 一”暗示我们将从源码的角度去理解Backbone.js的工作原理。通过阅读和分析源码，我们可以更深入地了解其内部机制，这将对提升我们的前端开发技能大有裨益。 首先，Backbone.js的...
概述： Model 提供了数据存储，将数据以JSON的形式保存在 Model的 attributes里， 但重点功能在于其提供了一套功能强大，使用简单的存、取、删、改数据方法，并在不同的操作里加了相应的监听事件， ...
在提供的压缩包`backbone-callbacks-master`中，很可能包含了Backbone.Callbacks的源码、示例、文档和其他相关资源。通过研究这些内容，你可以更深入地了解其内部实现细节和使用场景，从而更好地将其融入到你的项目...
前端框架backbone使用教程.zip
在本项目中，我们主要探讨的是使用Web前端框架MVC中的Backbone.js来构建一个记账应用程序，同时结合后端技术Node.js（版本：lpNote-1.0）。这是一个典型的前后端分离的开发模式，旨在提供高效且用户友好的交互体验。...
**标题解析：** ...总结来说，这个"前端项目-backbone.radio.zip"提供了学习和实践Backbone.Radio消息传递模式的机会，通过分析源码和理解项目结构，开发者可以更好地掌握前端应用中的组件通信策略。
**Backbone.js 开发秘笈源码详解** Backbone.js 是一个轻量级的JavaScript库，主要用于构建可维护性和结构化的Web应用...总之，深入学习和理解Backbone.js的源码，对于提升前端开发技能和项目实践能力有着极大的帮助。
【标题】"前端项目-backbone-pageable.zip" 涉及到的是一个基于Backbone.js框架的分页解决方案。Backbone.js是一款轻量级的JavaScript库，它为前端开发提供了模型（Model）、视图（View）、集合（Collection）以及...
2. **Epoxy**：Epoxy是Backbone.js的一个插件，它扩展了Backbone.View的功能，引入了双向数据绑定。这意味着视图和模型之间的数据更新可以自动同步，减少了手动操作，提高了开发效率。 3. **数据绑定**：数据绑定是...
在前端开发领域，Backbone.js 是一款非常受欢迎的JavaScript库，它为构建复杂且结构化的Web应用程序提供了强大的数据模型(Model)、视图(View)以及URL路由(Router)等功能。而Backbone.Stickit是Backbone.js的一个扩展...
在"backbone 源码+API"中，我们有两个主要的组成部分：`backbone-master.zip`和`underscore-master.zip`。 首先，`backbone-master.zip`包含了Backbone.js的源码。Backbone.js的源码对于深入理解其工作原理至关重要...
backbone源码解析,写得非常好,下载了你不后悔
在前端开发领域，Backbone.js 是一款非常流行的轻量级MVC（Model-View-Controller）框架，它为构建复杂的JavaScript应用提供了结构化的支持。Backbone-relational 是一个扩展插件，专门用于处理Backbone模型间的一对...
《Node应用程序构建:使用MongoDB和Backbone》是一本深入探讨使用Node.js、MongoDB以及Backbone.js构建高效网络应用的书籍。...书中提供的源码是实践这些概念的宝贵资源，可以辅助读者更深入地理解和应用所学。
在前端开发领域，Backbone.js 是一个非常受欢迎的JavaScript库，它为构建复杂的应用程序提供了一个轻量级的框架。Backbone.Validation 插件是针对Backbone.js设计的一个验证工具，用于帮助开发者轻松地实现对模型...
Backbone.js是一款轻量级的JavaScript库，专为构建...总的来说，通过学习《Backbone.js实战》的源码，开发者不仅可以掌握Backbone.js的基本用法，还能了解到如何在实际项目中应用和优化Backbone.js，提升前端开发技能。
**Backbone.LayoutManager** 是一个基于 **Backbone.js** 的扩展库，专为构建复杂的前端应用提供布局和模板管理功能。在前端开发中，尤其是在构建单页应用（SPA）时，有效地管理和组织页面布局以及处理模板渲染至关...
**标题解析：**"前端项目-backbone-forms.zip" 指的是一个包含前端开发项目的压缩文件，重点在于“backbone-forms”，这通常是指基于Backbone.js库的一个用于构建表单的框架。 **描述详解：**描述提到“前端项目-...
"backbone.wreqr-master" 这个文件名暗示了它是从GitHub或其他版本控制系统导出的，可能是Backbone.Wreqr的源码仓库主分支，通常包含项目的源代码、测试文件、文档和其他资源。 **详细知识点：** 1. **Backbone.js...