前言
前端只做两件事,分别是数据展示和用户交互。数据展示我们先不看,主要看看用户交互
用户交互是指用户使用鼠标、键盘等设备在页面上点击、双击、滚动等操作,改变数据状态,页面发生变化,用户看到页面变化。其中用户做的操作转化为软件行话是 DOM 事件操作,而 DOM 事件操作背后是一个个 JS 方法的调用
方法(函数)是状态变化的封装。理解函数体结构才能理解业务。那么开发人员快速找到方法(函数)定义也就能快速明白业务逻辑
本篇技术文章就是向大家介绍两种快速找到方法定义的办法
根据DOM事件监听转到方法定义
下面是非常简单的小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>根据DOM事件监听转到方法定义</title>
</head>
<body>
<button>click</button>
</body>
</html>
<script>
const oBtn = document.querySelector("button");
oBtn.addEventListener("click", handler);
function handler() {
console.log("click it");
}
</script>
将上面的代码运行在 Chrome 浏览器中,打开开发者选项
光标选中 button DOM 元素,然后打开 Console 面板
输入 getEventListeners($0)
然后点击回车键,console 输出 button 元素上绑定的事件,将对象逐层展开,可以看到 button 上绑定的方法名和方法的位置([[FunctionLocation]]),点击 [[FunctionLocation]] 后面的链接,可以跳转到 handler 函数定义的地方
在 Source 面板中,可以看到 handler 函数声明的位置,阅读 handler 函数体的代码,就能明白对应的业务逻辑
根据断点转到方法定义
我相信现在的前端开发开发新项目的时候,基本上都会选择 React 或 Vue 等前端框架,而不是原生 JS 开发。当你们使用上面的办法去找函数定义的位置时会发现根本找不到或者只找到 noop 方法(React 中)。因为 React、Vue 甚至其他前端框架对事件做了封装,不那么轻易找到函数定义的地方,那么我们可以根据断点找到函数定义
利用 Vite 在本地启动一个简单的 React 小项目,主要的测试代码如下
// App.jsx
function App() {
const handleClick = () => {
console.log("click it");
};
return (
<div>
<button onClick={handleClick}>click</button>
</div>
);
}
export default App;
当使用根据DOM事件监听转到方法定义办法时,会发现绑定的事件是 noop,位置在 React 源码里面
说明根据DOM事件监听转到方法定义办法对前端框架是行不通,但是可以使用断点
在 Event Listener BreakPoints 里,找到 click 选项并勾选,然后点击 click 按钮,会出现下面的效果
因为测试代码非常简单,直接在 Source 面板里显示函数定义
下面来看一个比较复杂的测试代码
需要在 Local 作用域里详细查找绑定的事件,点击事件的位置跳转到函数定义的地方
注意点
对于使用前端框架开发的项目,一定要提供完整的 sourcemap 文件,否则不会跳转到函数定义的地方