设计模式之观察者(发布/订阅)模式

发布/订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系。当一个对象的状态(发布者)发生改变时,所有依赖于它的对象都将得到通知。在 JavaScript 开发中,我们一般用事件模型来替代传统的发布—订阅模式。

DOM 事件

观察者模式应该是最常用的模式之一。在很多语言里都得到大量应用。包括我们平时接触的dom事件,也是js和dom之间实现的一种观察者模式。

    document.body.addEventListener('click',function () {
        alert(111);
    },false);
    document.body.addEventListener('click',function () {
        alert(222);
    },false);
    document.body.addEventListener('click',function () {
        alert(333);
    },false);
    document.body.click();//模拟点击事件

这里我们订阅了document.body 的 click 事件,当 body 被点击的时候,他就向订阅者发布这个消息,顺序弹出111 222 333。我们也可以随意的增加和删除订阅者。总之,当消息一发布,所有的订阅者都会收到消息。

这里,手动触发事件直接用了document.body.click();但是更好的做法是IE下用 fireEvent,标准浏览器下用 dispatchEvent。

全局的发布/订阅对象

发布/订阅模式可以用一个全局的 Event 对象来实现,订阅者不需要了解消息来自哪个发布者,发布者也不知道消息会推送给哪些订阅者,Event 作为一个类似“中介者” 的角色,把订阅者和发布者联系起来。

let Event = (function () {
    let clientList = {};
    let listen;
    let trigger;
    let remove;

    listen = function (name, cb) {
        if( !clientList[name] ) {
            clientList[name] = [];
        }
        clientList[name].push(cb);
    };

    trigger = function () {
        let name = [].shift.call(arguments);
        let fns = clientList[name];
        if( !fns || fns.length == 0 ) return false;
        fns.map((item, index) => {
            item(...arguments); // 不要直接将arguments传入
        })
    };

    remove = function (name, cb) {
        let fns = clientList[name];
        if( !fns ) return false; // name对应的消息么有被人订阅
        if( !cb ) { // 没有传入cb(具体的回调函数), 表示取消 name 对应的所有订阅 
            fns && (fns.length = 0); //  不加括号会报错:ReferenceError: Invalid left-hand side in assignment
        } else {
            clientList[name] = fns.filter((item, index) => {
                return item !== cb; // filter不改变原数组 return不忘记
            })
            /*
            // 反向遍历
            for(let i = fns.length - 1; i >= 0; i--) {
                let _cb = fns[i];
                if(_cb === cb) {
                    fns.splice(i, 1);
                }
            }
            */
        }
    };

    return {
        listen: listen,
        trigger: trigger,
        remove: remove
    }

})();

let foo1 = function( num ){
    console.log('foo triggered');
}
let foo2 = function( num ){
    console.log(num);
}
Event.listen('foo', foo1);
Event.listen('foo', foo2);

Event.trigger('foo', 2);
// foo triggered
// 2

看下下面这段代码的输出,可以看到是无法取消对应的订阅信息的。就像{} === {}结果是 false一样(引用类型的特点:按地址存放)。

Event.remove('foo', function(num){console.log(num)});
Event.trigger('foo', 2); 
// let obj1 = {};
// let obj2 = {};
//obj1 === obj2 // false
//but
//obj1 === obj1 // true

正确写法:

Event.remove('foo', foo2);
Event.trigger('foo', 2);
function EventEmitter() {
    this.clientList = {};
}
// params: key 和 监听函数
EventEmitter.prototype.on = function (name, cb) {
    if(!this.clientList[name]) {
        this.clientList[name] = [];
    }
    this.clientList[name].push(cb);
}
// params: key 和 传给监听函数的参数
EventEmitter.prototype.emit = function () {
    let name = [].shift.call(arguments);
    let cbs = this.clientList[name];
    if(!cbs || cbs.length ===0) return false;
    cbs.forEach((cbs) => {
        cbs(...arguments);
    });
}
EventEmitter.prototype.remove = function (name, cb) {
    let cbs = this.clientList[name];
    if(!cbs) return false;
    if(!cb) {
        cbs && (cbs.length = 0);
    } else {
        this.clientList[name] = cbs.filter((item) => {
            return item != cb;
        });
    }
}
// 与on方法类似,但是监听函数cb是一次性的,emit触发使用后自动移除
EventEmitter.prototype.once = function (name, cb) {
    let _this = this;
    function callOnce() {
        cb(...arguments);// cb.apply(_this, arguments);
        _this.remove(name, callOnce);
    }
    this.on(name, callOnce);
}

必须先订阅再发布吗

我们所了解的发布/订阅模式,都是订阅者必须先订阅一个消息,随后才能接收到发布者发布的消息。如果把顺序反过来,发布者先发布一个消息,而在此之前并没有对象来订阅它,那么这条消息就消失在宇宙中了。

建立一个存放离线事件的堆栈,当事件发布的时候,如果此时还没有订阅者来订阅这个事件,我们暂时把发布事件的动作包裹在一个函数里,这些包装函数将被存入堆栈中,等到终于有对象来订阅此事件的时候,我们将遍历堆栈并且依次执行这些包装函数,也就是重新发布里面的事件。当然离线事件的生命周期只有一次,就像QQ的未读消息只会被重 新阅读一次,所以刚才的操作我们只能进行一次。

优缺点

  1. 优点:

发布—订阅模式的优点非常明显:

  • 时间上的解耦;
  • 对象之间的解耦。

它的应用非常广泛,既可以用在异步编程中,也可以帮助我们完成更松耦合的代码编写。发布/订阅模式还可以用来帮助实现一些别的设计模式,比如中介者模式。

从架构上来看,无论是 MVC 还是 MVVM,,都少不了发布/订阅模式的参与,而且 JavaScript 本身也是一门基于事件驱动的语言。

  1. 缺点:

当然,发布/订阅模式也不是完全没有缺点。创建订阅者本身要消耗一定的时间和内存,而且当你订阅一个消息后,也许此消息最后都未发生,但这个订阅者会始终存在于内存中。

另外,发布/订阅模式虽然可以弱化对象之间的联系,但如果过度使用的话,对象和对象之间的必要联系也将被深埋在背后,会导致程序难以跟踪维护和理解。特别是有多个发布者和订阅者嵌套到一起的时候,要跟踪一个 bug 不是件轻松的事情。

【渗透】关于Node.js的事件订阅发布原理

你可能感兴趣的:(设计模式之观察者(发布/订阅)模式)