實現觀察者模式－observer

來源於：阿賢博客

observer 觀察者模式

咱們在平常開發使用常常遇到一些場景須要使用到觀察者模式，好比登陸成功須要改動同步頁面多個模塊的信息，這時最佳選擇是使用observer 觀察者模式。
又是一個難忘清明節，這一次在大巴上過節了，只能在大巴上寫做咯，從昨晚9點30分在廣州省汽車站出發到如今中午12點30分還未到。歷經了15個小時還未到家，不是老家路途太遙遠，而是中國人有錢的人家太多了，致使一路堵車。想必不少小夥伴都有一樣的感覺吧，不過還差1個多小時就到家了。

class Apm {
    constructor(){
        //觀察者模式
        this.observer = {
            //訂閱
            addSubscriber: function (callback, opt) {
                this.subscribers[this.subscribers.length] = {
                    callback: callback,
                    opt: (opt !== 'undefined') ? opt : {}
                };
            },
            //退訂
            removeSubscriber: function (callback) {
                for (var i = 0; i < this.subscribers.length; i++) {
                    if (this.subscribers[i].callback === callback) {
                        delete (this.subscribers[i]);
                    }
                }
            },
            //發佈
            publish: function (what, _observer) {
                for (var i = 0; i < this.subscribers.length; i++) {
                    if (typeof this.subscribers[i].callback === 'function') {
                        
                        let observer = (_observer !== 'undefined') ? _observer : {};
                        // 執行註冊的各類回調
                        this.subscribers[i].callback({ret: what, opt: this.subscribers[i].opt, observer: observer});
                    }
                }
            },
            // 將對象o具備觀察者功能
            make: function (o) { 
                for (var i in this) {
                    o[i] = this[i];
                    o.subscribers = [];
                }
            }
        };
        this.observerLogin = {
            success: function (ret) {
                this.publish(ret, {type: 'success'});
            },
            error: function(ret){
                this.publish(ret, {type: 'error'});
            }
        };
        // 建立觀察者模式
        this.observer.make(this.observerLogin);
    }
    login() {
        fetch({}).then((res)=>{
            if(res.code == 0){
                //發佈登陸成功
                this.observerLogin.success(ret);
            }else{
                //發佈登陸失敗
                this.observerLogin.error (ret);
            }
            
        })
    }
}
var apm = new Apm;

//業務邏輯
var Main = {
    init: function(){
        var _ts = this;
        //監聽登陸成功時觸發數據
        apm.observerLogin.addSubscriber(function(params){
            /*params = {
                ret: ret,//接口數據
                opt: opt, //方法傳參
                observer: { //觀察者數據
                    type: 'success'
                }
            };*/
        }, {_ts: _ts});
        
        /**** 觀察者模式 ****/
        var testPage = {
            comment: function (data) {
                console.log('評論功能的做者名字：' + data['name'], data['msg']);
                // for(var key in data){
                //     console.log('key', key, data[key]);
                // }
            },
            video: function (data){
                console.log('視頻做者bid：' + data['bid'], data['msg']);
            }
        };

        //先註冊登陸觀察
        apm.observerLogin.addSubscriber(testPage.comment);
        apm.observerLogin.removeSubscriber(testPage.video);
    }
};

來源於：阿賢博客