javascript 【设计模式】观察者模式

Posted 2021-05-04

/**
+ 观察者模式（有时又被称为发布（publish ）-订阅（Subscribe）模式、模型-视图（View）模式、源-收听者(Listener)模式或从属者模式）是软件设计模式的一种。在此种模式中，一个目标物件管理所有相依于它的观察者物件，并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实现事件处理系统。
+ 
+ 学习参考：
+ https://scriptoj.com/topic/48/36-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-eventemitter/44
+ https://github.com/nioteam/jquery-plugins/issues/5
**/

class EventEmiter {

    constructor() {

        this.events = [];
    }

	// 监听 eventName 事件，事件触发的时候调用 fn 函数。
    on(eventName, fn) {

        const callback = this.events[eventName] || [];
        callback.push(fn);
        this.events[eventName] = callback;
    }

	// 触发 eventName 事件，并且把参数 arg1, arg2, arg3... 传给事件处理函数
    emit(eventName, ...args) {

        if (this.events.hasOwnProperty(eventName)) {
            const callbacks = this.events[eventName];
            callbacks.map((f)=>{
              f(...args)
            })
        }
    }

	//停止监听某个事件
    off(eventName, fn) {

        if (this.events.hasOwnProperty(eventName)) {
            const callbacks = this.events[eventName];
            if (callbacks.includes(fn)) {
                let index = callbacks.indexof(fn);
                callbacks.splice(index, 1);
            }
        }
    }

}

const obj = new EventEmiter();
obj.on('Print',function(rs){
	console.log(rs); // Hello World!!
});

obj.emit('Print','Hello World!!');