在前端开发中，JavaScript 是必不可少的一部分。但是，在编写 JavaScript 代码时，我们需要考虑如何将其与 HTML 和 CSS 相结合。这就涉及到两个概念：Obtrusive JavaScript（侵入式 JavaScript）和 Unobtrusive JavaScript（非侵入式 JavaScript）。本文将详细介绍它们之间的区别，并提供示例代码和指导意义。
Obtrusive JavaScript
Obtrusive JavaScript 是指依赖于 HTML 文档结构和样式的 JavaScript 代码。这种代码通常会直接放在 HTML 页面中或者通过 HTML 标签的事件处理函数来执行。例如，以下代码就是一个 Obtrusive JavaScript 的例子：
<button onclick="alert('Hello World!')">Click me</button>这段代码添加了一个按钮元素，并在该按钮被点击时弹出一个警告框。这段代码使用了 HTML 的 onclick 属性来绑定 JavaScript 代码，从而实现事件处理。虽然这种方式很容易实现，但它的缺点也很明显：
- 难以维护：当页面中有大量的 JavaScript 代码时，将代码散布在 HTML 页面中会使代码变得难以维护和理解。
- 耦合性强：Obtrusive JavaScript 的代码和 HTML 结构紧密耦合，修改其中一个可能会影响其他部分的功能和样式。
- 可访问性差：使用 HTML 属性来绑定 JavaScript 事件处理函数会使得屏幕阅读器无法识别这些事件，从而影响页面的可访问性。
Unobtrusive JavaScript
与之相反，Unobtrusive JavaScript 是指不依赖于 HTML 文档结构和样式的 JavaScript 代码。这种代码通常是通过 JavaScript 来绑定 HTML 元素的事件处理函数，而不是通过 HTML 属性来实现。例如，以下代码就是一个 Unobtrusive JavaScript 的例子：
<button id="myButton">Click me</button>
// 获取按钮元素并添加事件处理函数
document.getElementById('myButton').addEventListener('click', function() {
alert('Hello World!');
});这段代码与 Obtrusive JavaScript 的例子相比，只是将事件处理函数从 HTML 属性移到了 JavaScript 中。此外，它还使用了一个 ID 属性来标识该按钮元素，以便在 JavaScript 中获取它。这种方式的优点包括：
- 易于维护：将 JavaScript 代码与 HTML 页面分离可以使代码更易于维护和理解。
- 低耦合性：Unobtrusive JavaScript 的代码不依赖于 HTML 结构和样式，可以更容易地修改和重构。
- 更好的可访问性：使用 JavaScript 绑定事件处理函数可以使得页面更加容易被屏幕阅读器和其他辅助工具所识别。
总结
Obtrusive JavaScript 和 Unobtrusive JavaScript 是两种不同的编写 JavaScript 代码的方式。Obtrusive JavaScript 依赖于 HTML 文档结构和样式，使用 HTML 属性来绑定事件处理函数；而 Unobtrusive JavaScript 则不依赖于 HTML 文档结构和样式，使用 JavaScript 来绑定事件处理函数。在实际开发中，应该尽可能地使用 Unobtrusive JavaScript 来编写代码，以提高代码的可维护性、可重用性和可访问性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26978