Online Use | 中文 | Update Log | Feedback bug | Gitee
npm i tc-event
import event from 'tc-event';
event.regist('myEvent', (data) => {
console.log('emited!', data);
})
event.emit('myEvent', 'Aha!');
<script src="https://cdn.jsdelivr.net/npm/tc-event/tc-event.min.js"></script>
<script>
TEvent.regist('myEvent', function (data) {
console.log('emited!', data);
})
TEvent.emit('myEvent', 'Aha!');
</script>
For details, please refer to index.d.ts
interface IRegistMethod {
(eventName: TEventName, listener: IEventListener | IEventRegistOption): IEventItem;
(eventName: IRegistObject): IJson<IEventItem>;
// 链式调用
(eventName: TEventName): ILink;
}
interface IRemoveMethod {
(name: TEventName, cond: number | IEventListener, imme?: boolean): boolean;
(eventItem: IEventItem, imme?: boolean): boolean;
}
interface IEventStatic {
version: string;
EVENT: IJson<string>; // event enumeration
emit(name: TEventName, data?: any): boolean; // trigger event
onEmit(fn: IOnInterceptorEmit): void;
regist: IRegistMethod;
onRegist(fn: IOnInterceptorRegist): void;
checkEvent(name: TEventName): boolean; // Check if there is an event
remove: IRemoveMethod;
clear(name?: TEventName | TEventName[]): void;
order(name: TEventName): number;
registNotImmediate(name: TEventName, listener: IEventListener): IEventItem;
registNotImmediateOnce(name: TEventName, listener: IEventListener): IEventItem;
registOnce(name: TEventName, listener: IEventListener): IEventItem;
registSingle(name: TEventName, listener: IEventListener): IEventItem;
// event module
createModule (name: TModuleName): IEventModuleStatic;
getModule (): IJson<IEventModuleStatic>;
getModule (name: TModuleName): IEventModuleStatic;
removeModule(name: TModuleName): void;
clearModule(): void;
}
Determine whether the event exists
const eventName = 'test-checkEvent';
const result = [];
result.push(event.checkEvent(eventName));
event.regist(eventName, () => {});
result.push(event.checkEvent(eventName));
event.emit(eventName);
result.push(event.checkEvent(eventName));
event.clear(eventName);
result.push(event.checkEvent(eventName));
event.regist(eventName, () => {});
result.push(event.checkEvent(eventName));
event.clear();
result.push(event.checkEvent(eventName));
console.log(result);
// [false, true, true, false, true, false]
Clear single or all events
const eventName = 'test-clear';
const result = [];
event.regist(eventName, () => {
result.push(1);
});
event.emit(eventName);
event.clear(eventName);
event.emit(eventName);
event.regist(eventName, {
immediate: false,
listener: () => {
result.push(2);
}
});
event.emit(eventName);
event.clear();
event.emit(eventName);
console.log(result);
// [1, 2]
The immediate parameter indicates whether the current event needs to be triggered immediately if the event has already been triggered when registering an event
const eventName = 'test-immediate';
const result = [];
event.emit(eventName);
event.regist(eventName, () => {
result.push(1);
});
event.regist(eventName, {
immediate: true,
listener () { result.push(2);}
});
event.regist(eventName, {
immediate: false,
listener () {result.push(3);}
});
console.log(result);
// [1, 2]
The index parameter indicates the position where you want to insert when registering an event
const eventName = 'test-order';
const result = [];
event.regist(eventName, () => {
result.push(1); // 1
});
event.regist(eventName, () => {
result.push(2); // 1 2
});
event.regist(eventName, () => {
result.push(3); // 1 2 3
});
event.regist(eventName, () => {
result.push(4); // 1 2 3 4
});
event.regist(eventName, {
index: 0, // 5 1 2 3 4
listener () {result.push(5);}
});
event.regist(eventName, {
index: 2, // 5 1 6 2 3 4
listener () {result.push(6);}
});
event.regist(eventName, {
index: 1, // 5 7 1 6 2 3 4
listener () {result.push(7);}
});
event.regist(eventName, {
index: 100, // 5 7 1 6 2 3 4 8
listener () {result.push(8);}
});
event.regist(eventName, {
index: -3, // 9 5 7 1 6 2 3 4 8
listener () {result.push(9);}
});
event.emit(eventName);
console.log(result);
// [9, 5, 7, 1, 6, 2, 3, 4, 8]
Global interceptor, support onRegist and onEmit
const eventName1 = 'test-interceptor1';
const eventName2 = 'test-interceptor2';
const result = [];
event.onRegist(({name, item}) => {
result.push(`onRegist: ${name}`);
});
event.onEmit(({name, item, data, firstEmit}) => {
result.push(`onEmit: ${name} ${data} ${firstEmit}`);
});
event.regist(eventName1, () => {});
event.regist(eventName2, () => {});
event.emit(eventName1, `${eventName1} data`);
event.emit(eventName2, `${eventName2} data`);
event.emit(eventName2, `${eventName2} data2`);
console.log(result);
/*
[
'onRegist: test-interceptor1',
'onRegist: test-interceptor2',
'onEmit: test-interceptor1 test-interceptor1 data true',
'onEmit: test-interceptor2 test-interceptor2 data true',
'onEmit: test-interceptor2 test-interceptor2 data2 false'
]
*/
once parameter is only triggered sequentially
const eventName = 'test-once';
const result = [];
event.regist(eventName, () => {
result.push(1);
});
event.regist(eventName, {
once: true,
listener () { result.push(2);}
});
event.regist(eventName, {
once: false,
listener () {result.push(3);}
});
event.emit(eventName);
event.emit(eventName);
console.log(result);
// [1, 2, 3, 1, 3]
The times parameter is the number of times the monitor is triggered
const eventName = 'test-times';
const result = [];
event.regist(eventName, {
times: 1,
listener () { result.push(1);}
});
event.regist(eventName, {
times: 2,
listener () { result.push(2);}
});
event.regist(eventName, {
times: 3,
listener () { result.push(3);}
});
event.emit(eventName);
event.emit(eventName);
event.emit(eventName);
event.emit(eventName);
// [1, 2, 3, 2, 3, 3]
Control the sequence number of the insertion event (different from the index parameter)
const eventName = 'test-order';
const result = [];
event.regist(eventName, () => {
result.push(1); // 1
});
event.regist(eventName, () => {
result.push(2); // 1 2
});
event.regist(eventName, {
order: 0, // 0 1 2
listener () {result.push(3);}
});
event.regist(eventName, {
order: 1, // 0 1 *1 2
listener () {result.push(4);}
});
event.regist(eventName, {
order: 1, // 0 1 *1 **1 2
listener () {result.push(5);}
});
event.regist(eventName, {
order: 1, // 0 ***1 1 *1 **1 2
orderBefore: true,
listener () {result.push(6);}
});
event.regist(eventName, {
order: 10, // 0 ***1 1 *1 **1 2 10
listener () {result.push(7);}
});
event.regist(eventName, () => { // 0 ***1 1 *1 **1 2 3 10
result.push(8);
});
event.emit(eventName);
console.log(result);
Singleton monitoring mode, enabling the single parameter for an event name will overwrite all previous monitoring functions for the event
And after this event, there is no need to carry the single parameter
When the single parameter is enabled, the index order orderBefore parameter is invalid
const eventName = 'test-single';
const result = [];
event.regist(eventName, () => {
result.push(1);
});
event.emit(eventName);
// Test coverage old method
event.regist(eventName, {
single: true,
immediate: false,
listener: () => {
result.push(2);
}
});
event.emit(eventName);
event.clear(eventName);
event.regist(eventName, {
single: true,
listener () { result.push(3);}
});
event.regist(eventName, {
single: true,
listener () { result.push(4);}
});
event.emit(eventName);
// Test single parameter cache
event.regist(eventName, {
immediate: false,
listener () { result.push(5);}
});
event.emit(eventName);
console.log(result);
// [1, 2, 4, 5]
The name parameter is used to add a parameter to a monitor
The default value is eventName + id
const eventName = 'test-name';
const item1 = event.regist(eventName, () => {
});
const item2 = event.regist(eventName, {
name: 'listener-name',
listener () {}
});
// item1.name === 'test-name-1'
// item2.name === 'listener-name'
The head parameter is used to add the listener to the event head
const eventName = 'test-head';
const result = [];
event.regist(eventName, () => {
result.push(1);
});
event.regist(eventName, {
order: -1,
listener () {result.push(2);}
});
event.regist(eventName, {
index: -1,
listener () {result.push(3);}
});
event.regist(eventName, {
head: true,
listener () {result.push(4);}
});
event.regist(eventName, {
head: true,
listener () {result.push(5);}
});
event.emit(eventName);
// result: [5, 4, 3, 2, 1]
The tail parameter is used to add the listener to the end of the event
const eventName = 'test-tail';
const result = [];
event.regist(eventName, () => {
result.push(1);
});
event.regist(eventName, {
order: 100,
listener () {result.push(2);}
});
event.regist(eventName, {
index: 100,
listener () {result.push(3);}
});
event.regist(eventName, {
listener () {result.push(4);}
});
event.regist(eventName, {
tail: true,
listener () {result.push(5);}
});
event.regist(eventName, {
tail: true,
listener () {result.push(6);}
});
event.emit(eventName);
// result: [1, 4, 2, 3, 5, 6]
Get the serial number of a monitor
const eventName = 'test-order-fn';
const result = [];
event.regist(eventName, () => {
result.push(1);
});
event.regist(eventName, () => {
result.push(2);
});
const e1 = event.regist(eventName, () => {
result.push(3);
});
const e2 = event.regist(eventName, {
order: 1,
listener () { result.push(4);}
});
event.regist(eventName, () => {
result.push(5);
});
event.emit(eventName);
console.log([result, event.order(eventName), e1.order, e2.order]);
// [[1, 4, 2, 3, 5], 4, 3, 1
Remove event listener
const eventName = 'test-remove';
const result = [];
const l4 = () => { result.push(4); };
const l5 = () => { result.push(5); };
const l6 = () => { result.push(6); };
const l7 = () => { result.push(7); };
event.regist(eventName, () => {
result.push(1);
});
event.regist(eventName, () => {
result.push(2);
});
event.regist(eventName, () => {
result.push(3);
event.remove(eventName, l4, true);
event.remove(eventName, l5);
event.regist(eventName, l7);
});
event.regist(eventName, l4);
event.regist(eventName, l5);
event.regist(eventName, l6);
event.remove(eventName, l6);
event.emit(eventName);
event.emit(eventName);
console.log(result);
// [1, 2, 3, 7, 5, 1, 2, 3, 7, 7]
event.registNotImmediate('xxx', ()=>{})
// equals
event.regist('xxx', {
immediate: false,
listener: ()=>{}
})
event.registOnce('xxx', ()=>{})
// equals
event.regist('xxx', {
once: true,
listener: ()=>{}
})
event.registNotImmediateOnce('xxx', ()=>{})
// equals
event.regist('xxx', {
immediate: false,
once: true,
listener: ()=>{}
})
event.registSingle('xxx', ()=>{})
// equals
event.regist('xxx', {
single: true,
listener: ()=>{}
})
The second parameter of the monitoring function is a json, which contains three attributes
event.regist('xxx', (data, {firstEmit, item, remove, clear})=>{
})
The regist function will enable chained calls when referring to the incoming event name
All parameters can be called by chain, all apis are optional, and finally need to be triggered through the listen method
event.regist('xxx')
.index(1)
.order(1)
.orderBefore()
.notImmediate()
.single()
.once()
.times(1)
.listener()
.name('xxx')
.head()
.tail()
.listen();
The declaration file is as follows
interface ILink {
single: (single: boolean) => ILink;
notImmediate: (immediate: boolean) => ILink;
once: (once: boolean) => ILink;
index: (index: number) => ILink;
order: (order: number) => ILink;
orderBefore: (orderBefore: boolean) => ILink;
listener: (listener: IEventListener) => ILink;
name: (name: string) => ILink;
head: () => ILink;
tail: ()=> ILink;
times: (times: number)=> ILink;
listen: (listener?: IEventListener) => IEventItem;
}
const result = [];
const name = 'module_event';
const moduleA = event.createModule('A');
const moduleB = event.createModule('B');
moduleA.regist(name, data => {result.push('A' + data);});
moduleB.regist(name, data => {result.push('B' + data);});
moduleA.emit(name, 1);
moduleA.emit(name, 2);
console.log(result);
event.createModule('A');
event.createModule('B');
console.log([
event.getModule('A').moduleName,
event.getModule('B').moduleName,
]);
For details, please refer to index.d.ts
export interface IEventRegistOption {
listener: IEventListener;
immediate?: boolean;
once?: boolean;
times?: number;
order?: number;
orderBefore?: boolean;
index?: number;
single?: boolean;
head?: boolean;
tail?: boolean;
name?: string;
}
export interface IRegistObject {
[key: string]: IEventRegistOption;
}
export interface IEventListener {
(data: any, listenOption: {
firstEmit: boolean;
item: IEventItem;
remove: () => boolean;
clear: () => boolean;
}): void;
}
export interface IEventItem {
eventName: TEventName;
listener: IEventListener;
immediate: boolean;
once: boolean;
order: number;
orderBefore: boolean;
hasTrigger: boolean;
id: number;
single: boolean;
name: string;
head: boolean;
tail: boolean;
times: number;
timesLeft: number;
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。