javascript观察者模式

佚名 6年前 (2019-04-21) 随笔 1191人围观抢沙发百度已收录

观察者模式的定义

观察者模式通常又被称为发布-订阅者模式，它定义了对象间的一种一对多的依赖关系，

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

只要当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新，之前在别人的博客上

说法各不相同，有人认为他们是两种，但是我个人结合VUE来看的话我认为观察者包含发布订阅，

发布订阅是在中间多了一个类似于中转的层

观察者模式中有观察者和被观察者两个角色，举个栗子，比如租房子，你（观察者）想租某个地方的房子（被观察者），

你去找了中介并留下了手机号（订阅）但是中介告诉你房源紧张，没有房子了，如果有了房子他就会通知你（发布），

如果你有了房子，她就不会再联系你了（取消订阅），这就是一个生活中的观察者模式

观察者模式的使用

        //  一个中介class
        class Mediation {
            constructor(){
                // 订阅人电话列表
                this.peoplePhoneList = {}
            }        
            // 留手机号 订阅
            addPhone(key, fn) { 
                if (!this.peoplePhoneList[key]) {
                    // 这个人之前是否登记过手机号
                    this.peoplePhoneList[key] = []; 
                }
                // 把适合他的房子信息存起来
                this.peoplePhoneList[key].push(fn); 
            };
            // 打电话 发布
            callPhone() { 
                // 根据电话号码 找到这个人
                var key = Array.prototype.shift.call(arguments); 
                let msg = this.peoplePhoneList[key];

                if (!msg || msg.length === 0) {
                    return false; 
                }
                for (var i = 0; i < msg.length; i++) {
                    // 把这个人合适的房子信息告诉他
                    msg[i].apply(this, arguments); 
                }
            };
            // 找到房子 取消订阅
            noLike(key, fn) { 
                // 按电话找到这个人
                var msg = this.peoplePhoneList[key];
                if (!msg) {
                    return false; 
                }
                if (!fn) {
                    // 取消这个人的信息
                    delete this.peoplePhoneList[key]; 
                } else {
                    //   取消掉他不喜欢的房子
                    for (var i = 0; i < msg.length; i++) {
                        if (fn === msg[i]) {
                            msg.splice(i, 1); 
                        }
                    }
                }
            };
        };
        var homeA = function (person,data) {
            console.log(person+data + ',我们找到了一个鹿港的房子');
        }
        var homeB = function (person,data) {
            console.log(person+data + ',我们找到了一个石油家园的房子');
        }
        // 中介A
        MediationA = new Mediation
        // 中介B
        MediationB = new Mediation

        // 找到A先生合适的两套房子
        MediationA.addPhone('13800138000', homeA);
        MediationA.addPhone('13800138000', homeB);
        // 找到B先生合适的两套房子
        MediationB.addPhone('15012345678', homeA);
        MediationB.addPhone('15012345678', homeB);
        // 打电话告诉他们
        MediationA.callPhone('13800138000','13800138000', '中介A');
        MediationB.callPhone('15012345678', '15012345678','中介B');

        // 中介B被pass了一个
        MediationB.noLike('15012345678',homeB)
        MediationB.callPhone('15012345678', '虽然被pass但是一点都不慌，','中介B');