JS-订阅推送方式获取异步数据

优点

解决多命令式编程为了依赖同一个数据而放在统一请求后台返回方法中造成方法的臃肿。
可以用订阅，推送的方式。
同一个函数可以订阅不同类型的数据

代码

    let Callbacks = function () {
        this.fns = [];
        this.add = function (elem) {
            this.fns.push(elem)
        }
        this.fire = function (params) {
            this.fns.forEach(function (item) {
                item(params)
            })
        }
        this.removeAll = function (elem) {
            let that = this
            that.fns.forEach(function (item, index) {
                if (item == elem) {
                    that.fns.splice(index, 1)
                }
            })
        }
        this.removeOne = function (elem) {
            let that = this
            try {
                that.fns.forEach(function (item, index) {
                    if (item == elem) {
                        that.fns.splice(index, 1)
                        throw new Error('为了跳出循环')
                    }
                })
            } catch (e) {}


        }
    }

    function SimpleMq() {
        this.topics = {};
        this.Topic = function (id) {
            var callbacks,
                method,
                topic = id && this.topics[id];

            if (!topic) {
                callbacks = new Callbacks();
                topic = {
                    publish: function (params) {
                        callbacks.fire(params)
                    },
                    subscribe: function (fn) {
                        callbacks.add(fn)
                    },
                    unsubscribe: function (fn) {
                        callbacks.removeAll(fn)
                    }
                };
                if (id) {
                    this.topics[id] = topic;
                }
            }
            return topic;
        }
    };

例子

    // 订阅对象
    let simpleMq= new SimpleMq();

    //用户A
    function a(params) {
        console.log("我是用户A，订阅数据类型Ajax1，收到推送的值：" + params)
    }

    //用户B
    function b(params) {
        console.log("我是用户B，订阅类型Ajax1，收到推送的值：" + params)
    }

    //用户C
    function c(params) {
        console.log("我是用户C，订阅类型Ajax2，收到推送的值：" + params)
    }
    //用户D
    function d(params) {
        console.log("我是用户D，订阅类型Ajax2，收到推送的值：" + params)
    }
    //用户E
    function e(params) {
        console.log("我是用户E，订阅类型Ajax1，Ajax2，收到推送的值：" + params)
    }

    //注册订阅
    simpleMq.Topic("Ajax1").subscribe(a);
    simpleMq.Topic("Ajax1").subscribe(b);

    simpleMq.Topic("Ajax2").subscribe(c);
    simpleMq.Topic("Ajax2").subscribe(d);

    //多订阅
    simpleMq.Topic("Ajax1").subscribe(e);
    simpleMq.Topic("Ajax2").subscribe(e);
    // 发布推送
    simpleMq.Topic("Ajax1").publish("ajax1_value");
    simpleMq.Topic("Ajax2").publish("ajax2_value");
    console.log("用户E取消订阅Ajax1")
    // 取消订阅
    simpleMq.Topic("Ajax1").unsubscribe(e)
    // 发布推送
    simpleMq.Topic("Ajax1").publish("ajax1_value");
    simpleMq.Topic("Ajax2").publish("ajax2_value");

效果

其他想法

如果你想被不同js都能操作，可以把Mq实例放在localstorage对象里面。

工欲善其事，必先利其器。——《论语·卫灵公》