— Designsor

根据昨天写的那篇文章，今天写了个例子来配合说明。没有列举超人起飞的例子，那个例子是给自定义的superman对象，添加了3个自定义事件，而我下面的例子是给大家最熟悉也最关心的Element对象添加自定义事件。

代码如下（需要引入publisher）：

var fuck=function(e){
this.e=e || ”;
alert(this.e+’ fuck off’);
}

Element.prototype.onfuck=new publisher;

fuck.subscriber(Element.prototype.onfuck);

var page=document.getElementById(‘page’);

page.onfuck.deliver(); //alert(fuck off);

page.onfuck.deliver(1); //alert(1fuck off);

/* 你可以给你喜欢的事情随便添加自定义事件，在需要的时候就deliver触发。 */

page.onclick=function(){
this.onfuck.deliver(‘ye~click my ‘+this.id+’ and’); //alert(ye~click my page and fuck off);
}

最后，关于自定义事件的触发条件，必须在这里说明，他的触发，比如click，比如mouseover等动作的实现
是需要自己来编写的，你可以借助click等动作触发，也可以自己模拟，比如重复轮询等，触发用deliver，触发条件必须自己实现。

所以最后的最后，自定义事件或者观察着模式的应用和作用，总结起来就是更彻底的包装了一些代码，实现js的高度解耦，让功能去做功能要做的事，分离开功能和被事件所绑定的对象，可能是Element对象，也可能是自己所创建的对象，任何对象。

希望我不要误导到一些人吧，更多关于自定义事件的文章google一下，仔细阅读，很多种实现方法，关键看适用场合适用场景了。这只是一种设计思想，而不是什么万能药，在需要实现很复杂的业务逻辑的时候用来解耦的一种很好方法。

首先说下标题，可能有点唬人，所以简单的解释一下，我是为了帮助自己理解才写的这篇文章。

个人认为观察者模式类似事件监听器，给任何一个你感兴趣的地方增加一个订阅点，然后在需要的时候触发它。

还是有点迷糊，看代码吧。

我们创建一个观察者类：

function publisher(){
this.subscribers=[];
}

这个构造器里有一个subscribers数组，用来保存订阅者列表。

增加投递方法：

publisher.prototype.deliver=function(data){
this.subscribers.forEach(function(fn){fn(data);})
return this;
}

里面用到了forEach这个js1.6的数组方法，array.forEach(fn)->参数是个函数，这个函数的参数会把这个数组的每个值都带入这个函数中当参数执行一次。

下面是增加订阅方法：

Function.prototype.subscriber=function(publisher){
var that=this;
var alreadyExists=publisher.subcribers.some(function(el){return el===that;});
if(!alreadyExists) publisher.subscribers.push(this);
return this;
}

解释一下，这里的some也是js1.6里的一个数组方法，以一个回调函数为参数，这个方法会依次访问数组每个元素，然后并把这个元素当作参数返回给这个回调函数，如果至少有一次回调函数的返回值是true，（其实就是如果有一个回调函数返回了true）则some返回true；否则返回false。

退订方法就不写了，其实就是在subscribers数组中检测，如果含有退订函数，则清空它。

OK。

现在理清一下思路。publisher和我们都做了什么。

publisher类，内部有一个数组，储存订阅清单。

外部方法deliver(data)，作为增加订阅者也就是投递订阅的接口，参数data为回调参数。

然后给function原型增加了一个subscriber方法，用途是给这个function添加到publisher.subscribers这个数组下。

OK。到这里估计就真相大白了。

我们其实就是给每个函数增加了一个往一个全局数组中push的方法，然后需要触发这个函数的时候，就循环这个数组，遇到注册过的这个函数，就立刻触发。

设计模式书上的例子是给一个superman创建一个起飞的订阅，一个飞行中的订阅，一个降落的订阅。其实我们可以给任何东西增加订阅，也就是监听，监听我们感兴趣的时刻，然后触发回调函数即可。

本来还想写写自定义事件，但是确实想不出容易的例子来，以后再说吧，但是道理其实都是一样的。