// 可以在項目目錄utils下封裝一個event.js
import mitt from 'mitt'
const mitt = mitt()
export default mitt

// 組件 A
<script setup>
import mitt from '@/utils/event.js'
function handleChange(obj) {
    mitter.emit('search-change', obj);
}
</script>
// 組件 B 
<script setup>
import mitt from '@/utils/event.js'
import { onUnmounted ,onMounted} from 'vue'
// 監(jiān)聽
onMounted(()=>{ mitt.on('search-change',（obj)=> { do sth} })
// off 監(jiān)聽 
onUnmounted(()=>{ mitt.off('search-change', ()=> { do sth } })
</script>

export type EventType = string | symbol;
// 源碼第一段分析
export 一個類型別名 EventType，上面例子中我們mitter.emit('search-change', obj); 
search-change就是一個string類型，
同時EventType也可以是聯合類型symbol，為了保證事件的唯一性
export type Handler<T = unknown> = (event: T) => void;
export type WildcardHandler<T = Record<string, unknown>> = (
    type: keyof T,
    event: T[keyof T]
) => void;
// 源碼第二段分析
使用類型別名定義函數Handler,Handler接受一個泛型參數<T>，默認值是unknown
export type EventHandlerList<T = unknown> = Array<Handler<T>>;
export type WildCardEventHandlerList<T = Record<string, unknown>>
= Array<WildcardHandler<T>>;
// 源碼第三段分析
當前所有注冊的事件列表類型定義  Array<T>數組的泛型定義
export type EventHandlerMap<Events extends Record<EventType, unknown>>
= Map<keyof Events | '*',EventHandlerList<Events[keyof Events]> 
| WildCardEventHandlerList<Events>>;
// 源碼第四段分析
這里是事件類型及其對應的事件處理程序的映射Map做了定義，使用extend繼承一個Record對象,
該對象的兩個參數一個是限制為Events上已知的公共屬性名的聯合或者*, 
另外一個參數要是是EventHandlerList或者是WildCardEventHandlerList
export interface Emitter<Events extends Record<EventType, unknown>> {
    all: EventHandlerMap<Events>;
    on<Key extends keyof Events>(type: Key, handler: Handler<Events[Key]>)
    : void;
    on(type: '*', handler: WildcardHandler<Events>):void;
    off<Key extends keyof Events>(type: Key, handler?:
    Handler<Events[Key]>): void;
    off(type: '*', handler: WildcardHandler<Events>):void;
    emit<Key extends keyof Events>(type: Key, event: Events[Key]):void;
    emit<Key extends keyof Events>(type: undefined extends Events[Key] ? 
    Key : never):void;
}
// 源碼第五段分析
interface Emitter用于下面一段核心代碼的返回值類型定義，這個interface定義了具體函數的結構類型
Emitter這個類型的泛型是Events繼承一個Record對象，該對象的key為EventType，value為unknown
導出了一個 mitt([all])函數，調用該函數返回一個 Emitter，該對象包含all、
on(type, handler)、off(type, [handler])和emit(type, [evt])這幾個屬性
/**
* Mitt: Tiny (~200b) functional event emitter / pubsub.
* @name mitt
* @returns {Mitt}
*/
export default function mitt<Events extends Record<EventType, unknown>>(
all?: EventHandlerMap<Events>
): Emitter<Events> {
    type GenericEventHandler =
    | Handler<Events[keyof Events]>
    | WildcardHandler<Events>;
    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<Key extends keyof Events>(type: Key, handler: GenericEventHandler) {
            const handlers: Array<GenericEventHandler> | undefined =
            all!.get(type);
            if (handlers) {
            handlers.push(handler);
            } else {
                all!.set(type, [handler] as EventHandlerList<
                Events[keyof Events]>);
            }
        },
        /**
        * Remove an event handler for the given type.
        * If `handler` is omitted, all handlers of the given type are removed.
        * @param {string|symbol} type Type of event to unregister `handler` from (`'*'` to remove a wildcard handler)
        * @param {Function} [handler] Handler function to remove
        * @memberOf mitt
        */
        off<Key extends keyof Events>( type: Key,
        handler?: GenericEventHandler
        ) {
            const handlers: Array<GenericEventHandler> | undefined =
            all!.get(type);
            if (handlers) {
                if (handler) {
                    handlers.splice(handlers.indexOf(handler) >>> 0, 1);
                } else {
                    all!.set(type, []);
                }
            }
        },
        /**
        * 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<Key extends keyof Events>(type: Key, evt?: Events[Key]) {
            let handlers = all!.get(type);
            if (handlers) {
                (handlers as EventHandlerList<Events[keyof Events]>)
                .slice()
                .map((handler) => {
                    handler(evt!);
                });
            }
            handlers = all!.get('*');
            if (handlers) {
                (handlers as WildCardEventHandlerList<Events>)
                .slice()
                .map((handler) => {
                    handler(type, evt!);
                });
             }
        }
    };
}