前端(Electron)事件系统设计第一章

1,437 阅读1分钟

认识常见的Emitter

  1. Node中的Emitter
    const EventEmitter = require('events').EventEmitter; 
    const event = new EventEmitter(); 
    const fuc = function() {  // 监听事件
        console.log('some_event 事件触发'); 
    };
    event.on('some_event', fuc); 
    setTimeout(() => {  event.emit('some_event');  // 触发事件 }, 1000); 
    event.removeListener('some_event', fuc);
  1. Electron中的Emitter 根据Node中的示例,我们发现,Emitter具有如下特征:
	export interface NodeEventEmitter {
        on(event: string | symbol, listener: Function): this; // 注册监听
        removeListener(event: string | symbol, listener: Function): this; // 移除监听
        emit(event: string | symbol, args: any[]): this; // 触发事件
    }

Electron里,具有这些特征的有: ipcMainipcRender,其实他们就是一个Emitter

  1. Web中的EmitterWeb中的Emitter有监听方法名字有略微区别:
	export interface DOMEventEmitter {
        addEventListener(event: string | symbol, listener: Function): void; // 注册监听
        removeEventListener(event: string | symbol, listener: Function): void; // 移除监听
        emit(event: string | symbol, args: any[]): void; // 触发事件
    }

因此,Web中的Emitter有:document、element(某个dom元素)

接下来,我们会实现一个自己的Emitter