龙空技术网

写一个vue $emit $on $off 观察者模式 你看不懂的typescript

小焱2018 213

前言:

眼前同学们对“netaseventhandler”都比较重视,我们都想要知道一些“netaseventhandler”的相关内容。那么小编在网摘上汇集了一些对于“netaseventhandler””的相关内容,希望各位老铁们能喜欢,兄弟们一起来了解一下吧!

export type EventType = string | symbol;// An event handler can take an optional event argument// and should not return a valueexport type Handler<T = any> = (event?: T) => void;export type WildcardHandler = (type: EventType, event?: any) => void;// An array of all currently registered event handlers for a typeexport type EventHandlerList = Array<Handler>;export type WildCardEventHandlerList = Array<WildcardHandler>;// A map of event types and their corresponding event handlers.export type EventHandlerMap = Map<EventType, EventHandlerList | WildCardEventHandlerList>;export interface Emitter {  all: EventHandlerMap;  on<T = any>(type: EventType, handler: Handler<T>): void;  on(type: '*', handler: WildcardHandler): void;  off<T = any>(type: EventType, handler: Handler<T>): void;  off(type: '*', handler: WildcardHandler): void;  emit<T = any>(type: EventType, event?: T): void;  emit(type: '*', event?: any): void;  clear(): void;}/** * Mitt: Tiny (~200b) functional event emitter / pubsub. * @name mitt * @returns {Mitt} */export default function mitt(all?: EventHandlerMap): Emitter {  all = all || new Map();  return {    /**     * A Map of event names to registered handler functions.     */    all,    /**     * Register an event handler for the given type.     * @param {string|symbol} type Type of event to listen for, or `"*"` for all events     * @param {Function} handler Function to call in response to given event     * @memberOf mitt     */    on<T = any>(type: EventType, handler: Handler<T>) {      const handlers = all?.get(type);      const added = handlers && handlers.push(handler);      if (!added) {        all?.set(type, [handler]);      }    },    /**     * Remove an event handler for the given type.     * @param {string|symbol} type Type of event to unregister `handler` from, or `"*"`     * @param {Function} handler Handler function to remove     * @memberOf mitt     */    off<T = any>(type: EventType, handler: Handler<T>) {      const handlers = all?.get(type);      if (handlers) {        handlers.splice(handlers.indexOf(handler) >>> 0, 1);      }    },    /**     * Invoke all handlers for the given type.     * If present, `"*"` handlers are invoked after type-matched handlers.     *     * Note: Manually firing "*" handlers is not supported.     *     * @param {string|symbol} type The event type to invoke     * @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler     * @memberOf mitt     */    emit<T = any>(type: EventType, evt: T) {      ((all?.get(type) || []) as EventHandlerList).slice().map((handler) => {        handler(evt);      });      ((all?.get('*') || []) as WildCardEventHandlerList).slice().map((handler) => {        handler(type, evt);      });    },    /**     * Clear all     */    clear() {      this.all.clear();    },  };}

使用:

const rootMenuEmitter = mitt();rootMenuEmitter.emit('on-update-opened', openedNames.value);rootMenuEmitter.on('on-menu-item-select', (name: string) => {   currentActiveName.value = name;   nextTick(() => {      props.collapse && removeAll();   });   emit('select', name);});rootMenuEmitter.on('open-name-change', ({ name, opened }) => {    if (opened && !openedNames.value.includes(name)) {         openedNames.value.push(name);    } else if (!opened) {         const index = openedNames.value.findIndex((item) => item === name);         index !== -1 && openedNames.value.splice(index, 1);    }});

使用2

const subMenuEmitter = mitt();rootMenuEmitter.emit('on-update-opened', {            opend: false,            parent: instance?.parent,            uidList: uidList, });rootMenuEmitter.emit('open-name-change', {            name: props.name,            opened: !opened, });subMenuEmitter.emit('submenu:mouse-enter-child');subMenuEmitter.on('submenu:mouse-enter-child', () => {  data.mouseInChild = true;  isRemoveAllPopup.value = false;  clearTimeout(data.timeout!);});subMenuEmitter.on('submenu:mouse-leave-child', () => {  if (data.isChild) return;  data.mouseInChild = false;  clearTimeout(data.timeout!);});

标签: #netaseventhandler