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

Javascript设计模式之观察者模式的多个实现版本实例 这篇文章主要介绍了 Javascript设计模式之观察者模 式的多个实现版本实例，本文给出3种实现版本代码，同时 给出了 Jquery实现版本，需要的朋友可以参考下 介绍 观察者模式又叫发布订阅模式(Publish/Subscribe) 它定义了一种一对多的关系，让多个观察者对象同时监听 某一个主题对象，这个主题对象的状态发生变化时就会通 知所有的观察者对象，使得它们能够自动更新自己。 使用观察者模式的好处： 支持简单的广播通信，自动通知所有已经订阅过的 对象 页面载入后目标对象很容易与观察者存在一种动态 关联，增加了灵活性。 目标对象与观察者之间的抽象耦合关系能够单独扩 展以及重用。 正文(版本一) JS里对观察者模式的实现是通过回调来实现的，我们 来先定义一个pubsu b对象，其内部包含了 3个方法：订阅、 退订、发布。 代码如下： varp ubsub={}; (f unction (q) { vartopics ={}, //回调函数存放的数组 subUid=-l; //发布方法 q. publish=f unction (top ic, args) { if (! topics[to pic]) { retur nfalse; } s etTimeout (f unction () { varsubscri bers=topics [topic], 1 en=subscrib ers?subscri bers. length :0; while (le n—) { subs cribers [len ]. func (topi c, args): } },0)； returntr ue; }; //订阅方法 q. subscri be=function (topic, func ) { if (!topic s[topic]) { t opics [topic ] = 口； var token= (++su bUid). toStr ing (); topic s [topic]. pu sh({ token: t oken, func:f unc }); retur ntoken; }; //退订方法 q. uns ubscribe=fu notion (toke n) { for (varm intopics) { i f(topics[m]){ for (var i=0, j=topic s [m]. length : i 11; j ; i++) { if (topic s [m] [i]. tok en===token) { topics[m L splice (i，1); returnto ken; } ret urnfalse; }； } (pubsub)); 使用方式如下： 代码如下： //来，订阅一个 pubsub. subs cribeCexam plel’，funct ion (topics, data) { con sole, log (to pics+〃： 〃+da ta); }); //发布通知 pubsub. publish(’ ex amplel’，’ he lloworld!’)； pubsub. p ublishC exa mplel’，[’ te st’，’a’，’b’，’C’]); pu bsub. publis h(’ example 1 ’，[ {’ color’ ：’ blue’ }，{’ text’ ：’ hell o’ }]); 怎么样？用起来是不是很爽？但是这种方式有个问题， 就是没办法退订订阅，要退订的话必须指定退订的名称， 所以我们再来一个版本： 代码如下： //将订阅赋值给一个变量，以便退订 vartest Subscriptio n=pubsub. su bscribeCex amplel’，fun ction(topic s, data) { c onsole.log(topics+〃：〃+data); }); //发布通知 pubsu b. publish(’ example!.’，’ helloworld!’)； pubsub . publish(’ e xamplel’，[’ test’，’ a’，’ b’，’(？]); pubsub. publ ish(’exampl el’，[{’colo r’：’blue’}， {’ text’ ：’ he llo’ }]); //退订 setTimeo ut (function () { pubsub . unsubscrib e (testSubsc ription) },0); //再发布一次，验证一下是否还能够输出信息 helloagain