[size=medium][b]一.概述[/b][/size]
[size=small]
在进行前端开发的时候,如果出现模块与模块之间的通信,我们把这两个模块简称为A和B,我们设想一下A和B通信的条件是,A首先告诉B说要通信,然后A在传递一些数据给B,在前端B没有必要给A一个收到数据的反馈。在这里可以进行这样的设计,A模块中触发一个事件,B模块中注册同样一个事件,这样一旦在B中注册的事件被触发,B就能感知到这个事件并且接收到相关的数据。当然一个事件可以被触发多次注册多次,一次触发,多次注册都会响应。其实这里的事件和前端的一些标准事件的概念是一样的,例如要想在前端响应某个按钮的点击事件,我们可以注册一个click事件,同时编写自己的事件处理函数就好了。如果注册了多个click事件,点击按钮之后这多个click事件都会被触发,即所谓的事件冒泡思想。
[/size]
[size=medium][b]二.简单代码测试[/b][/size]
[b]event-center.js[/b]
[b]reg-trigger.js[/b]
[b]test.html[/b]
[size=small]
运行结果如下:
compute score 1
compute level 2
[/size]
[size=medium][b]三.总结[/b][/size]
[size=small]
利用事件进行通信的确可以使得模块与模块之间的耦合度降低,特别是一个模块要和多个模块进行通信的时候,这种事件的设计理念就会变得很重要。同时我们学过设计模式的话,观察者设计模式相信大家都不陌生吧,这里的事件机制其实就是所谓的观察者设计模式,事件的注册犹如观察者的注册,事件的触发犹如观察者的notify等等。
[/size]
[size=small]
在进行前端开发的时候,如果出现模块与模块之间的通信,我们把这两个模块简称为A和B,我们设想一下A和B通信的条件是,A首先告诉B说要通信,然后A在传递一些数据给B,在前端B没有必要给A一个收到数据的反馈。在这里可以进行这样的设计,A模块中触发一个事件,B模块中注册同样一个事件,这样一旦在B中注册的事件被触发,B就能感知到这个事件并且接收到相关的数据。当然一个事件可以被触发多次注册多次,一次触发,多次注册都会响应。其实这里的事件和前端的一些标准事件的概念是一样的,例如要想在前端响应某个按钮的点击事件,我们可以注册一个click事件,同时编写自己的事件处理函数就好了。如果注册了多个click事件,点击按钮之后这多个click事件都会被触发,即所谓的事件冒泡思想。
[/size]
[size=medium][b]二.简单代码测试[/b][/size]
[b]event-center.js[/b]
/**
* 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);
[b]reg-trigger.js[/b]
/**
* 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();
});
[b]test.html[/b]
<script src=".../jquery/jquery.js"></script>
<script src="event-center.js"></script>
<script src="reg-trigger.js"></script>
[size=small]
运行结果如下:
compute score 1
compute level 2
[/size]
[size=medium][b]三.总结[/b][/size]
[size=small]
利用事件进行通信的确可以使得模块与模块之间的耦合度降低,特别是一个模块要和多个模块进行通信的时候,这种事件的设计理念就会变得很重要。同时我们学过设计模式的话,观察者设计模式相信大家都不陌生吧,这里的事件机制其实就是所谓的观察者设计模式,事件的注册犹如观察者的注册,事件的触发犹如观察者的notify等等。
[/size]