提问人：well actually 提问时间：12/6/2011 最后编辑：divibisanwell actually 更新时间：1/26/2021 访问量：35118
突兀式和不突兀式 javascript 之间的区别
Difference between obtrusive and unobtrusive javascript
答：
39赞
Joe
12/6/2011
#1
标记中没有 javascript 是不显眼的：
突兀：
<div onclick="alert('obstrusive')">Information</div>
不显眼：
<div id="informationHeader">Information</div>
window.informationHeader.addEventListener('click', (e) => alert('unobstrusive'))
评论
7赞
nnnnnn
12/6/2011
不过，这只是从程序员的角度来看：你可以把所有东西都放在一个单独的JS脚本文件中，但仍然有一个对用户来说非常难以理解的网站......
2赞
crmpicco
7/28/2015
@nnnnnn StackOverflow 是一个面向程序员的网站。
0赞
nnnnnn
7/29/2015
@crmpicco - 是的，我知道。我的观点是，“不显眼的 Javascript”的概念更多的是关于它对用户的影响，而不是它对程序员的影响。用户不在乎 html 中是否混合了 JS，他们只关心该网站是否与他们的浏览器兼容。
0赞
Honinbo Shusaku
8/20/2015
@nnnnnn 如此不显眼的样子是：在启用 JS 的页面上，我有文本字段过滤器，以及表单的 JS 验证检查。默认情况下，该按钮是隐藏的，请使用 JS 操作来制作它。在禁用 JS 的页面上，该按钮永远不会显示，因此禁止用户从前端提交未经验证的表单。这是一个正确的例子吗？onsubmitsubmitdisplay:block;
2赞
nnnnnn
8/20/2015
@Abdul - 前端验证是一个不错的功能，但即使你有它，你也必须始终在后端进行验证，以允许恶意用户故意绕过你的 JS。不显眼的方法是让 JS 使 UI 变得更好（如果需要，包括验证），但在关闭 JS 时仍然回退到带有后端验证的传统表单提交。也就是说，确保你的页面的基本功能在没有 JS 的情况下工作，然后应用 JS 使其更好/更漂亮 - 你的大多数用户将看到更漂亮的版本。
10赞
Matt
12/6/2011
#2
- HTML 和 JavaScript 的分离（在外部 JavaScript 文件中定义 JavaScript）
- 优雅降级（页面的重要部分在禁用 JavaScript 的情况下仍可正常工作）。
有关冗长的解释，请查看有关该主题的维基百科页面。
评论
0赞
12/6/2011
使用内联 DOM 0 处理程序时，页面仍然可以正常降级。
0赞
Matt
12/6/2011
@MattMcDonald：我不是说他们不能？但随后你打破了 HTML 和 JavaScript 分离的原则
0赞
12/6/2011
那么你的答案需要更清楚。
0赞
Honinbo Shusaku
8/20/2015
你说页面的重要部分......如果它是一个表单并且非常需要验证呢？所以不显眼的样子是：在启用 JS 的页面上，我有文本字段过滤器，以及表单的 JS 验证检查。默认情况下，该按钮是隐藏的，请使用 JS 操作来制作它。在禁用 JS 的页面上，该按钮永远不会显示，因此禁止用户从前端提交未经验证的表单。这是一个正确的例子吗？onsubmitsubmitdisplay:block;
1赞
Kevin
4/28/2016
@Abdul 不，在不显眼的方法中，用户仍然可以提交表单而无需任何 js 验证（如果禁用了 JS），以便在服务器中验证表单。请记住，客户端验证用于更好的用户体验，并且应该始终进行服务器端验证。
3赞
Dave Newton
12/6/2011
#3
扩展 Mike 的回答：使用 UJS 行为是“稍后”添加的。
<div id="info">Information</div>
... etc ...
// In an included JS file etc, jQueryish.
$(function() {
$("#info").click(function() { alert("unobtrusive!"); }
});
UJS 也可能意味着温和的降级（我最喜欢的那种），例如，获得点击功能的另一种方法，也许是通过提供等效的链接。换句话说，如果没有 JavaScript，或者我使用的是屏幕阅读器等，会发生什么。#info
评论
1赞
austincheney
12/6/2011
我认为jQuery对JavaScript来说很突兀。我宁愿只在静态 HTML 中看到事件，因为它们在动态生成的 DOM 中也是一样的。
0赞
Dave Newton
12/6/2011
@austincheney 这与jQuery没有任何关系;UJS 是框架中立的。
36赞
Incognito
12/6/2011
#4
我不再认可这一点，因为它在 2011 年有效，但在 2018 年及以后可能无效。
关注点分离。您的 HTML 和 CSS 不绑定到 JS 代码中。您的 JS 代码未内联到某些 HTML 元素。你的代码没有一个大函数（或非函数）来表示所有事情。你有简短、简洁的函数。
模块 化。当您正确地分离关注点时，就会发生这种情况。例如，您出色的画布动画不需要知道矢量是如何工作的，就可以绘制一个盒子。
如果他们没有安装 JavaScript，或者没有运行最新的浏览器，请不要扼杀体验 - 尽你所能优雅地降低体验。
当你只需要做一些小事时，不要堆积如山的无用代码。人们通过重新选择 DOM 元素、笨拙地编写语义 HTML 和将编号的 ID 扔进去，以及其他一些奇怪的事情，这些事情会因为他们不了解文档模型或其他一些技术而发生——所以他们依赖于“神奇”的抽象层，这些抽象层会把一切都减慢到垃圾速度，并带来大量的开销。
评论
0赞
Honinbo Shusaku
8/20/2015
“不要堆积如山的垃圾”——你能举一个小例子或示范吗？
1赞
Honinbo Shusaku
8/20/2015
是在每个文本字段上单独添加类似的东西，混合到 HTML 中而不是使用 jQuery，以及使用多个选择器并一次完成吗？onkeypress="someFilter();"
1赞
Incognito
5/16/2018
我不再认可这一点，因为它在 2011 年有效，但在 2018 年及以后可能无效。
7赞
amesh
5/24/2018
@Incognito 2018 年发生了哪些重大变化，使突兀的 JavaScript 有效？
1赞
collimarco
9/16/2021
@amesh 没什么...只是趋势发生了变化。基本上，每个人都在提倡不显眼的 Javascript。然后 React、Vue 等开始流行起来，它们使用的语法更类似于突兀的 Javascript。所以这是一个偏好问题，两种解决方案各有利弊。
2赞
nnnnnn
12/6/2011
#5
不显眼 - “不突兀;不起眼、不自信或沉默寡言。
突兀 - “具有或表现出突兀的倾向，就像将自己或自己的意见强加给他人一样。
突兀 - “向前或向某人推（某物），尤其是在没有搜查令或邀请的情况下”
所以，说到强加自己的意见，在我看来，不显眼的 JavaScript 最重要的部分是，从用户的角度来看，它不会妨碍。也就是说，如果浏览器设置关闭了 JavaScript，该网站仍将运行。无论是否启用 JavaScript，使用屏幕阅读器、键盘和无鼠标以及其他辅助工具的用户仍然可以访问该网站。也许（可能）该网站对于此类用户来说不会那么“花哨”，但它仍然会起作用。
如果您认为“渐进式增强”一词，则您网站的核心功能将适用于每个人，无论他们如何访问它。然后，对于启用了 JavaScript 和 CSS 的用户（大多数用户），您可以使用更多交互元素来增强它。
另一个关键的“不显眼”因素是“关注点分离”——程序员关心的是，而不是用户关心的东西，但它可以帮助阻止 JavaScript 方面的东西干扰用户体验。从程序员的角度来看，避免内联脚本确实会使标记更漂亮、更易于维护。通常，调试不分散在一堆内联事件处理程序中的脚本要容易得多。
0赞
stevec
1/26/2021
#6
即使你不做 ruby on rails，这前几段仍然很好地解释了不显眼的 javascript 的好处。
总结如下：
- 组织：你的大部分 javascript 代码将与你的 HTML 和 CSS 分开，因此你确切地知道在哪里可以找到它
- 干燥/效率：由于 javascript 存储在您网站上的任何特定页面之外，因此很容易在许多页面中重复使用它。换句话说，您不必将相同的代码复制/粘贴到许多不同的位置（至少远没有其他代码那么多）
- 用户体验：由于您的代码可以移动到其他文件中，因此这些文件可以存储在客户端缓存中，并且只下载一次（在您网站的第一页上），而不需要在您网站上的每次页面加载时获取 javascript
- 易于最小化、串联：由于您的 javascript 不会分散在 HTML 中，因此通过最小化和连接 javascript 的工具可以很容易地使其文件大小更小。较小的 javascript 文件意味着更快的页面加载速度。
- 混淆：你可能不在乎这一点，但通常缩小和连接javascript会使它更难阅读，所以如果你不希望人们窥探你的javascript并弄清楚它的作用，并查看你的函数和变量的名称，那将会有所帮助。
- 可维护性：如果你使用的是一个框架，它可能会围绕存储 javascript 文件的位置建立约定，所以如果其他人在你的应用程序上工作，或者如果你在别人的应用程序上工作，你将能够对某些 javascript 代码的位置做出有根据的猜测
评论