定制事件 观察者模式

Posted 2020-06-09

事件模型是观察者模式的一种类型

 

原理就是：对象在它生命周期里当一个特别状态出现的时候下可以发布事件，其他对象可以观察这个对象，等待那些特别状态出现的时候再做出反应。

 

观察者模式由两种类型对象组成：

subject  ： 就是负责发布事件的

observer： 观察者就是负责观察subject  ，通过订阅那些事件

 

需要注意的是，subject  并不知道任何关于observer的信息，即使observer不存在它也能照常运行。但是observer是了解subject的，并且给它会发布的事件注册了event handle；

例如当你在处理一个Dom时，那个Dom元素就是subject，event handle就是observer。

 

事件在和Dom交互的时候经常使用，但事件模式也可以在non-Dom情况下通过定制事件来使用：原理就是通过创建一个对象来管理事件，允许其他对象去监听这些事件

 

举例：

function EventTarget(){

     this.handlers = {};                     用来保存event  handle

}

 

EventTarget.prototype = {

        constructor: EventTarget,

addHandler: function(type, handler){

if (typeof this.handlers[type] == “undefined”){            判断时候存在这个事件类型，存在就把event加到对应类型的数组里

     this.handlers[type] = [];

}

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

},

fire: function(event){

if (!event.target){

     event.target = this;

}

if (this.handlers[event.type] instanceof Array){                 查看对应事件类型的event handle，再一一调用这个handle

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;                                                      当找到需要删除的event handle就退出for循环，从事件回调数组中删除该event handle

}

}

        handlers.splice(i, 1);

} 

}

};

 

使用方法：

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);