js发布订阅模式

202 阅读1分钟

例子:把一个淘宝商家比作是发布者,买家小蓝比作是订阅者,小蓝如果喜欢店家卖的一双鞋子,这时候订阅这双鞋子,等到鞋子到货了,淘宝商家就会发布信息给小蓝,鞋子到货了 原理:订阅者去创建和插入函数,发布者去一一执行函数

var Event = (function () {
    var list = {}, // 订阅消息的缓存列表
        listen, // 订阅消息
        trigger, // 发布消息
        remove; // 取消订阅
    
    <!--订阅消息(实际上就是向缓存列表里添加函数)-->
    listen = function(key, fn) {
        if(!list[key]) {
            list[key] = [];
        } 
        list[key].push(fn);
    }
    
    <!--发布消息(实际上就是执行缓存列表里的函数)-->
    trigger = function() {
        var key = Array.prototype.shift.call(arguments); // 获取订阅消息的key
        var fns = list[key];
        if(!fns || fns.length === 0) return; // 没有订阅该消息
        for(var i = 0; i < fns.length; i++) {
            var _fn = fns[i];
            _fn.apply(this, arguments);
        }
    }
    
    <!--取消订阅(实际上就是删除缓存列表里的fn)-->
    remove = function(key, fn) {
        var fns = list[key];
        if(!fns || fns.length === 0) return; //没有订阅消息,直接返回
        if(!fn) {
            !fn && (fns.length = 0); // 如果没有传fn,全部删除
        } else {
            for(var i = 0; i < fns.length; i++) {
                var _fn = fns[i];
                if(_fn === fn) {
                    fns.splice(i, 1);
                }
            }
        }
    }
    
    return {
        listen: listen,
        trigger: trigger,
        remove: remove
    }
})()