《编写可维护的 JavaScript》编程实践 - 第 7 章事件处理

╰半夏微凉° 2022-10-12 12:17 134阅读 0赞

# 编程实践 - 第 7 章 事件处理 #

> 《编写可维护的 JavaScript》—— Nicholas C. Zakas

在所有 JavaScript 应用中事件处理都非常重要。  
所有的 JavaScript 均通过事件绑定到 UI 上，所以大多数前端工程师需要花费很多时间来编写和修改事件处理程序。

遗憾的是，在 JavaScript 诞生之初，这部分内容并未受到太多重视。  
甚至当开发者们开始热衷于将传统的软件架构概念融入到 JavaScript 里时，事件绑定仍然没有收到多大重视。

大多数事件处理相关的代码和事件环境紧紧耦合在一起，导致可维护性很糟糕。

## 1. 典型用法 ##

多数开发者都很了解，当事件触发时，事件对象（event 对象）会作为回调参数传入事件处理程序中。

event 对象包含所有和事件相关的信息，包括事件的宿主（target）以及其他和事件类型相关的数据。

鼠标事件会将其位置信息暴露在 event 对象上，  
键盘事件会将按键的信息暴露在 event 对象，  
触屏事件会将触摸位置和持续时间（duration）暴露在 event 对象上。  
只有提供了所有这些信息，UI 才会正确地执行交互。

在很多场景中，你只是用到了 event 所提供信息的一小部分，如下

// 不好的写法
    function handleClick(event) {
        
      var popup = document.getElementById('popup');
      popup.style.left = event.clientX + 'px';
      popup.style.top = event.clientY + 'px';
      popup.className = 'reveal';
    }
    
    element.addEventListener('click', handleClick, false);

这段代码只用到了 event 对象的两个属性： `clientX` 和 `clientY` 。  
在将元素显示在页面之前先用这两个属性给它做定位。  
尽管这段代码看起来非常简单且没有什么问题，但实际上是不好的写法，因为这种做法有其局限性。

## 2. 规则 1 - 隔离应用逻辑 ##

上述代码的第一个问题是事件处理程序包含了应用逻辑（application logic）。

应用逻辑是和应用相关的功能性代码，而不是和用户行为相关的。

上述代码中：

*  应用逻辑 是在特定位置显示弹出框。
 *  用户行为 是点击鼠标

将应用逻辑从事件处理程序中抽离出来的做法是一种最佳实践，  
因为其他地方可能会用到同一段逻辑，这时就可以复用，比如：

*  用户将鼠标移到某个元素上时，判断是否显示弹出框
 *  按下键盘上的某个键时，显示弹出框

将应用逻辑放置于事件处理程序中的另一个问题与测试有关。  
测试时需要直接触发功能代码，而不是通过模拟对元素的单击来触发。

如果将应用逻辑放置于事件处理程序中，唯一的测试方法是制造事件的触发。

应该将应用逻辑和事件处理的代码拆分开来，重构如下：

应用逻辑被转移到 `MyApp.showPopup()` 方法中了；  
`MyApp.handleClick()` 方法只做一件事，即调用 `MyApp.showPopup()` 方法。

应用逻辑被剥离出去后，同一段功能代码可以应用于多处，而不依赖于特定事件的触发，这显然更方便，但这只是拆解事件处理程序代码的第一步。

## 3. 规则 2 - 不要分发事件对象 ##

在剥离出应用逻辑之后，上段示例代码还存在一个问题，即 `event` 对象被无节制地分发。

它从匿名事件处理函数到 `MyApp.handleClick()`，再到 `MyApp.showPopup()`。

`event` 对象上包含很多和事件相关的额外信息，而这段代码只用到了其中的两个而已。

应用逻辑不应当依赖于 event 对象来正确完成功能，原因如下：

*  方法接口并没有表明哪些数据是必要的。好的 API 一定是对于期望和依赖都是非常清晰明了的。将 `event` 对象作为参数并不能直接告诉你需要用到哪些属性，且用于干嘛。（接口格式不明晰）
 *  如果要测试这个方法，必须重新创建一个 `event` 对象并将它作为参数传入，所以你要确切地知道这个方法使用了哪些信息，这样才能正确地写出测试代码。（自行构造 `event` 对象来用于测试）

这些问题在大型 web 用于中都是不可取的。代码不够明晰会导致 bug。

最佳的办法是让事件处理程序使用 `event` 对象来处理事件，然后拿到所有需要的数据传给应用逻辑。例如，`MyApp.showPopup()` 只需要两个数据，x 坐标和 y 坐标。重写方法，如下：

这样很清晰地看到 `MyApp.showPopup()` 所期望传入的参数，并且在测试或代码的任意位置都可以很轻松得直接调用这段逻辑。

当处理事件时，最好让事件处理程序成为接触到 `event` 对象的唯一的函数。  
事件处理程序应当在进入应用逻辑之前针对 `event` 对象执行必要的操作，  
包括阻止默认事件或阻止事件冒泡，都应当直接包含在事件程序中，比如：

这样清楚地展示了事件处理程序和应用逻辑之间的分工。