javascript sub/pub

javascript

二维码

参考资料

1. 发布/订阅：http://zh.wikipedia.org/wiki/%E5%8F%91%E5%B8%83/%E8%AE%A2%E9%98%85
2. 自定义事件一： https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
3. 自定义事件二： 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