javascript - 为什么在 Angular 中传递 $event(在处理 DOM 事件时)是一种可疑的做法

Question

我正在阅读 Angular 2 文档 where I found :

Passing the $event is not a good practice

Typing the event object reveals a significant objection to passing the entire DOM event into the method: the component has too much awareness of the template details. It can't extract information without knowing more than it should about the HTML implementation. That breaks the separation of concerns between the template (what the user sees) and the component (how the application processes user data).

出于某种原因，我无法完全理解它所说的内容。似乎在任何地方都没有可用的解释。

谁能用更简单的术语解释它的确切含义(如果可能的话，举个例子)？

Answer 1

查看文档已经提供的前后示例:

@Component({
  selector: 'key-up1',
  template: `
    <input #box (keyup)="onKey($event)">
    <p>{{values}}</p>
  `
})
export class KeyUpComponent_v1 {
  values = ''; 

  onKey(event: KeyboardEvent) {
    this.values += (<HTMLInputElement>event.target).value + ' | ';
  }
}

这里的组件必须知道事件有一个目标，它是一个输入元素，它有一个值。现在 v2:

@Component({
  selector: 'key-up2',
  template: `
    <input #box (keyup)="onKey(box.value)">
    <p>{{values}}</p>
  `
})
export class KeyUpComponent_v2 {
  values = '';

  onKey(value: string) {
    this.values += value + ' | ';
  }
}

这里的模板 负责从它自己的结构中提取正确的值，组件只知道它正在获取一个字符串。现在想象一下:

1. 您需要将 input 元素更改为 select，以限制输入范围。每个版本有什么变化？只是模板，还是组件也必须更改？

2. 您想测试处理方法。每个版本有多容易？您可以只传入一个字符串，还是必须使用适当结构的元素构建一个事件？

这就是关注点分离的真正含义 - 更改传播多远？您的系统的每个部分需要了解多少其他部分才能继续工作？每Wikipedia ，例如:

Of special value is the ability to later improve or modify one section of code without having to know the details of other sections, and without having to make corresponding changes to those sections.

---

然而，作为snorkpete建议，注意将 $event 传递给组件方法的保留仅适用于 $event 引用 DOM 事件的情况。在您使用 EventEmitter 引发您自己的事件的情况下，$event 将(很可能)是来自业务领域的对象，并且非常适合按原样使用。