js版事件管理器

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 >

你可能感兴趣的:(js版事件管理器)