为什么 JavaScript 和 HTML 分离是一个好的实践？

Question

我一直在阅读有关 JavaScript 的一些良好实践，其中之一是Unobtrusive JavaScript。第一点引起了我的注意

将功能（“行为层”）与网页的结构/内容和表示分离

在 wiki 页面上，示例之一是您应该将操作绑定到 JS 文件中的事件，而不是 HTML 中。这个例子

<input type="text" name="date" id="date" />
...
window.onload = function() {
    document.getElementById('date').onchange = validateDate;
};

受到青睐

<input type="text" name="date" onchange="validateDate()" />

但是，我想说我更喜欢带有onchange属性的第二个代码而不是第一个代码。我这样做的原因是

• 它易于阅读并立即清楚该元素上的更改（或任何其他事件）会发生什么。
• 我不必浏览 JavaScript 文件并查看onchange事件在何处（以及是否）绑定，以及是否存在其他一些事件，例如click为#date.
• AngularJS 等框架已经ng-click并将 HTML 结构与 JS 混合在一起。我为什么不应该？

我读过的不使用不引人注目的 javascript 的缺点是

• 污染全局命名空间。
• 创建又长又不可读的内联代码。
• 如果事件的代码发生更改，您只需在一处进行更改 - 即 JS 文件中。

但我认为缺点是可以解决的。

• 不要污染命名空间，而是在一个变量中创建应用程序，这样代码看起来就onchange="app.validateDate()"不会发生污染。
• 内联代码不会被写入，而是被分隔在 JS 文件中的一个函数中，然后像onclick="app.action();".
• 这不是和在属性中使用函数一样吗onclick？因为最终您必须在两种方法中仅对一个函数进行更改，无论是$('input').change(function () {/* ... change ... */});还是app.action = function () {/* ... change ... */}。

那么它实际上仍然被认为是一个好的做法吗？

Answer 1

这是一个非常广泛的话题，并且很大程度上基于意见。所有事情都没有一个答案。然而，这里有一些观察结果：

1. 无论你做什么，你都会污染命名空间。app.validateDate就像污染命名空间一样validateDate，只是因为需要有一个全局可访问的函数名称。在复杂的现代网站中，有大量的脚本争夺全球名称。理想情况下，您永远不会在全局公开任何名称，甚至是命名空间名称。

2. .onclick = handler也不是很好。你想要：

   document.getElementById('date').addEventListener('change', function () { .. });
   

   这更不那么唐突，并且允许多个脚本将事件侦听器绑定到同一元素。同样，在复杂的现代场所中，您可以拥有的最高优先事项之一是确保没有人踩到别人的脚。change你永远不知道未来还有谁可能会对该元素的事件感兴趣。

3. 内联编写的代码仍然比其他地方要多。更长的 HTML 代码。HTML 已经非常冗长了。任何可以移动到其他地方的东西都应该移动。减少任何一个特定文件中的代码量本身就是一门艺术，对于可读性也很重要。是的，它“只是又一个属性”......在所有其他属性和元素以及您也无法避免的内联声明之上。它只是堆积起来，这就是代码变得混乱、不可读和不可维护的原因。

4. 可重用性：document.getElementById(..).addEventListener可以在外部文件中写入一次，并在许多不同的页面上自动重用。<.. onclick="..">每次都需要重复写入。干燥你的代码。

对于小型项目来说，这通常并不重要。但同样，网站变得越来越复杂。业务需求需要不断变化。只是又一个分析脚本，只是又一个基于 Javascript 的社交小部件，现在将其全部更改回来，现在保持所有依赖项版本同步，现在再次将其全部删除并为下周发布的 2.0 重新设计。与其他 10 个人并行完成这一切，无需在每次构建时互相破坏代码，也不需要长时间解决 git-merge 冲突。在这样的环境中，每一点解耦、间接和灵活性都会有所帮助。

既然你提到了 Angular：

Angular 通过采用完全不同的模板解析模型来避免其中一些问题。当您编写 时onclick=foo，您需要绑定到全局函数名称。然而，当 Angular 这样做时ng-click=foo，foo是 ng 范围内的本地范围实体。这不是一个全球性的名字。Angular 将控制器和视图分开，控制器本质上公开了$scope视图可以使用的对象上的特定 API；只要保留指定的 API 契约（意味着只要对象$scope保留相同的属性），控制器和视图仍然可以互换。

所有ng指令都根据自定义范围和评估引擎进行评估，这与 Javascript 的默认操作方式没有太大关系。