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

我一直在阅读有关 JavaScript 的一些良好实践，其中之一是不引人注目的 JavaScript http://en.wikipedia.org/wiki/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 ... */}); or app.action = function () {/* ... change ... */}.

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

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

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

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

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

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

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

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

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

既然你提到了 Angular：

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

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