我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛
炎炎夏日 ,今天你学习了吗？
当我们拥有一堆代码，且看不懂的时候，这个时候我们就该想该如何去重构该代码，此时我们就可以采用自定义事件管理的方式，能够更好的管理维护代码，这个时候就会发起疑问了，为什么要采用这种方式呢，个人认为自定义事件管理有以下优点：
- 占用内存小，项目启动快，能够很好的提高性能
- 减少事件注册，不会覆盖掉之前的相同事件
他的缺点也很明显，因为它不会覆盖掉之前相同的事件，就极有可能会出现事件混乱运行的情况，这里需要注意一下
如何实现自定义事件管理
自定义事件管理，实现的方法有很多，我这里讲俩种方案，思路都是基本一样，自定义事件管理是把所有事件放到一个地方统一管理，可以进行删除，添加，触发，存储事件的地方叫做事件池，事件池存放了所有触发元素和事件;
ES5实现方式
事件池:用于管理自定义事件
//事件池 /** * 存储后的数据：key是事件管理名，val是一个数组,里面是事件 "mydom":['事件1','事件2'] **/ const handle={};
往事件池里面添加事件
/** EventName 事件管理名 fn 需要添加的事件 */ function addEvent(EventName, fn) { // 判断事件名是否存在于事件池,如果不存在则创建一个空数组 if (!(EventName in handle)) { handle[EventName] = []; }; // 添加进去 handle[EventName].push(fn); };
删除事件
/** EventName 事件管理名 fn 需要删除的事件 */ function removeEvent(EventName, fn) { // 判断当前的事件管理名是否存在,不存在则退出 if (!(EventName in handle)) { return; }; let i = handle[EventName].findIndex(val => { // 判断当前的元素是否存在,存在返回当前元素的索引值,不存在则返回-1 return val == fn; }); if (i == -1) { // 没有找到事件则退出 return console.error('没有找到事件') }; // 使用数组方法删除下标为i的数组,操作的是原数组 handle[EventName].splice(i, 1); };
触发事件
/** EventName 事件管理名，用于事件名下管理的所有事件 */ function triggerEvent(EventName) { // 判断当前的事件管理名是否存在,不存在则退出 if (!(EventName in handle)) { console.error(EventName, '事件名不存在'); return; }; // 存在则执行事件管理中的所有事件 // for和foreach的区别:for可以退出可以跳过但是foreach不行; handle[EventName].forEach(elm => { // 执行 elm(); }); };
使用
//声明事件 function fn1() { console.log('自定义事件1'); } function fn2() { console.log('自定义事件2'); }; // 添加事件 addEvent('myevent', fn2); addEvent('myevent', fn1); //删除事件 removeEvent('myevent', fn1); //执行事件 btn.addEventListener('click', () => { triggerEvent('myevent'); });
看到代码想必大家明白了个大概，下面贴出完整代码
// 事件 function fn1() { console.log('自定义事件1'); } function fn2() { console.log('自定义事件2'); }; // 事件池 const handle = {}; // 添加事件 function addEvent(EventName, fn) { if (!(EventName in handle)) { handle[EventName] = []; }; handle[EventName].push(fn); }; // 执行函数 function triggerEvent(EventName) { if (!(EventName in handle)) return; handle[EventName].forEach(elm => { elm(); }); }; // 删除事件 function removeEvent(EventName, fn) { if (!(EventName in handle)) return; let i = handle[EventName].findIndex(val => { return val == fn; }); if (i == -1) return; handle[EventName].splice(i, 1); }; // 添加 addEvent('myevent', fn2); addEvent('myevent', fn1); // 删除 removeEvent('myevent', fn1); // 执行 btn.addEventListener('click', () => { triggerEvent('myevent'); });
ES6实现方式
现在es6已经基本全面普及，怎么可能我们每天都会用到的es6方案呢，强烈推荐es6方案，es6方案比es5看起来更具有结构化，看起来更为清晰这里直接贴代码，思路基本都一样的
// 类 class MyEvent { constructor() { // 事件池 this.halder = {} } /** *添加自定义事件 * 自定义事件管理名 * 事件名 */ addEvent(EventName, fn) { // 判断当前的事件管理是不是为空 if (typeof this.halder[EventName] === 'undefined') { this.halder[EventName] = []; }; // 把事件追加进去事件管理名 this.halder[EventName].push(fn); } /** *删除自定义事件 * EventName 自定义事件管理名 * fn 事件名 */ removeEvent(EventName, fn) { // 判断当前的事件管理是不是为空 if (!(EventName in this.halder)) return; // 找到当前的事件在事件名中的下标并返回,没有返回-1 let i = this.halder[EventName].findIndex(v => { return v == fn; }); if (i === '-1') return; // 删除事件,对元素组进行操作的 this.halder[EventName].splice(i, 1); } /** * 执行自定义事件 * EventName 自定义事件管理名 */ tgigerEvent(EventName) { // 判断当前的事件管理是不是为空 if (!(EventName in this.halder))return; this.halder[EventName].forEach(v => v()); } }; // 创建函数 function fn1() { console.log('事件管理1'); } function fn2() { console.log('事件管理2'); } // 创建实例化对象 let obj = new MyEvent(); // 添加 obj.addEvent('my', fn1); obj.addEvent('my', fn2); // 删除 obj.removeEvent('my', fn2); // 执行 btn.addEventListener('click', () => { obj.tgigerEvent('my'); });
