javascript实现Observer模式来管理多个事件回调
来源:互联网 发布:软件并发数 编辑:程序博客网 时间:2024/06/07 01:05
《实战ajax》第四章介绍了这样的一个模型,与java中的事件处理模型相一致,观察者——监听者模式,感觉很酷:)。比如,我要对ID为mousemat的div标签的onclick事件增加两个事件writestatus()和drawThumbnail(),更新状态栏和重定位鼠标位置这两个事件,典型的代码应该像这样:
window.onload=function(){
var mat=document.getElementById('mousemat');
mat.onclick=mouseObserver;
cursor=document.getElementById('cursor');
}
function mouseObserver(event){
var e=window.event||event;
writeStatus(e)
drawThumbnail(e)
}
这样的方式目前看起来还算清晰,但是当事件增多时将不可避免地复杂起来,如果我们能像java中的事件处理模型那样直接addListener该多好,书中给出了例子:
window.onload=function(){
var mat=document.getElementById('mousemat');
cursor=document.getElementById('cursor');
var mouseRouter=new jsEvent.EventRouter(mat,"onclick");
mouseRouter.addListener(writeStatus);
mouseRouter.addListener(drawThumbnail);
}
引入了一个EventRouter对象,此对象完整代码如下:
requires extras-array.js
var jsEvent=new Array();
jsEvent.EventRouter=function(el,eventType){
this.lsnrs=new Array();
this.el=el;
el.eventRouter=this;
el[eventType]=jsEvent.EventRouter.callback;
}
jsEvent.EventRouter.prototype.addListener=function(lsnr){
this.lsnrs.append(lsnr,true);
}
jsEvent.EventRouter.prototype.removeListener=function(lsnr){
this.lsnrs.remove(lsnr);
}
jsEvent.EventRouter.prototype.notify=function(e){
var lsnrs=this.lsnrs;
for(var i=0;i<lsnrs.length;i++){
var lsnr=lsnrs[i];
lsnr.call(this,e);
}
}
jsEvent.EventRouter.callback=function(event){
var e=event || window.event;
var router=this.eventRouter;
router.notify(e)
}
这段代码并不难理解,实现了一个事件顺序数组,增加的监听器函数通过Function.call()调用。两个方法addListener和removeListener真正实现了清晰的事件模型。
window.onload=function(){
var mat=document.getElementById('mousemat');
mat.onclick=mouseObserver;
cursor=document.getElementById('cursor');
}
function mouseObserver(event){
var e=window.event||event;
writeStatus(e)
drawThumbnail(e)
}
这样的方式目前看起来还算清晰,但是当事件增多时将不可避免地复杂起来,如果我们能像java中的事件处理模型那样直接addListener该多好,书中给出了例子:
window.onload=function(){
var mat=document.getElementById('mousemat');
cursor=document.getElementById('cursor');
var mouseRouter=new jsEvent.EventRouter(mat,"onclick");
mouseRouter.addListener(writeStatus);
mouseRouter.addListener(drawThumbnail);
}
引入了一个EventRouter对象,此对象完整代码如下:
requires extras-array.js
var jsEvent=new Array();
jsEvent.EventRouter=function(el,eventType){
this.lsnrs=new Array();
this.el=el;
el.eventRouter=this;
el[eventType]=jsEvent.EventRouter.callback;
}
jsEvent.EventRouter.prototype.addListener=function(lsnr){
this.lsnrs.append(lsnr,true);
}
jsEvent.EventRouter.prototype.removeListener=function(lsnr){
this.lsnrs.remove(lsnr);
}
jsEvent.EventRouter.prototype.notify=function(e){
var lsnrs=this.lsnrs;
for(var i=0;i<lsnrs.length;i++){
var lsnr=lsnrs[i];
lsnr.call(this,e);
}
}
jsEvent.EventRouter.callback=function(event){
var e=event || window.event;
var router=this.eventRouter;
router.notify(e)
}
这段代码并不难理解,实现了一个事件顺序数组,增加的监听器函数通过Function.call()调用。两个方法addListener和removeListener真正实现了清晰的事件模型。
- javascript实现Observer模式来管理多个事件回调
- observer模式的2个实现
- 【C#】Observer设计模式委托事件的使用(获取Subject多个属性)
- 【C#】Observer设计模式委托事件的使用(获取Subject多个属性)
- JavaScript 委托 实现触发多个事件
- 实现范例的Observer设计模式 事件 委托
- javascript的设计模式实现07之Observer
- JavaScript模式之观察者模式(Observer Pattern)
- 使用js实现observer模式
- 实现Observer模式(转载)
- java中实现observer模式
- C++实现Behavioral - Observer模式
- observer模式的简单实现
- C++实现Behavioral - Observer模式
- Observer模式实现状态监控
- Java 实现观察者(Observer)模式
- Java 实现观察者(Observer)模式
- Java 实现观察者(Observer)模式
- “员工上网管理”网上虚拟辩论
- 神奇的fork
- CListBox & CCheckListBox 使用技巧
- 这段时间,确实太忙了,几乎天天加班
- VC小知识总结!(精品收集)
- javascript实现Observer模式来管理多个事件回调
- 罗马复兴各民族兵种详细参数——西台篇
- MFC 定制控件(Customize Control) 及 MFC CWnd和WIN32 HWND关联方法
- 插件介绍
- 谁更需要新心态
- 必备测试软件
- About hardware
- 软件界面交互和易用性改进总结
- 7步教你使用ItellijIDEA 5.0 编写J2ME程序