Loading

面试题: 手写一个发布订阅者?

let subscrbe = Subscibe("click")
subscrbe.$emit(1, 2, 3, 4, 5)
subscrbe.$on(funtion(){})
subscrbe.$on(funtion(){})
subscrbe.$on(funtion(){})
subscrbe.$on(funtion(){})
class Subscibe {
	static state = {
		eventList:{
			click:{
				type: "click", 
				count: 0,
				callbackList: []
			},
			keyup:{
				type: "keyup", 
				count: 0,
				callbackList: []
			},
			keydown:{
				type: "keydown", 
				count: 0 ,
				callbackSet: new Set()
			}
		},
	}
	constructor(eventType: string){
		/**
		 * @param {string} [eventType] 类型
		 * @return {undefined}
		 * */
		let eT = this.state.eventList[eventType]
		if(!eT) this.state.eventList[eventType] = {
			type: eventType,
			count: 0,
			callbackSet: new Set()
		}
		this._eventType = eT
	}
	// 监听
	$on(callback:function){
		this._eventType.callbackSet && this.eventType.callbackSet.add(callback)
	}
	// 触发
	$emit(...args:any){
		/**
		 * @param {any} [args] 所有的参数
		 * @return {undefined}
		 * */
		 this._eventType.callbackSet.forEach(fn => fn(...args))
	}
	// 取消监听
	$off(eventType: string, callback: function){
		this.state.eventList[eventType] && this.state.eventList[eventType].callbackSet.delete(callback)
	}
	// 只触发一次
	$once(eventType: string, callback: function){
		// 只发给观察者一次。
	}
	// 清楚所有的观察者。
	$clear(eventType: string, callback: function){
		this.state.eventList[eventType] && this.state.eventList[eventType].callbackSet.clear()
	}
}
posted @ 2022-02-14 16:17  guxuanyan  阅读(44)  评论(0)    收藏  举报