js版事件管理器

写的一个比较简单的事件管理器,主要从这些方面进行的考虑:
1、实现事件的注册/反注册。
2、实现事件的调用。
3、注册事件的拦截器(方法执行前或执行后)。
目前写的这个版本还比较简单,后一步需要增加事件的有效范围以及事件的拦截器的有效范围的支持,就是scope的概念,还有一个需要改进的地方是将目前事件调用的部分改为COR模式。
源码如下:

/*
 * ============================================================
 * Copyright (C) 2006 
 * ------------------------------------------------------------
 * CVS $Author: BlueDavy $
 * ------------------------------------------------------------
 * 事件管理器
 * 1、事件的注册/反注册
 * 2、事件的调用
 * 3、事件的拦截器(事件执行前和事件执行后)
 * TODO:事件执行的有效范围
 *       拦截器的有效范围
 *       COR Pattern
 * ============================================================
 
*/

 
var EventManager=Class.create();
 
 
// 事件集合
 EventManager.events={};
 
 
// 注册事件
 EventManager.registerEvent=function(eventalias,event){
     EventManager.events[eventalias]
=event;
 }

 
 
// 反注册事件
 EventManager.unregisterEvent=function(eventalias){
     EventManager.events[eventalias]
=null;
 }

 
 
// 拦截器集合
 EventManager.interceptors={};
 
 
// 拦截器常量定义
 EventManager.Interceptor={
     
     BEFORE:
"before",
     
     AFTER:
"after"
     
 }

 
 
// 事件的调用
 EventManager.invoke=function(eventalias){
     
return function(){
         
var bindevent=EventManager.events[eventalias];
         
if(bindevent!=null){
             
try{
                 EventManager.invokeInterceptor(eventalias,EventManager.Interceptor.BEFORE);
                 bindevent.apply(
this,[event]);
                 EventManager.invokeInterceptor(eventalias,EventManager.Interceptor.AFTER);
             }

             
catch(e){
                 
// 不做任何提示
             }

         }

     }

 }

 
 
// 执行拦截器
 EventManager.invokeInterceptor=function(eventalias,type){
     
var typeInterceptors=EventManager.interceptors[type];
     
if(typeInterceptors==null){
         
return;
     }

     
var interceptors=typeInterceptors[eventalias];
     
if(interceptors==null){
         
return;
     }

     
for(var i=0;i<interceptors.length;i++){
         
try{
             interceptors[i].apply(
this,[event]);
         }

         
catch(e){
             
// 不做任何提示
         }

     }

 }

 
 
// 注册方法执行前的拦截器
 EventManager.addBeforeInterceptor=function(eventalias,interceptor){
     EventManager.addInterceptor(eventalias,interceptor,EventManager.Interceptor.BEFORE);
 }

 
 
// 删除方法执行前的拦截器
 EventManager.removeBeforeInterceptor=function(eventalias,interceptor){
     EventManager.removeInterceptor(eventalias,interceptor,EventManager.Interceptor.BEFORE);
 }

 
 
// 注册方法执行后的拦截器
 EventManager.addAfterInterceptor=function(eventalias,interceptor){
     EventManager.addInterceptor(eventalias,interceptor,EventManager.Interceptor.AFTER);
 }

 
 
// 删除方法执行后的拦截器
 EventManager.removeAfterInterceptor=function(eventalias,interceptor){
     EventManager.removeInterceptor(eventalias,interceptor,EventManager.Interceptor.AFTER);
 }

 
 
// 添加拦截器
 EventManager.addInterceptor=function(eventalias,interceptor,type){
     
var typeInterceptors=EventManager.interceptors[type];
     
if(typeInterceptors==null){
         typeInterceptors
={};
     }

     
var interceptors=typeInterceptors[eventalias];
     
if(interceptors==null){
         interceptors
=new Array();
     }

     interceptors.push(interceptor);
     typeInterceptors[eventalias]
=interceptors;
     EventManager.interceptors[type]
=typeInterceptors;
 }

 
 
// 删除拦截器
 EventManager.removeInterceptor=function(eventalias,interceptor,type){
     
var typeInterceptors=EventManager.interceptors[type];
     
if(typeInterceptors==null){
         
return;
     }

     
var interceptors=typeInterceptors[eventalias];
     
if(interceptors==null){
         
return;
     }

     interceptors.remove(interceptor);
     typeInterceptors[eventalias]
=interceptors;
     EventManager.interceptors[type]
=typeInterceptors;
 }


示例如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
<title>::事件管理器示例::</title>
<script src="js/prototype.js"></script>
<script src="js/EventManager.js"></script>
</head>
<body>
    
<input type=button name=btnTest value=演示>
</body>
<script>

    
function newEvent(){
        alert(
"新增动作");
    }

    
    
function beforeNewEvent(){
        alert(
"新增动作执行前");
    }

    
    
function validatorNewEvent(){
        alert(
"执行校验拦截器");
    }

    
    
function afterNewEvent(){
        alert(
"新增动作执行后");
    }


    EventManager.registerEvent(
"newevent",newEvent);
    EventManager.addBeforeInterceptor(
"newevent",beforeNewEvent);
    EventManager.addBeforeInterceptor(
"newevent",validatorNewEvent);
    EventManager.addAfterInterceptor(
"newevent",afterNewEvent);
    
    $('btnTest').onclick
=EventManager.invoke("newevent");

</script>
</html>

posted on 2006-03-09 15:29 BlueDavy 阅读(1923) 评论(1)  编辑  收藏 所属分类: Javascript

评论

# re: js版事件管理器 2007-07-27 17:28 sitinspring

不错的JS机制,MK一下.  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 

公告

 









feedsky
抓虾
google reader
鲜果

导航

<2006年3月>
2627281234
567891011
12131415161718
19202122232425
2627282930311
2345678

统计

随笔分类

随笔档案

文章档案

Blogger's

搜索

最新评论

阅读排行榜

评论排行榜