实现观察者模式－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);
    }
};

来源于：阿贤博客