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

优点

解决多下令式编程为了依赖同一个数据而放在统一请求背景返回方法中造成方法的臃肿。
可以用订阅，推送的方式。
同一个函数可以订阅差别范例的数据
代码

1.     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;        }    };

复制代码

例子

1.     // 订阅对象    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对象内里。
工欲善其事，必先利其器。——《论语·卫灵公》

来源：https://blog.csdn.net/sunboylife/article/details/112007598
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！