1.0.8 • Published 6 months ago
event-dispatch-path v1.0.8
调试开发阶段。用于追踪事件不同阶段的执行情况
什么情况下需要安装这个工具帮助你进行调试
- 项目开发有多个前段开发人员
- 没有统一的事件绑定管理
- 多处事件绑定后,绑定事件没有触发。(其他开发人员捕获该事件中断了事件默认流程)
- 该项目仅仅用于调试目的。协助查找事件流程在哪中断。
如果你任然需要该库的协助
安装
npm install event-dispatch-path
使用 (保证在项目入口进行加载)
import listenerDefaultEventTree from "event-dispatch-path";
// 你需要监听调试的方法名
listenerDefaultEventTree('click')
listenerDefaultEventTree(['click','keyup'])
打包
使用webpack等类似构建工具。在打包环境为process.env.NODE_ENV === "production"时。
1:该库仅仅在调试期间发挥作用
2:不需要做任何更改,该库在打包后不会执行任何代码。
Vue项目支持
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
---|---|---|---|---|---|---|---|---|
⇓ Vue:no_vue | - | - | - | - | - | - | ⇑ Vue:is_vue | document |
- | ⇓ Vue:no_vue | - | - | - | - | ⇑ Vue:is_vue | - | div#root(Root节点) |
- | - | ⇓ Vue:is_vue | - | - | ⇑ Vue:is_vue | - | - | div.content |
- | - | - | ⇌ Vue:no_vue | ⇌ Vue:no_vue | - | - | - | button |
React项目(新版 合成事件由React App根节点进行模拟派发) 输入内容如下
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
---|---|---|---|---|---|---|---|---|
⇓ react:原生事件 | - | - | - | - | - | - | ⇑ react:原生事件 | document |
- | ⇓ react:原生事件 | - | - | - | - | ⇑ react:原生事件 | - | div#root(Root节点) |
- | - | ⇓ react:原生事件 | - | - | ⇑ react:原生事件 | - | - | div.content |
- | - | - | ⇌ react:原生事件 | ⇌ react:原生事件 | - | - | - | button |
JS原生事件(click)流结束,结束于(冒泡),最后响应元素: [document]
React事件,捕获冒泡流程执行完成,无中断。终止于: [div#root]
或者
JS原生事件(click)流结束,结束于(冒泡),最后响应元素: [div#root]
React事件,捕获冒泡流程执行完成,被中断。
文件路径:/xx/x/App.js
组件:【App】
在该方法中中断: [ƒ]
Raect项目(旧版 合成事件由节点document进行模拟派发)
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
---|---|---|---|---|---|---|---|---|
⇓ react:原生事件 | - | - | - | - | - | - | ⇑ react:原生事件 | document |
- | ⇓ react:原生事件 | - | - | - | - | ⇑ react:原生事件 | - | div#root |
- | - | ⇓ react:原生事件 | - | - | ⇑ react:原生事件 | - | - | div.content |
- | - | - | ⇌ react:原生事件 | ⇌ react:原生事件 | - | - | - | button |
JS原生事件(click)流结束,结束于(冒泡),最后响应元素: [document]
React事件,捕获冒泡流程执行完成,无中断。终止于: [document]
或者
JS原生事件(click)流结束,结束于(冒泡),最后响应元素: [document]
React事件,捕获冒泡流程执行完成,被中断。
文件路径:/xx/x/App.js
组件:【App】
在该方法中中断: [ƒ]
插件机制
EventInfoPlugin 支持对每一步监听进行处理。
ReactEventStepInfo 内部类 对React合成事件的支持
VueComponentStep 内部类 对Vue事件支持 对执行情况(在哪个组件,是否是Vue组件)进行判定
ResultShowPlugin 可以对事件监听结果进行处理,已满足不同需求。
LogShowPlugin 内部类 将结果格式化输出在控制台