javascript 发布订阅

最新推荐文章于 2025-05-03 00:15:00 发布

原创最新推荐文章于 2025-05-03 00:15:00 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

参考资料

发布/订阅：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

二维码

qrcode

前言

前端异步编程主要包括回调函数，事件监听，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)