javascript 发布订阅

The question 发布于2019-08-21 10:18 / 1827人阅读

摘要：参考资料发布订阅自定义事件一自定义事件二二维码前言前端异步编程主要包括回调函数，事件监听，。在前端异步编程的基础上，能够实现发布订阅消息范式。消息的发送者发布者不是计划发送其消息给特定的接收者订阅者。最终作为模块发布联系方式电子邮箱

参考资料

发布/订阅：http://zh.wikipedia.org/wiki/%E5%8F%91%E5%B8%83/%E8%AE%A2%E9%98%85

自定义事件一： https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent

自定义事件二： https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent

二维码

前言

前端异步编程主要包括回调函数，事件监听，promise/defer。

在前端异步编程的基础上，能够实现发布/订阅（Publish/subscribe）消息范式。消息的发送者（发布者）不是计划发送其消息给特定的接收者（订阅者）。订阅者对一个或多个类别表达兴趣，于是只接收感兴趣的消息，而不需要知道什么样的发布者发布的消息。这种发布者和订阅者的解耦可以允许更好的可扩展性和更为动态的网络拓扑.

根据发布/订阅模式介绍，与Event loop高度相似，遂选择基于DOM事件实现。

如有兴趣，请加入共同coding，共同成长https://github.com/bornkiller/subscriber.git

代码实现

定义发布/订阅构造函数

    function SourceCribe () {
        // 生成发布/订阅器DOM节点
        var body = document.querySelector("body");
        if (!document.querySelector(".magazine")) {
            var element = document.createElement("mark");
            element.setAttribute("class", "magazine");
            body.appendChild(element);
        }
        this.magazine = document.querySelector(".magazine");

        // 消息发布实现
        this.publish = function (source, data) {
            if (!typeof source === "string") {
                return false;
            }
            var oEvent = new CustomEvent(source, {
                bubbles: true,
                cancelable: false,
                detail:data
            });
            this.magazine.dispatchEvent(oEvent);
        };

        // 订阅实现，handler需要使用显式声明函数，不要使用匿名函数
        this.subscribe = function (source, handler) {
            if(!typeof source === "string" || !typeof value === "function") {
                return false;
            }

            this.magazine.addEventListener(source, handler, false);
        };

        // 取消订阅
        this.unsubcribe = function (source, handler) {
            if(!typeof source === "string" || !typeof value === "function") {
                return false;
            }

            this.magazine.removeEventListener(source, handler, false);
        };
    }

实际调用

(function(window){
    window.addEventListener("load",function(evt){

        var sourceCribe = new SourceCribe();

        var loveHandlerAlways = function (evt) {
            console.log("always " + evt.detail);
        };
        var loveHandlerEver = function (evt) {
            console.log("ever " + evt.detail);
        };

        sourceCribe.subscribe("love", loveHandlerAlways);
        sourceCribe.subscribe("love", loveHandlerEver);

        sourceCribe.publish("love","500 days with summer");

        sourceCribe.unsubcribe("love", loveHandlerAlways);
        sourceCribe.publish("love","500 days with summer");
    });

})(window)

后续

处理好兼容性，特别是IE10-全线。

当前为基于主题的实现，会引入基于内容，实现混合发布/订阅。

最终作为AMD模块发布

联系方式

QQ/电子邮箱: 491229492

云服务器 GPU云服务器发布订阅模式订阅发布模式 sqlserver发布订阅 DTS 订阅发布模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85278.html

JavaScript 发布-订阅模式

摘要：发布订阅模式订阅者把自己想订阅的事件注册到调度中心，当发布者发布该事件到调度中心，也就是该事件触发时，由调度中心统一调度订阅者注册到调度中心的处理代码。发布-订阅模式，看似陌生，其实不然。工作中经常会用到，例如 Node.js EventEmitter 中的 on 和 emit 方法；Vue 中的 $on 和 $emit 方法。他们都使用了发布-订阅模式，让开发变得更加高效方便。一...

13651657101 2019-08-26 13:53 评论0 收藏0
JavaScript设计模式之发布-订阅模式（观察者模式）-Part1

摘要：设计模式与开发实践读书笔记。发布订阅模式又叫观察者模式，它定义了对象之间的一种一对多的依赖关系。附设计模式之发布订阅模式观察者模式数据结构和算法系列栈队列优先队列循环队列设计模式系列设计模式之策略模式《JavaScript设计模式与开发实践》读书笔记。发布-订阅模式又叫观察者模式，它定义了对象之间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。例...

muzhuyu 2019-08-20 12:06 评论0 收藏0
JavaScript设计模式之发布-订阅模式（观察者模式）-Part2

摘要：设计模式与开发实践读书笔记。看此文章前，建议先看设计模式之发布订阅模式观察者模式在中，已经介绍了什么是发布订阅模式，同时，也实现了发布订阅模式。《JavaScript设计模式与开发实践》读书笔记。看此文章前，建议先看JavaScript设计模式之发布-订阅模式（观察者模式）-Part1 在Part1中，已经介绍了什么是发布-订阅模式，同时，也实现了发布-订阅模式。但是，就Part1...

Charlie_Jade 2019-08-20 13:45 评论0 收藏0
JavaScript设计模式之发布-订阅模式（观察者模式）-Part2

摘要：设计模式与开发实践读书笔记。看此文章前，建议先看设计模式之发布订阅模式观察者模式在中，已经介绍了什么是发布订阅模式，同时，也实现了发布订阅模式。《JavaScript设计模式与开发实践》读书笔记。看此文章前，建议先看JavaScript设计模式之发布-订阅模式（观察者模式）-Part1 在Part1中，已经介绍了什么是发布-订阅模式，同时，也实现了发布-订阅模式。但是，就Part1...

chemzqm 2019-08-01 16:12 评论0 收藏0