javascript设计模式---发布订阅模式

Posted 2021-07-07 哈娄

发布订阅模式

• 订阅方对这个对象发起一个订阅的需求，当这个对象变化时，第三方会告诉订阅方，触发函数逻辑 -----主动权在第三方。（这也就是和观察者的区别）

大体思路：

• 声明 添加订阅方法，取消订阅方法，触发订阅队列方法
• 订阅方法负责观察事件名，对应触发的逻辑
• 取消订阅方法负责 取消某个事件名的某个逻辑或者取消整个事件的观察
• 触发订阅队列负责遍历执行队列中的方法

class Observer {
    constructor() {
        this.message = {} // 管理订阅队列
    }
    // 向消息队列中添加订阅内容
    on(type, fn) {
        if (!this.message[type]) {
            this.message[type] = []
        }
        this.message[type].push(fn)
    },
    // 取消订阅消息队列中的内容
    off(type, fn) {
        // 取消监听事件
        if (!fn) {
            delete this.message[type]
        }
        if (!this.message[type]) return
        this.message[type] = this.message[type].filter(item => item!==fn)
    }
    // 触发消息队列
    trigger(type) {
        if (!this.message[type]) return
        this.message[type].forEach(item => item())
    }
}

let person = new observer()

// 订阅test1，出现触发test1Fn逻辑
// 订阅test2，出现触发test2Fn逻辑
person.on('test1', test1Fn)
person.on('test2', test2Fn)

// 取消订阅test1事件的test2Fn逻辑
person.off('test2', test2Fn)

function test1Fn() {
    console.log('我是test1逻辑')
}
function test2Fn() {
    console.log('我是test2逻辑')
}