首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议129:自定义事件

关灯直达底部

事件是一种称做观察者的设计模式,是一种创建松散耦合代码的技术。对象可以发布事件,以表示该对象声明周期中某个有趣的时刻到了。其他对象可以观察该对象,等待有趣的时刻到来并通过运行代码来响应。观察者模式由两类对象组成:主体和观察者。

❑主体负责发布事件,同时观察者通过订阅这些事件来观察主体。

❑主体并不知道观察者的任何事情,它可以独自存在并正常运作(即使观察者不在)。

自定义事件就是对已经存在的事件进行包装,也就是说,自定义事件在执行的时候还是需要依赖已有的键盘、鼠标、HTML等事件来执行,或者由其他函数触发执行,这里的触发是指直接调用自定义事件中声明的某个接口方法,以便不断执行添加到自定义事件中的函数。

自定义事件内部有一个事件存储器,它根据添加的事件的类型不同来存储各个类的事件执行函数,当再次触发这类事件时,就轮询执行添加到该类型下的函数。自定义事件隐含的作用是创建一个管理事件的对象,让其他对象监听那些事件。基于自定义事件的原理,可以想象自定义事件很多时候用于实现订阅—发布—接收性质的功能。

❑基本模式:


function EventTarget{

this.handlers={};

}

EventTarget.prototype={

constructor:EventTarget,

addHandler:function(type,handler){

if(typeof this.handlers[type]=="undefined"){

this.handlers[type]=;

}

this.handlers[type].push(handler);

},

fire:function(event){

if(!event.target){

event.target=this;

}

if(this.handlers[event.type]instanceof Array){

var handlers=this.handlers[event.type];

for(var i=0,len=handlers.length;i<len;i++){

handlers[i](event);

}

}

},

removeHandler:function(type,handler){

if(this.handlers[type]instanceof Array){

var handlers=this.handlers[type];

for(var i=0,len=handlers.length;i<len;i++){

if(handlers[i]===handler){

break;

}

}

Handlers.splice(i,1);

}

}

};


❑使用EventTarget类型的自定义事件的方法如下:


function handleMessage(event){

alert("message received:"+event.message);

}

//创建一个新对象

var target=new EventTarget;

//添加一个事件处理程序

target.addHandler("message",handleMessage);

//触发事件

target.fire({

type:"message",

message:"hello world!"

});

//删除事件处理程序

target.removeHandler("message",handleMessage);


❑使用实例:


function Person(name,age){

eventTarget.call(this);

this.name=name;

this.age=age;

}

inheritPrototype(Person,EventTarget);

Person.prototype.say=function(message){

this.fire({

type:"message",

message:message

});

};

function handleMessage(event){

alert(event.target.name+"says:"+event.message);

}

//创建新person

var person=new Person("Nicholas",29);

//添加一个事件处理程序

Person.addHandler("message",handleMessage);

//在该对象上调用一个方法,它触发消息事件

person.say("Hi there");