完成观察者形式-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);
    }
};

来源于:阿贤博客

    原文作者:chenwenxian
    原文地址: https://segmentfault.com/a/1190000018771400
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞