内联事件处理程序练习JavaScript

Question

我是在Mozilla上阅读有关事件的文章，其中提到了“内联事件处理程序”，这些不应该被使用，被认为是一种不好的做法。

例如：

<button onclick="bgChange()">Press me</button>

然而，在像Angular这样的框架中，我们会做如下操作：

<my-component (click)="onClick($event)"></my-component>

这难道不与Mozilla在这种情况下认为的不良实践相矛盾吗？

如果这个问题需要在另一个部分提问，请告诉我。

- Harry

---

它们是完全不同的东西。 - Estus Flask

@smnbbrv 有一个问题，只是没有问号。 - Cody Ｇ

Angular 版本是一个模板，所以 Angular 引擎将使用适当的事件处理程序替换该语法，而在普通版本中，处理程序保留在内联中。被认为这是一种不良实践的原因之一是关注点分离，例如 HTML 和 JavaScript 不应在同一文件中。如果您必须查看 HTML 源代码才能弄清楚发生了什么，那么它也会使以后的更新更加困难。请查看 https://dev59.com/l2gt5IYBdhLWcg3w5har ，他们有更多的论点。 - Shilly

@shilly，听起来像是一个好答案。 - Jonas Wilms

请提供原始的英文文本，我会尽力为您翻译。 - Harry

Answer 1

这是一个“关注点分离”的问题，您的组件通常会被分离到一个文件中，然后包含该组件的“控制”逻辑。

Angular指令基本上是在模板中构建此想法的一种方式。

在没有像Angular这样的功能系统的情况下将其嵌入到html中，类似于在JavaScript中编写整个html模板，除非有一个帮助您完成此操作的系统，否则很糟糕。

基本上，如果没有使用Angular，您应该“将您的JavaScript代码放在JavaScript中”，并将“HTML代码放在HTML中”。

请查看MVC和关注点分离的更多信息。

https://www.safaribooksonline.com/library/view/programming-javascript-applications/9781491950289/ch05.html

Angular的控制器可能会让你想起其他MVC实现中的模型，如果你是“胖模型，瘦控制器”方法的追随者。

- Cody Ｇ