JavaScript设计模式——订阅者-发布者模式简单实现

一、什么是发布者-订阅者模式

订阅者把自己想订阅的事件注册到调度中心,当发布者发布该事件到调度中心,就是该事件触发时,由调度中心统一调度订阅者注册到调度中心的处理代码。
基本思想就是内部保存了一个对象存储订阅的函数,调用者通过名字来触发函数,订阅多个就按照队列的形式触发。

二、发布者-订阅者模式实现

//发布订阅模式
class EventEmitter {
    constructor() {
            //事件对象,用来存放订阅的名字和事件
            this.events = {};
        }
        //存放订阅事件的方法
    on(eventName, callback) {
            if (!this.events[eventName]) {
                //一个名字可以订阅多个事件,所以使用数组
                this.events[eventName] = [callback]
            } else {
                //存在则push到数组的尾部
                this.events[eventName].push(callback)
            }
        }
        //触发事件的方法
    emit(eventName) {
            //遍历执行所有订阅的事件
            this.events[eventName] && this.events[eventName].forEach(cb => cb())
        }
        //移除订阅事件的方法
    removeListener(eventName, callback) {
            if (this.events[eventName]) {
                this.events[eventName] = this.events[eventName].filter(cb => cb != callback)
            }
        }
        //只执行一次订阅的事件,执行完就移除
    once(eventName, callback) {
        let fn = () => {
                callback();
                //执行一次之后就移除
                this.removeListener(eventName, fn)
            }
            //存放到事件对象中
        this.on(eventName, fn);
    }
}
//测试实例
let em = new EventEmitter();
let workday = 0;
em.on("work", function() {
    workday++;
    console.log("work everyday");
})
em.once("love", function() {
    console.log("just love you");
})

function makeMoney() {
    console.log("make one million money");
}
em.on("money", makeMoney)
let time = setInterval(() => {
    em.emit("work");
    em.removeListener("money", makeMoney)
    em.emit("money")
    em.emit("love")
    if (workday == 5) {
        console.log("have a rest");
        clearInterval(time)
    }
}, 1);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值