简单的写一个发布订阅器

发布-订阅模式在开发中的应用其实是很广泛的，比如大家都知道的 Vue，使用数据驱动模板的改变，将我们的双手从繁琐的 dom 操作中解放出来，稍微懂一些原理的同学们都知道，其双向数据绑定就是通过数据劫持、发布-订阅和 dom 模板编译实现的，就算不了解这个的同学，js 中的事件监听相信做前端开发的同学都写过；

其实事件监听就是一个订阅的操作，当某个事件触发的时候，对该事件监听时传入的 callback 就会被执行，这就是一个完整的发布的-订阅流程；接下来我们就来简单的写一下一个发布订阅器：

思路：

俗话说：磨刀不误砍柴工，在动手之前，缕清一下思路是有必要的，首先我们要明确这个发布订阅器的功能，其中包括

基本功能：

• 可添加订阅者
• 可触发消息通知某个订阅器执行其中的所有订阅者
• 可删除指定订阅者

升级功能：

• 可同时给多个订阅器添加订阅者
• 可删除指定订阅器中的所有订阅者
• 可指定同时删除多个订阅器或者直接清空所有订阅器
• 可添加一次性订阅（该订阅者一旦被执行，就会在订阅器中移除）
• 处理好 this 指向和实现链式调用
• 添加错误判断和提醒机制

接下来我们就分两版上代码：

基础版

/**
 * 发布订阅器构造函数
 */
var Publisher = (function() {
    function Publisher() {
        this._subs = {}; // 维护一个订阅器列表
    }
    
    /**
     * 添加订阅者
     * 若订阅者需要插入的订阅器不存在，则新创建一个
     * @param { string } type - 需要添加订阅者的订阅器名
     * @param { function } func - 订阅者
     */
    Publisher.prototype.addSub = function(type, func) {
        if(!this._subs[type]) this._subs[type] = [];
        this._subs[type].push(func);
    };
    
    /**
     * 发布通知
     * 通知指定订阅器执行其中的每个订阅者
     * @param { string } type - 需要通知其发布消息的订阅器名
     */
    Publisher.prototype.notify = function(type) {
        if(!this._subs[type]) return;
        var args = Array.prototype.slice.call(arguments, 1);
        this._subs[type].forEach(function(item) {
            item.apply(this, args);
        }, this);
    };
    
    /**
     * 删除订阅者
     * @param { string } type - 指定操作的订阅器名
     * @param { function } func - 指定需要删除的订阅者
     */
    Publisher.prototype.destory = function(type, func) {
        this._subs[type].forEach(function(item, index, array) {
            (item === func) && array.splice(index, 1);
        }, this);
    };
    
    return Publisher;
}());
复制代码

基础版就如上面的代码，以最简单的方式实现一个发布订阅器的基本功能（能订阅，并能接收消息，还能指定删除）

升级版：

/**
 * 发布订阅器构造函数
 */
var Publisher = (function() {
    function Publisher() {
        this._subs = {};
    }
    
    /**
     * 添加订阅者
     * 若订阅者需要插入的订阅器不存在，则新创建一个
     * 若传入的订阅器名为一个数组，则遍历数组内的每个订阅器添加订阅者
     * @param { string|Array<string> } type - 需要添加订阅者的订阅器名
     * @param { function } func - 订阅者
     * @returns { object } - 发布器实例，可实现链式调用
     */
    Publisher.prototype.addSub = function(type, func) {
        if(Array.isArray(type)) {
            type.forEach(function(item) {
                this.addSub(item, func);
            }, this);
        } else {
            (this._subs[type] || (this._subs[type] = [])).push(func);
        }
    
        return this;
    };
    
    /**
     * 添加单次订阅
     * 当该订阅者在被通知执行一次之后会从订阅器中移除
     * @param { string|Array<string> } type - 需要添加订阅者的订阅器名
     * @param { function } func - 订阅者
     * @returns { object } - 发布器实例，可实现链式调用
     */
    Publisher.prototype.once = function(type, func) {
        function onceAdd() {
            var args = Array.prototype.slice(arguments);
            this.destory(type, onceAdd);
            func.apply(this, args);
        }
        this.addSub(type, onceAdd);
    
        return this;
    };
    
    /**
     * 发布通知
     * 通知指定订阅器执行其中的每个订阅者
     * @param { string } type - 需要通知其发布消息的订阅器名
     * @returns { object } - 发布器实例，可实现链式调用
     */
    Publisher.prototype.notify = function(type) {
        if(this._subs[type] === void 0) throw TypeError("Can't find the " + type + " event in the Publisher");
        
        var args = Array.prototype.slice.call(arguments, 1);
        this._subs[type].forEach(function(item) {
            item.apply(this, args);
        }, this);
    
        return this;
    };
    
    /**
     * 删除订阅器/订阅者
     * 若没有传入参数直接调用方法，将清空整个订阅器列表
     * 若只传入了订阅器类型参数，没有指定删除的订阅者，则删除该订阅器
     * @param { string|Array<string> } type - 指定操作的订阅器名，可用数组传入多个需要操作的订阅器名
     * @param { function } func - 指定需要删除的订阅者
     * @return { object } - 发布器实例，可实现链式调用
     */
    Publisher.prototype.destory = function(type, func) {
        if(func && typeof func !== 'function') throw TypeError('The param "func" should be a function!');
    
        if(!arguments.length) {
            this._subs = {};
            return this;
        }
        if(Array.isArray(type)) {
            type.forEach(function(item) {
                this.destory(item, func);
            }, this);
        }
        if(!func) {
            delete this._subs[type];
        } else {
            this._subs[type].forEach(function(item, index, array) {
                (item === func) && array.splice(index, 1);
            }, this);
        }
        return this;
    };
    
    return Publisher;
}());
复制代码

以上就是一个简单的发布订阅器了，若有什么不足的地方，还望各位同学指正！

转载于:https://juejin.im/post/5b2602edf265da59aa2d879f