说说Node中的EventEmitter? 如何实现一个EventEmitter?

<h2>一、是什么</h2>
我们了解到，<code>Node</code>采用了事件驱动机制，而<code>EventEmitter</code>就是<code>Node</code>实现事件驱动的基础
在<code>EventEmitter</code>的基础上，<code>Node</code>几乎所有的模块都继承了这个类，这些模块拥有了自己的事件，可以绑定／触发监听器，实现了异步操作
<code>Node.js</code> 里面的许多对象都会分发事件，比如 fs.readStream 对象会在文件被打开的时候触发一个事件
这些产生事件的对象都是 events.EventEmitter 的实例，这些对象有一个 eventEmitter.on() 函数，用于将一个或多个函数绑定到命名事件上
<h2>二、使用方法</h2>
<code>Node</code>的<code>events</code>模块只提供了一个<code>EventEmitter</code>类，这个类实现了<code>Node</code>异步事件驱动架构的基本模式——观察者模式
在这种模式中，被观察者(主体)维护着一组其他对象派来(注册)的观察者，有新的对象对主体感兴趣就注册观察者，不感兴趣就取消订阅，主体有更新的话就依次通知观察者们
基本代码如下所示：
<pre><code class="language-js">const EventEmitter = require('events')

class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter()

addListener(type,handler){
    this.on(type,handler)
}

prependListener(type, handler) {
 if (!this.events[type]) {
 this.events[type] = [];
 }
 this.events[type].unshift(handler);
}</code></pre>
紧接着就是实现事件监听的方法<code>removeListener/on</code>
<pre><code class="language-js">removeListener(type, handler) {
 if (!this.events[type]) {
 return;
 }
 this.events[type] = this.events[type].filter(item =&gt; item !== handler);
}

off(type,handler){
 this.removeListener(type,handler)
}</code></pre>
最后再来实现<code>once</code>方法， 再传入事件监听处理函数的时候进行封装，利用闭包的特性维护当前状态，通过<code>fired</code>属性值判断事件函数是否执行过
<pre><code class="language-js">once(type, handler) {
 this.on(type, this._onceWrap(type, handler, this));
 }

_onceWrap(type, handler, target) {
    const state = { fired: false, handler, type , target};
    const wrapFn = this._onceWrapper.bind(state);
    state.wrapFn = wrapFn;
    return wrapFn;
  }

_onceWrapper(...args) {
 if (!this.fired) {
 this.fired = true;
 Reflect.apply(this.handler, this.target, args);
 this.target.off(this.type, this.wrapFn);
 }
 }</code></pre>
完整代码如下：
<pre><code class="language-js">class EventEmitter {
 constructor() {
 this.events = {};
 }

on(type, handler) {
        if (!this.events[type]) {
            this.events[type] = [];
        }
        this.events[type].push(handler);
    }

addListener(type,handler){
        this.on(type,handler)
    }

prependListener(type, handler) {
        if (!this.events[type]) {
            this.events[type] = [];
        }
        this.events[type].unshift(handler);
    }

removeListener(type, handler) {
        if (!this.events[type]) {
            return;
        }
        this.events[type] = this.events[type].filter(item =&gt; item !== handler);
    }

off(type,handler){
        this.removeListener(type,handler)
    }

emit(type, ...args) {
        this.events[type].forEach((item) =&gt; {
            Reflect.apply(item, this, args);
        });
    }

once(type, handler) {
        this.on(type, this._onceWrap(type, handler, this));
    }

_onceWrap(type, handler, target) {
        const state = { fired: false, handler, type , target};
        const wrapFn = this._onceWrapper.bind(state);
        state.wrapFn = wrapFn;
        return wrapFn;
    }

_onceWrapper(...args) {
 if (!this.fired) {
 this.fired = true;
 Reflect.apply(this.handler, this.target, args);
 this.target.off(this.type, this.wrapFn);
 }
 }
}</code></pre>

DreamCoders/CoderGuide

Content Risk Flag

Comments (0)

DreamCoders/CoderGuide .gitee-modal { width: 500px !important; }

Content Risk Flag