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

观察者模式的定义

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

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

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

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

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

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

观察者模式的使用

   //  一个中介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');
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值