理解并实现PubSub模式

假如我们正在构建一个类似于 Google Docs 的应用程序，当用户按下一个按键时，需要做的事情有很多： 新字符显示到屏幕上；插入点向后移动；将本次动作加入到撤销的历史记录中； 保持与服务器同步；拼写错误检查；统计字数和页数等等。

按照传统的做法，假如我们监听 keypress 事件，并在一个处理中完成所有的任务，这想想都觉得可怕了。 那么有没有什么方法可以更好的解决这个问题，答案就是分布式事件。

PubSub 模式，是 Publish/Subscribe 的缩写，意为“发布/订阅”模式。

在实际使用中，我们应该也会接触到 PubSub 模式，例如 Nodejs 中的 EventEmitter、Backbone 中的事件模型、以及 jQuery 中的事件。 以 EventEmitter 为栗子，它提供了 addListener(event, listener)，removeListener(event, listener)，emit(event, [arg1], [arg2], [...]) 方法。

var emitter = new EventEmitter(),
    fn1 = function(value) {
        console.log('fn1:', value); }, fn2 = function(value) { console.log('fn2:', value); }; emitter.addListener('message', fn1); emitter.addListener('message', fn2); emitter.emit('message', 'test1'); emitter.removeListener('message', fn2); emitter.emit('message', 'test2'); //fn1: test1 //fn2: test1 //fn1: test2 

当调用 emit 方法时，会触发所有监听的事件。

就像上面说的，PubSub 其实很简单，现在我们来实现属于我们自己的 PubSub 对象。

首先创建 PubSub 类，增加 handlers 变量用于保存事件列表：

function PubSub() {
    this.handlers = {}; } 

添加事件时，将监听器加到数组中：

PubSub.prototype.on = function(type, listener) {
    if (!(type in this.handlers)) {
        this.handlers[type] = []; } this.handlers[type].push(listener); }; 

删除事件时，移除监听器：

PubSub.prototype.off = function(type, listener) {
    var i,
        position = -1,
        list = this.handlers[type],
        length = this.handlers[type].length; for (i = 0; i < length; i++) { if (list[i] === listener) { position = i; break; } } if (position === -1) { return; } if (length === 1) { delete this.handlers[type]; } else { this.handlers[type].splice(position, 1); } }; 

触发事件，循环遍历并触发所有的事件：

PubSub.prototype.emit = function(type) {
    var args = Array.prototype.slice.call(arguments, 1),
        i,
        list = this.handlers[type], length = this.handlers[type].length; for (i = 0; i < length; i++) { list[i].apply(this, args); } }; 

测试：

var pubsub = new PubSub(),
    fn1 = function(value) {
            console.log('fn1:', value); }, fn2 = function(value) { console.log('fn2:', value); }; pubsub.on('message', fn1); pubsub.on('message', fn2); pubsub.emit('message', 'test1'); pubsub.off('message', fn2); pubsub.emit('message', 'test2'); //fn1: test1 //fn2: test1 //fn1: test2 

注：更多的实现请看 Nodejs 中的 events.js。

转自：http://www.wenzhixin.net.cn/2013/11/06/understand_pubsub