@d-fischer/ typed- event- emiters (英语)

此模块提供了已知事件排放的替代 API 用于浏览器(DOM)或节点.js的界面。 而不是接受任意 字符串作为事件名称,此模块强制您将事件注册到 你的课。 因此,具有约束力的事件和排放事件的风格各不相同 很少,在约束时间已经确保事件实际存在.

安装

yarn add @d-fischer/typed-event-emitter
# or
npm install @d-fischer/typed-event-emitter

使用量

import { EventEmitter } from '@d-fischer/typed-event-emitter';

class MyClass extends EventEmitter {
    // register an event
    onValueChanged = this.registerEvent<[newValue: number]>();

    private _value: number;

    constructor(value: number) {
        // initialize EventEmitter
        super();

        this._value = value;
    }

    get value() {
        return this._value;
    }

    set value(value: number) {
        this._value = value;
        // emit the event to all listeners
        this.emit(this.onValueChanged, this._value);
    }
}

const instance = new MyClass();

// listen to event
instance.onValueChanged(newValue => {
    console.log('Value changed', newValue);
});

// invoke setter
instance.value = 27;

首先 EventEmitter 从模块中装入。 任何会发射的类 必须扩大 EventEmitter如果你的班级有自己的建筑师, 一定要打电话 super()。 。 。 .

任何事件,你的班级必须能够发射,必须登记在表格中:

onFooBar = this.registerEvent<[...argTypes]>();

何处 onFooBar 可以是任何名称(不需要从 打开和 argTypes 必须是代表函数参数的二进制 听众一定有 使用此选项, 您可以看到您的功能必须签名 当你准备把听众绑起来的时候.

要发出一个事件( 只能从事件发射器内发出), 您需要 调用 this.emit(this.onFooBar, ...)时 this.onFooBar 事件为 发射和 ... 任何参数,将传递给听众.

内部活动

也可以声明内部事件以及内部听众. 利用普通听众的主要优势 出现在你身上 写一个图书馆供其他人使用。 如果最终用户决定清除 所有事件使用 instance.removeListener() 没有参数 或只有事件绑定器能清除某一事件, 内部的听众会幸存下来.

import { EventEmitter } from '@d-fischer/typed-event-emitter';

class MyClass extends EventEmitter {
    // register an event
    onValueChanged = this.registerEvent<[newValue: number]>();

    private _value: number;

    constructor(value: number) {
        // initialize EventEmitter
        super();

        this._value = value;
        
        this.addInternalListener(this.onValueChanged, newValue => {
            console.log('Value changed (internal)', newValue);
        });
    }

    get value() {
        return this._value;
    }

    set value(value: number) {
        this._value = value;
        // emit the event to all listeners
        this.emit(this.onValueChanged, this._value);
    }
}

const instance = new MyClass();

// listen to event
instance.onValueChanged(newValue => {
    console.log('Value changed (external)', newValue);
});

// invoke setter, shows internal & external logs
instance.value = 27;

// clear listeners for event
instance.removeListener(instance.onValueChanged);

// invoke setter, still shows internal log
instance.value = 42;

Java 脚本

您的 JavaScript 主机( 即您的浏览器、 节点. js等) 应支持类 和遗产,以便正确工作。 上面显示的代码也可以是 用 JavaScript (node.js) 写道 :

const { EventEmitter } = require('@d-fischer/typed-event-emitter');

class MyClass extends EventEmitter {
    constructor(value) {
        // initialize EventEmitter
        super();

        /* newValue: number */
        this.onValueChanged = this.registerEvent();

        this._value = value;
    }

    get value() {
        return this._value;
    }

    set value(value) {
        this._value = value;
        this.emit(this.onValueChanged, this._value);
    }
}

let instance = new MyClass();
instance.onValueChanged(newValue => {
    console.log(`Value changed: ${newValue}`);
});

instance.value = 27;

节点显示事件在建构器内明确注册. 确保 以初始化它们 之后 电话 super()。 。 。 .