<center>javascript观察者模式</center>

ゝ一世哀愁。 2021-11-17 12:12 403阅读 0赞

**观察者模式的定义**

**观察者模式它定义了对象间的一种一对多的依赖关系，**

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

与观察者模式类似的还有一个发布订阅是在中间多了一个类似于中转的层

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

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

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

**观察者模式的使用**

//  一个中介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');