简易的发布订阅模式


  • 购买者订阅是否有库存商品
let storeObj = {}; // 定义发布者
storeObj.list = []; // 缓存列表,存放订阅的回调函数

// 添加订阅者
storeObj.listen = function(key, fn) {
    // 此时this指向storeObj
    if(!this.list[key]){
        this.list[key] = [];
    }
    this.list[key].push(fn)
}

// 发布消息
storeObj.trigger = function(){
    // arguments为类数组
    // shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值
    let key = Array.prototype.shift.call(arguments)
    console.log(key)
    let fns = this.list[key]
    if(!fns || fns.length <= 0){
        return;
    }
    for(let i = 0, fn; fn= fns[i++];){
        // fn.apply(this, arguments)
        fn(...arguments)
    }
}

// 订阅
storeObj.listen('小明',function(size){
    console.log(`您订阅的尺码:${size},有库存了`)
})
storeObj.listen('小张',function(name,size){
    console.log(`您订阅的尺码:${size},有库存了`)
})

// 取消订阅
storeObj.remove = function(key,fn){
    let fns = this.list[key];
    if(!fns){
        return false;
    }
    if(!fn){
        fn && (fns.length = 0);
    }else {
        for(var i = fns.length-1;i>=0;i--){
            var _fn = fns[i];
            if(_fn == fn){
                fns.splice(i,1);
            }
        }
    }
}

storeObj.trigger("小明",34)
storeObj.trigger("小张",28)
  • 封装
let Event = (function(){
    let list = {},
        listen,
        trigger,
        remove;
    listen = function(key, fn) {
        if(!list[key]){
            list[key] = [];
        }
        list[key].push(fn)
    }
    trigger = function(){
        let key = Array.prototype.shift.call(arguments)
        console.log(key)
        let fns = list[key]
        if(!fns || fns.length <= 0){
            return;
        }
        for(let i = 0, fn; fn= fns[i++];){
            // fn.apply(this, arguments)
            fn(...arguments)
        }
    }
    remove = function(key,fn){
        let fns = list[key];
        if(!fns){
            return false;
        }
        if(!fn){
            fn && (fns.length = 0);
        }else {
            for(var i = fns.length-1;i>=0;i--){
                var _fn = fns[i];
                if(_fn == fn){
                    fns.splice(i,1);
                }
            }
        }
    }
})();

  目录