前端自定义事件的编程基础

一.概述

    在进行前端开发的时候，如果出现模块与模块之间的通信，我们把这两个模块简称为A和B,我们设想一下A和B通信的条件是，A首先告诉B说要通信，然后A在传递一些数据给B,在前端B没有必要给A一个收到数据的反馈。在这里可以进行这样的设计，A模块中触发一个事件，B模块中注册同样一个事件，这样一旦在B中注册的事件被触发，B就能感知到这个事件并且接收到相关的数据。当然一个事件可以被触发多次注册多次，一次触发，多次注册都会响应。其实这里的事件和前端的一些标准事件的概念是一样的，例如要想在前端响应某个按钮的点击事件，我们可以注册一个click事件，同时编写自己的事件处理函数就好了。如果注册了多个click事件，点击按钮之后这多个click事件都会被触发，即所谓的事件冒泡思想。

二.简单代码测试
event-center.js

/**
 * author:yangbolin
 * desc:事件中心
 * date:2013-02-18
 */
var YBL = new Object();
(function($, app){
	YBL.EVENT = {
		host:$('<div/>'),		//其实就是一个jQuery元素，自定义的事件都可以往这个元素上面注册
		pub:function(eType, data) {
			// 手动触发一个事件
			this.host.trigger(eType, data);
		}
	}
})(jQuery);

reg-trigger.js

/**
 * author:yangbolin
 * date: 2013-02-28 
 * desc: 事件测试
 */
jQuery(function($){
	var E = YBL.EVENT,
		host = E.host;
		
	var mod = {
		init:function() {
			this.computeScore();
			this.computeLevel();
			this.start();
		},
		start:function() {
			var data = {
				score:1,
				level:2
			}
			E.pub("RUN", data);// RUN事件的触发
		},
		/** RUN事件一旦触发就计算分数 **/
		computeScore:function(){
			host.on("RUN", function(e, data){ //注册RUN事件
				console.log("compute score " + data.score);
			});
		},
		/** RUN事件一旦触发就计算级别 **/
		computeLevel:function() {
			host.on("RUN", function(e, data){
				console.log("compute level " + data.level);
			});
		},
	}
	mod.init();
});

test.html

<script src=".../jquery/jquery.js"></script>
<script src="event-center.js"></script>
<script src="reg-trigger.js"></script>

运行结果如下:
compute score 1
compute level 2

三.总结

利用事件进行通信的确可以使得模块与模块之间的耦合度降低，特别是一个模块要和多个模块进行通信的时候，这种事件的设计理念就会变得很重要。同时我们学过设计模式的话，观察者设计模式相信大家都不陌生吧，这里的事件机制其实就是所谓的观察者设计模式，事件的注册犹如观察者的注册，事件的触发犹如观察者的notify等等。