请选择 进入手机版 | 继续访问电脑版

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

[复制链接]
来自北方 发表于 2021-1-1 17:46:27 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
优点

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

  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
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )