Javascript 自定义事件代理
- 插件主要特点:
- 深层嵌套回调函数,以事件模式完全解除了嵌套的问题, 解耦复杂业务逻辑
- 在不同场景里多个异步同时完成时即执行某个函数,且多个异步执行并行执行 不会堵塞
- 提供了before after wait等 特殊场景api ,应用场景更丰富
- 全局监听事件,订阅模式
- 兼容node端 浏览器端
- 遵循umd规范
安装方法
示例
单事件绑定
const createEventsProxy = require('eventsproxy');
const ep = createEventsProxy();
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
ep.emit('Test1', response);
})
ep.register('Test1', (data) => {
{`... 处理data ...`}
})
合成事件绑定
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
console.log('finshied');
})
})
})
const createEventsProxy = require('eventsproxy');
const ep = createEventsProxy();
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
ep.emit('Task1', data);
})
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
ep.emit('Task2', data);
})
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
ep.emit('Task3', data);
})
ep.register(['Task1', 'Task1', 'Task3'], (data1, data2, data3) => {
console.log('finshied', data1, data2, data3);
})
多事件绑定
const createEventsProxy = require('eventsproxy');
const ep = createEventsProxy();
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
ep.emit('Test1', data);
})
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
ep.emit('Test2', data);
})
ep.register({
'Test1': (data) => {
{`... 处理data ...`}
},
'Test2': (data) => {
{`... 处理data ...`}
},
'Test1~Test2': (data1, data2) => {
{`... 处理data ...`}
}
})
(* New Api)async 事件 监听, 支持 await then 等待返回结果, 返回结果是一次性的
const createEventsProxy = require('eventsproxy');
const ep = createEventsProxy();
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
ep.emit('Test', 10)
});
const data1 = await ep.await('Test');
console.log(data);
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
ep.emit('Test1', 10)
});
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
ep.emit('Test2', 20)
});
const data2 = await ep.await(['Test1', 'Test2']);
console.log(data);
before绑定事件栈触发之前,该事件栈总是先于绑定该事件的方法之前执行 after绑定事件栈触发之后,该事件栈总是先于绑定该事件的方法之后执行
const createEventsProxy = require('eventsproxy');
const ep = createEventsProxy();
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
ep.emit('Test1', data);
})
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
ep.emit('Test2', data);
})
ep.after(['Test1', 'Test2'], (v1, v2) => {
{`... 最后执行的业务 ... `}
})
ep.bind(['Test1', 'Test2'], (v1, v2) => {
{`... 再执行的业务 ... `}
})
ep.before(['Test1', 'Test2'], (v1, v2) => {
{`... 先执行的业务 ... `}
})
once只监视一次的绑定方式
const createEventsProxy = require('eventsproxy');
const ep = createEventsProxy();
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
ep.done('Test1', data);
})
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
ep.done('Test2', data);
})
ep.once(['Test1', 'Test2'], (v1, v2) => {
{`... 只执行一次的业务 ... `}
})
wait绑定的事件触发的次数达到预先设置的waitcount 才会触发回调
const createEventsProxy = require('eventsproxy');
const ep = createEventsProxy();
const fetch1 = () => {
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
ep.emit('Test1', data1);
})
}
const fetch2 = () => {
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
ep.emit('Test2', data2);
})
}
fetch1();
fetch2();
fetch1();
fetch2();
ep.wait(['Test1', 'Test2'], (v1, v2) => {
{`... 执行的业务 ... `}
{v1 == [data1, data2]}
}, 2 )
取消监视某事件
const createEventsProxy = require('eventsproxy');
const ep = createEventsProxy();
const fn = (v1, v2) => {
{`... 执行的业务 ... `}
}
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
ep.done('Test1', data);
})
fetch(url, options).then(function(response) {
{`... 复杂业务 ...`}
ep.done('Test2', data);
})
ep.register(['Test1', 'Test2'], fn);
ep.unregister(['Test1', 'Test2'], fn);
const unregister = ep.register(['Test1', 'Test2'], fn);
unregister();
API文档
const createEventsProxy = require('eventsproxy');
const ep2 = createEventsProxy(['Task1', 'Task2'], () => {});
const ep = createEventsProxy();
ep.register('Task', (data) => {
});
ep.bind('Task', () => {});
ep.on('Task', () => {});
ep.subscribe('Task', () => {});
ep.register(['Task1', 'Task2'], (v1, v2) => {
}) ;
ep.register({
'Task1': (data) => {},
'Task2': (data) => {},
'Task1,Task2': (v1, v2) => {
}
});
const fn = (v1, v2) => {}
const unregister = ep.register(['Test1', 'Test2'], fn) ;
unregister();
ep.unregister(['Test1', 'Test2'], fn);
ep.unbind(['Test1', 'Test2'], fn);
ep.unsubscribe(['Test1', 'Test2'], fn);
ep.off(['Test1', 'Test2'], fn);
ep.setProxyLoopSplit('~');
ep.register({
'Task1~Task2': (v1, v2) => {
}
})
ep.async('Test1')
ep.async(['Test1', 'Test2'])
ep.before(['Test1', 'Test2'], () => {});
ep.after(['Test1', 'Test2'], () => {});
ep.after(['Test1', 'Test2'], () => {}, 3 );
ep.emit('Task', data);
ep.done('Task', data);