javascript觀察者模式

觀察者模式的定義app

觀察者模式它定義了對象間的一種一對多的依賴關係,this

只要當一個對象的狀態發生改變時,全部依賴於它的對象都獲得通知並被自動更新spa

與觀察者模式相似的還有一個發佈訂閱是在中間多了一個相似於中轉的層prototype

觀察者模式中有觀察者和被觀察者兩個角色,舉個栗子,好比租房子,你(觀察者)想租某個地方的房子(被觀察者),code

你去找了中介並留下了手機號(訂閱)可是中介告訴你房源緊張,沒有房子了,若是有了房子  他就會通知你(發佈),對象

若是你有了房子,她就不會再聯繫你了(取消訂閱),這就是一個生活中的觀察者模式blog

觀察者模式的使用io

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

打印結果console

相關文章
相關標籤/搜索