透过源码学前端 之 Backbone 二

透过源码学前端 之 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，作为对外输出口。

 

 

 

评论

4 楼 hx_v2018z 2013-10-21  

[flash=200,200][flash=200,200][flash=200,200][flash=200,200][url][url][url][url][url][url][url][url][url][url][img][img][img][img][img][img][img][img][img][img][img][img][img][img][img][list]

[*][list]

[*][*][list]

[*][*][*][list]

[*][*][*][*][list]

[*][*][*][*][*][list]

[*][*][*][*][*][*] 引用

[*][*][*][*][/list]

[*][*][*][*][/list]

[*][*][*][/list]

[*][*][/list]

[*][/list]

[/list][/img][/img][/img][/img][/img][/img][/img][/img][/img][/img][/img][/img][/img][/img][/img][/url][/url][/url][/url][/url][/url][/url][/url][/url][/url][/flash][/flash][/flash][/flash]

|||||||||||||||||||||||||||||||||||||

||||||||||||||||||
|||||||||||||||||

|||||||||||||||||
||||||||||||||||

||||||||||||||||
|||||||||||||||

|||||||||||||||
||||||||||||||

||||||||||||||
|||||||||||||

|||||||||||||
||||||||||||

||||||||||||
|||||||||||

|||||||||||
||||||||||

||||||||||
|||||||||

|||||||||
||||||||

||||||||
|||||||

|||||||
||||||

||||||
|||||

|||||
||||

||||
|||

|||
||

||
|

|

3 楼 hlj317 2013-07-01  

继续关注，希望有更精彩的技术博文分享给大家~~

2 楼 hlj317 2013-06-28  

这个backbone源码分析的系列，大致看了一下，还是挺不错的，就是有可能稍微有点偏难，适合中高级JS水平的码友阅读~~

建议作者可以写一个深入浅出的JS代码学习系列，说不定受众面会更广一些~~

1 楼 hlj317 2013-06-27  

写得不错，很有启发，继续努力~~~