@8pattern/jevent 中文文档教程

Question

Installation

npm install @8pattern/jevent

Usage

jEvent 的三种使用方法：

Bind a object

适用于你想隔离不同目标的事件

import jEvent from '@8pattern/jevent'

const tareget = document.body
const handle = () => {}

// suscribe
jEvent(target).on('eventName', handle)
jEvent(target).on(['event1', 'event2'], handle)

// publish
jEvent(target).emit('eventName', ['arg1', 'arg2'])
jEvent(target).emit(['event1', 'event2'])

// off
// the return value indicates whether the handle was removed
jEvent(target).off('eventName', handle)

// clear
// the return value indicates whether the event was removed
jEvent(target).clear('eventName')

As a variable

如果你想要一个全局的事件通道，试试吧

import jEvent from '@8pattern/jevent'

const handle = () => {}
jEvent.on('eventName', handle)
jEvent.emit('eventName')
jEvent.off('eventName', handle)
jEvent.clear('eventName')

其实，如果没有对象 绑定，jEvent 会绑定一个默认的全局对象。 换句话说，用法是以下语句的糖分。

import jEvent from '@8pattern/jevent'

const handle = () => {}
jEvent().on('eventName', handle)
jEvent().emit('eventName')
jEvent().off('eventName', handle)
jEvent().clear('eventName')

As a class

请注意，导入的模块是一个命名模块

import { JEvent } from '@8pattern/jevent'

const jEvent = new JEvent()

const handle = () => {}
jEvent.on('eventName', handle)
jEvent.emit('eventName')
jEvent.off('eventName', handle)
jEvent.clear('eventName')

如果您想在类上实现事件总线，该方法有效

import { JEvent } from '@8pattern/jevent'

class MyClass extends JEvent {
    // some codes
}

const myInstance = new MyClass()

const handle = () => {}
myInstance.on('eventName', handle)
myInstance.emit('eventName')
myInstance.off('eventName', handle)
myInstance.clear('eventName')