javascript设计模式之观察者模式的多个实现版本实例

《javascript设计模式之观察者模式的多个实现版本实例》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、Javascript设计模式之观察者模式的多个实现版本实例这篇文章主要介绍了Javascript设计模式之观察者模式的多个实现版本实例，本文给出3种实现版本代码，同时给出了Jquery实现版本，需要的朋友可以参考下介绍观察者模式又叫发布订阅模式(Publish/Subscribe)它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。使用观察者模式的好处：1.支持简单的广播通信，自动通知所有已经订阅过的对象2.页面载入后目标对象很容易与观

2、察者存在一种动态关联，增加了灵活性。3.目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。正文(版本一)JS里对观察者模式的实现是通过回调来实现的，我们来先定义一个pubsub对象，其内部包含了3个方法：订阅、退订、发布。代码如下：varpubsub={};(function(q){vartopics={},//回调函数存放的数组subUid=-l;//发布方法q.publish=function(topic,args){if(!topics[topic]){returnfalse;}setTimeout(function

3、(){varsubscribers=topics[topic],1en=subscribers?subscribers.length:0;while(len—){subscribers[len].func(topic,args):}},0)；returntrue;};//订阅方法q.subscribe=function(topic,func){if(!topics[topic]){topics[topic]=口；vartoken=(++subUid).toString();topics[topic].push({token:to

4、ken,func:func});returntoken;};//退订方法q.unsubscribe=funotion(token){for(varmintopics){if(topics[m]){for(vari=0,j=topics[m].length:i11;j;i++){if(topics[m][i].token===token){topics[mLsplice(i，1);returntoken;}returnfalse;}；}(pubsub));使用方式如下：代码如下：//来，订阅一个pubsub.subscribeCe

5、xamplel’，function(topics,data){console,log(topics+〃：〃+data);});//发布通知pubsub.publish(’examplel’，’helloworld!’)；pubsub.publishCexamplel’，[’test’，’a’，’b’，’C’]);pubsub.publish(’example1’，[{’color’：’blue’}，{’text’：’hello’}]);怎么样？用起来是不是很爽？但是这种方式有个问题，就是没办法退订订阅，要退订的话必须指定退订的名

6、称，所以我们再来一个版本：代码如下：//将订阅赋值给一个变量，以便退订vartestSubscription=pubsub.subscribeCexamplel’，function(topics,data){console.log(topics+〃：〃+data);});//发布通知pubsub.publish(’example!.’，’helloworld!’)；pubsub.publish(’examplel’，[’test’，’a’，’b’，’(？]);pubsub.publish(’examplel’，[{’color’

7、：’blue’}，{’text’：’hello’}]);//退订setTimeout(function(){pubsub.unsubscribe(testSubscription)},0);//再发布一次，验证一下是否还能够输出信息helloagain!pubsub.publish(’examplel(thiswillfail)’)；版本二我们也可以利用原型的特性实现一个观察者模式，代码如下：代码如下：functionObserver(){this.fns=[]:}Observer,prototype={subscribe:fu

8、nction(fn){this.fns.push(fn);}，unsubscribe:function(fn){this,fns=this.fns.filter(function(el){if(el!==fn){returnel:}});}，update:fun