Designsor

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

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

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

我们创建一个观察者类：

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创建一个起飞的订阅，一个飞行中的订阅，一个降落的订阅。其实我们可以给任何东西增加订阅，也就是监听，监听我们感兴趣的时刻，然后触发回调函数即可。

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

Tags: javascript观察者模式, javascript设计模式

This entry was posted on 星期四, 7月 22nd, 2010 at 7:52 上午 and is filed under 前端开发. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.