JS里对观察者模式的实现是通过回调来实现的,我们来先定义一个pubsub对象,其内部包含了3个方法:订阅、退订、发布。
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));
使用方式如下:
//来,订阅一个 pubsub.subscribe('example1', function (topics, data) { console.log(topics + ": " + data); }); //发布通知 pubsub.publish('example1', 'hello world!'); pubsub.publish('example1', ['test', 'a', 'b', 'c']); pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello'}]);
怎么样?用起来是不是很爽?但是这种方式有个问题,就是没办法退订订阅,要退订的话必须指定退订的名称,所以我们再来一个版本:
//将订阅赋值给一个变量,以便退订 var testSubscription = pubsub.subscribe('example1', function (topics, data) { console.log(topics + ": " + data); }); //发布通知 pubsub.publish('example1', 'hello world!'); pubsub.publish('example1', ['test', 'a', 'b', 'c']); pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello'}]); //退订 setTimeout(function () { pubsub.unsubscribe(testSubscription); }, 0); //再发布一次,验证一下是否还能够输出信息 pubsub.publish('example1', 'hello again! (this will fail)');
根据jQuery1.7版新增的on/off功能,我们也可以定义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");