hustcc / onfire.js

:gun: onfire.js is a nano version (~500b) for event-emitter.

onfire.js

nano version (~ 500b) for event-emitter.

中文文档 | English Doc

Install

npm i --save onfire.js

Usage

import EE from 'onfire.js';

const ee = new EE();

ee.on('mouseover', () => {});

ee.once('click', () => {});

ee.fire('click', 1, 'hello', true);

ee.off('click');

API

Simple and similar with event-emitter.

• on(eventName: string, callback: Function): listen an event.
• once(eventName: string, callback: Function): listen a event only once.
• fire(eventName: string, ...parameters: any[]): emit / trigger an event with parameters.
• off(eventName?: string, callback?: Function): unsubscribe an event.

Used

• Events subscribe and dispatcher.
• Cross-component communication for React / Vue / Angular.
• System event mechanism.

License

MIT@hustcc.

onfire.js's Issues

改进

1. hasOwnProperty
2. un(function)
3. rm size() and events()

建议可以指定 cb.apply 的 this 对象

例如在 Listener 中添加 target 属性，
回调函数调用时通过 cb.apply(target === undefined ? this : target, params);
这样方便在callback funtion里使用 this 对象。

fire传参问题

为什么是fire的时候传参数，而不是绑定时传参，有什么深意？

疑问？

为什么？
触发事件是用 onfire.fire 而不是 onfire.emit
取消绑定是用 onfire.un 而不是 onfire.off

context问题

你的on方法第三个参数好像没什么用的？

扩展…

方法one，fire方法多参数…

异步fire

同步fire和异步fire，防止fire执行的任务时间太长导致阻塞。

怎么用onfire.js在组件间通信？

Component 1:

'use strict';

import React from 'react';
import onfire from 'onfire.js';

export default class SubComponent1 extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            innerText: 'text before trigger...'
        }
    };

    setOnfireEvent () {
        onfire.on('changeInnerText', () => {
            console.log(1234);
            this.setState({
                innerText: 'text after trigger onfire...'
            });
        });
    }

    render () {
        return (
            <div className='sub-compenent-1'>
                {this.state.innerText}
            </div>
        );
    };
}

Component 2:

'use strict';

import React from 'react';
import onfire from 'onfire.js';

export default class SubComponent2 extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            innerText: 'text before trigger...'
        }
    };

    changeInnerText () {
        onfire.fire('changeInnerText');
    }

    render () {
        return (
            <div className='sub-compenent-2'>
                改变Component1的值:<button onClick={this.changeInnerText.bind(this)}>Change</button>
            </div>
        );
    };
}

这两个组件没法通信啊？

emit 并不等同于 fire

具体表现为当我想扩展子类时:

class BgAudio extends EE {
    emit(...args) { super(args) }
}

Class 'EE' defines instance member property 'emit', but extended class 'BgAudio' defines it as instance member function.

添加上下文参数，处理先fire后on/one问题

    // __onfireEvents[eventName][key] = [callback, is_one, context];

    // 添加context参数
    function on(eventName, callback, context) {
      // 处理先fire后on问题
      if (!!hasOwnKey(__onfireData, eventName)) {

        callback.apply(context, __onfireData[eventName]);
      }
      return _bind(eventName, callback, context, 0);
    }