Javascript观察者模式
2014-03-25 16:07
357 查看
var pubsub = {}; (function (q) { var topics = {}, // 回调函数存放的数组 subUid = -1; // 发布方法 q.publish = function (topic, args) { if (!topics[topic]) { return false; } setTimeout(function () { var subscribers = topics[topic], len = subscribers ? subscribers.length : 0; while (len--) { subscribers[len].func(topic, args); } }, 0); return true; }; //订阅方法 q.subscribe = function (topic, func) { if (!topics[topic]) { topics[topic] = []; } var token = (++subUid).toString(); topics[topic].push({ token: token, func: func }); return token; }; //退订方法 q.unsubscribe = function (token) { for (var m in topics) { if (topics[m]) { for (var i = 0, j = topics[m].length; i < j; i++) { if (topics[m][i].token === token) { topics[m].splice(i, 1); return token; } } } } return false; }; } (pubsub)); 将订阅者放在了字典值,发布时通过控制键来控制订阅者。 ---------------------------------------------------------------- function Observer() { this.fns = []; } Observer.prototype = { subscribe: function (fn) { this.fns.push(fn); }, unsubscribe: function (fn) { this.fns = this.fns.filter( function (el) { if (el !== fn) { return el; } } ); }, update: function (o, thisObj) { var scope = thisObj || window; this.fns.forEach( function (el) { el.call(scope, o); } ); } }; //测试 var o = new Observer; var f1 = function (data) { console.log('Robbin: ' + data + ', 赶紧干活了!'); }; var f2 = function (data) { console.log('Randall: ' + data + ', 找他加点工资去!'); }; o.subscribe(f1); o.subscribe(f2); o.update("Tom回来了!") //退订f1 o.unsubscribe(f1); //再来验证 o.update("Tom回来了!"); 和上相同, 把所有的订阅者放在了数组里面了。 --------------------------------------------------------------------- //通用代码 var observer = { //订阅 addSubscriber: function (callback) { this.subscribers[this.subscribers.length] = callback; }, //退订 removeSubscriber: function (callback) { for (var i = 0; i < this.subscribers.length; i++) { if (this.subscribers[i] === callback) { delete (this.subscribers[i]); } } }, //发布 publish: function (what) { for (var i = 0; i < this.subscribers.length; i++) { if (typeof this.subscribers[i] === 'function') { this.subscribers[i](what); } } }, // 将对象o具有观察者功能 [ 将 o 对象赋予此对象的功能 ] make: function (o) { for (var i in this) { o[i] = this[i]; o.subscribers = []; } } }; var blogger = { recommend: function (id) { var msg = 'dudu 推荐了的帖子:' + id; this.publish(msg); } }; var user = { vote: function (id) { var msg = '有人投票了!ID=' + id; this.publish(msg); } }; observer.make(blogger); observer.make(user); var tom = { read: function (what) { console.log('Tom看到了如下信息:' + what) } }; var mm = { show: function (what) { console.log('mm看到了如下信息:' + what) } }; // 订阅 blogger.addSubscriber(tom.read); blogger.addSubscriber(mm.show); blogger.recommend(123); //调用发布 //退订 blogger.removeSubscriber(mm.show); blogger.recommend(456); //调用发布 //另外一个对象的订阅 user.addSubscriber(mm.show); user.vote(789); //调用发布 比较重要的是上面那个make函数 ,将对象扩充。赋予了参数对象职能。 ----------------------------------------------------------- jQuery 版本: (function ($) { var o = $({}); $.subscribe = function () { o.on.apply(o, arguments); }; $.unsubscribe = function () { o.off.apply(o, arguments); }; $.publish = function () { o.trigger.apply(o, arguments); }; } (jQuery)); 调用方法比上面3个版本都简单: //回调函数 function handle(e, a, b, c) { // `e`是事件对象,不需要关注 console.log(a + b + c); }; //订阅 $.subscribe("/some/topic", handle); //发布 $.publish("/some/topic", ["a", "b", "c"]); // 输出abc $.unsubscribe("/some/topic", handle); // 退订 //订阅 $.subscribe("/some/topic", function (e, a, b, c) { console.log(a + b + c); }); $.publish("/some/topic", ["a", "b", "c"]); // 输出abc //退订(退订使用的是/some/topic名称,而不是回调函数哦,和版本一的例子不一样 $.unsubscribe("/some/topic");
我是发布者 你是订阅者。。 我是主动, 你是被动。 一切都是我主动来做事情。。
相关文章推荐
- JavaScript-观察者模式(publish/subscribe)
- 翻译:观察者模式—使用JavaScript实现
- Javascript 模式实例 观察者模式
- JavaScript观察者模式(经典)
- 以【猫叫、老鼠跑、主人醒】为例子,使用 javascript 来实现 观察者模式 (有在线演示)
- 深入理解JavaScript系列(32):设计模式之观察者模式
- javascript中观察者模式
- JavaScript模式之观察者模式(Observer Pattern)
- 5. JavaScript 设计模式(观察者模式)
- javascript观察者模式
- JavaScript中IOC【Inversion of Control】模式和AOP模式、观察者模式的交融
- JavaScript观察者模式(经典)
- 轻松掌握:JavaScript观察者模式
- ruby和javascript的观察者模式
- javaScript之观察者模式
- 介绍一个款可以在javascript对象上实现观察者模式的类库-Watch.js
- 观察者模式——JavaScript
- javascript 的观察者模式的原理和集线器
- 深入理解JavaScript系列(32):设计模式之观察者模式