手撕发布-订阅模式

简述

发布-订阅模式将订阅者和发布者解耦，订阅者不用一直“询问”发布者事件是否发生，而是由发布者自由决定向订阅者发送通知。

实现

以购物为例，买家需要向卖家购买一件商品，但是库存已经没有了，买家想要知道什么时候有货，那么买家需要隔一段时间就去问卖家有没有货，如果采用了发布-订阅模式，买家只需要将联系方式留给卖家，当卖家进货时，有卖家统一通知买家，从而减少查询次数。

初步实现

代码

class Shop {
    constructor() {
        this.repository = {};
    }
    // 订阅
    $on(goods, callback) {
        if (!this.repository[goods]) {
            this.repository[goods] = [];
        }
        this.repository[goods].push(callback);
    }
    // 发布
    $emit(goods) {
        if (this.repository[goods] && this.repository[goods].length) {
            this.repository[goods].forEach((cb) => cb(goods));
        } else {
            console.log('该商品没有客户订阅');
        }
    }
    // 取消订阅
    $removeSubscribe(goods, callback) {
        if (this.repository[goods]) {
            this.repository[goods] = this.repository[goods].filter(
                (cb) => cb != callback
            );
            console.log('取消订阅成功');
        }
    }
    // 一次性订阅
    $once(goods, callback) {
        let fn = (goods) => {
            callback(goods);
            this.$removeSubscribe(goods, fn);
        };
        this.$on(goods, fn);
    }
}

var shop = new Shop();
shop.$on('电脑', function(goods) {
    console.log(`${goods}货到啦！`);
});

shop.$once('鼠标', function(goods) {
    console.log(`${goods}货到啦！`);
});

shop.$emit('电脑');
shop.$emit('鼠标');
shop.$emit('鼠标');

输出

电脑货到啦！
鼠标货到啦！
取消订阅成功
该商品没有客户订阅

这里只是初步实现，还有很多地方需要完善。

实现订阅一组事件

只需要修改$on函数即可

$on(goods, callback) {
    if(Array.isArray(goods)) {
        goods.forEach(goodsName => {
            this._push(goodsName, callback);
        })
    } else {
        this._push(goods, callback);
    }
}

_push(goods, callback) {
	if (!this.repository[goods]) {
		this.repository[goods] = [];
	}
	this.repository[goods].push(callback);
}