js设计模式笔记 – 观察者模式


观察者模式,定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。
事实上,只要你曾经在DOM节点上绑定过事件函数,那么你就曾经使用过观察者模式了!

document.body.addEventListener('click', function () {
    alert(2);
});

但是这只是对观察者模式最简单的使用,在很多场景下我们经常会实现一些自定义事件来满足我们的需求。

举个例子:

你去一家公司应聘,谈了一顿下来,hr跟你说:"好了,你回去等通知吧!"。
这个时候,1.你会问公司的电话,然后每天打过去问一遍结果
          2.把自己的手机号留给hr,然后等他给你打电话
          
相信很多时候呢,大家都是选择了后者。
万一你每天给hr打电话弄烦他了,或许他本来打算招你的,现在也不再打算再鸟你啦!

那么这个时候,hr就相当于一个发布者,而你就是一个订阅者啦!

好吧,大部分叫你回去等消息的就等于没救啦......
我还遇到过一个如果你没被录取,就连通知都不通知你的公司!

那么一个简单的观察者模式应该怎么实现呢?

  1. 要指定一个发布者;

  2. 给发布者添加一个缓存列表,用于存放回调函数以便通知订阅者;(这家公司很多人来应聘)

  3. 最后发布消息的时候,发布者会遍历这个缓存列表,依次触发里面存放的订阅者回调函数;(你up or 你over)

var event = {};    //发布者(hr)
event.clietList = []; //发布者的缓存列表(应聘者列表)

event.listen = function(fn) { //增加订阅者函数
    this.clietList.push(fn);
};

event.trigger = function() { //发布消息函数
    for (var i = 0; i < this.clietList.length; i++) {
        var fn = this.clietList[i];
        fn.apply(this, arguments);
    }
};

event.listen(function(time) { //某人订阅了这个消息
    console.log('正式上班时间:' + time);
});

event.trigger('2016/10',yes); //发布消息
//输出 正式上班时间:2016/10  

到这里,我们已经实现了一个最简单的观察者模式了!

但是上面的函数其实存在一个问题,那就是发布者没办法选择自己要发布的消息类型!
比如这家公司同时在招php,web前端,如果使用上面的函数就没办法区分职位了!只能一次性把全部订阅者都发送一遍消息。
对上面的代码进行改写:

var event = {}; //发布者(hr)
event.clietList = []; //发布者的缓存列表(应聘者列表)

event.listen = function(key, fn) { //增加订阅者函数
    if (!this.clietList[key]) {
        this.clietList[key] = [];
    }
    this.clietList[key].push(fn);
};

event.trigger = function() { //发布消息函数
    var key = Array.prototype.shift.call(arguments),
        fns = this.clietList[key];
    for (var i = 0; i < fns.length; i++) {
        var fn = fns[i];
        fn.apply(this, arguments);
    }
};

event.listen('web前端', fn1 = function(time) { //小强订阅了这个消息。
    console.log('姓名:小强');
    console.log('正式上班时间:' + time);
});

event.listen('web前端', fn2 = function(time) { //大大强订阅了这个消息
    console.log('姓名:大大强');
    console.log('正式上班时间:' + time);
});

//发布者发布消息
event.trigger('web前端','小强', '2016/10'); //姓名:小强   正式上班时间:2016/10  
event.trigger('php','大大强', '2016/15'); //姓名:大大强   正式上班时间:2016/15   

通过添加了一个key,我们实现了对职位的判断。

有了订阅事件,我们怎么能少了取消订阅事件呢?

event.remove = function(key, fn) {
    var fns = this.clietList[key];
    if (!fns) {
        return false;
    }
    if (!fn) { //如果没有传入fn回调函数,直接取消key对应消息的所有订阅
        this.clietList[key] = [];
    } else {
        for (var i = 0; i < fns.length; i++) { //遍历回调函数列表
            var _fn = fns[i];
            if (_fn === fn) {
                fns.splice(i, 1); //删除订阅者的回调函数
            }
        }
    }
};
//这时候必须指定回调函数,否则无法在remove函数中进行对比删除。
event.listen('web前端', fn1 = function(time) { //小强订阅了这个消息。
    console.log('姓名:小强');
    console.log('正式上班时间:' + time);
});

event.listen('web前端', fn2 = function(time) { //大大强订阅了这个消息
    console.log('姓名:大大强');
    console.log('正式上班时间:' + time);
});

event.remove('web前端',fn1);

//发布者发布消息
event.trigger('web前端','2016/10');

//输出 姓名:大大强   正式上班时间:2016/10 

对上面代码进行改进,创建一个全局对象来实现观察者模式,
使用闭包实现私有变量,仅暴露必须的API给使用者:

var event = (function() {
    var clietList = []; //发布者的缓存列表(应聘者列表)

    var listen = function(key, fn) { //增加订阅者函数
        if (!this.clietList[key]) {
            this.clietList[key] = [];
        }
        this.clietList[key].push(fn);
    };

    var trigger = function() { //发布消息函数
        var key = Array.prototype.shift.call(arguments),
            fns = this.clietList[key];
        for (var i = 0; i < fns.length; i++) {
            var fn = fns[i];
            fn.apply(this, arguments);
        }
    };

    var remove = function(key, fn) {
        var fns = this.clietList[key];
        if (!fns) {
            return false;
        }
        if (!fn) { //如果没有传入fn回调函数,直接取消key对应消息的所有订阅
            this.clietList[key] = [];
        } else {
            for (var i = 0; i < fns.length; i++) { //遍历回调函数列表
                var _fn = fns[i];
                if (_fn === fn) {
                    fns.splice(i, 1); //删除订阅者的回调函数
                }
            }
        }
    };
    
    return{
        listen:listen,
        trigger:trigger,
        remove:remove
    }
})();

观察者模式进阶:

  1. 使用命名空间防止事件名冲突

  2. 实现先发布后订阅功能


6 responses on “js设计模式笔记 – 观察者模式

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>