Javascript 引人注目和不引人注目的javascript之间的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8392374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between obtrusive and unobtrusive javascript
提问by well actually
What is the difference between obtrusive and unobtrusive javascript - in plain english. Brevity is appreciated. Short examples are also appreciated.
突兀和不突兀的 javascript 之间有什么区别 - 纯英语。简洁是值得赞赏的。简短的例子也很受欢迎。
采纳答案by Incognito
I don't endorse this anymore as it was valid in 2011 but perhaps not in 2018 and beyond.
我不再认可它，因为它在 2011 年有效，但可能不会在 2018 年及以后有效。
Separation of concerns.Your HTML and CSS aren't tied into your JS code. Your JS code isn't inline to some HTML element. Your code doesn't have one big function (or non-function) for everything. You have short, succinct functions.
关注点分离。你的 HTML 和 CSS 没有绑定到你的 JS 代码中。您的 JS 代码未内联到某些 HTML 元素。你的代码没有一个大功能（或非功能）。你有简短的功能。
Modular.This happens when you correctly separate concerns. Eg, Your awesome canvas animation doesn't need to know how vectors work in order to draw a box.
模块化的。当您正确分离关注点时，就会发生这种情况。例如，你很棒的画布动画不需要知道向量是如何工作的来绘制一个盒子。
Don't kill the experienceif they don't have JavaScript installed, or aren't running the most recent browsers-- do what you can to gracefully degrade experience.
如果他们没有安装 JavaScript，或者没有运行最新的浏览器，不要扼杀体验——尽你所能优雅地降低体验。
Don't build mountains of useless codewhen you only need to do something small. People endlessly complicate their code by re-selecting DOM elements, goofing up semantic HTML and tossing numbered IDs in there, and other strange things that happen because they don't understand the document model or some other bit of technology-- so they rely on "magic" abstraction layers that slow everything down to garbage-speed and bring in mountains of overhead.
当您只需要做一些小事情时，不要构建大量无用的代码。人们通过重新选择 DOM 元素、弄乱语义 HTML 并在其中抛出编号 ID 以及其他奇怪的事情，因为他们不了解文档模型或其他一些技术而不断地使他们的代码复杂化——所以他们依赖“神奇”的抽象层将一切降低到垃圾速度并带来大量开销。
回答by Joe
No javascript in the markup is unobtrusive:
标记中没有 javascript 是不引人注目的：
Obtrusive:
突兀的：
<div onclick="alert('obstrusive')">Information</div>
Unobtrusive:
不显眼：
<div id="informationHeader">Information</div>
window.informationHeader.addEventListener('click', (e) => alert('unobstrusive'))
回答by Matt
- Separation of HTML and JavaScript (define your JavaScript in external JavaScript files)
- Graceful degradation (importantparts of the page still work with JavaScript disabled).
- HTML 和 JavaScript 的分离（在外部 JavaScript 文件中定义您的 JavaScript）
- 优雅降级（页面的重要部分仍然可以在禁用 JavaScript 的情况下工作）。
For a long-winded explanation, checkout the Wikipedia pageon the subject.
回答by Dave Newton
To expand on Mike's answer: using UJS behavior is added "later".
扩展迈克的回答：“稍后”添加使用 UJS 行为。
<div id="info">Information</div>
... etc ...
// In an included JS file etc, jQueryish.
$(function() {
$("#info").click(function() { alert("unobtrusive!"); }
});
UJS may also imply gentle degradation (my favorite kind), for example, another means to get to the #infoclick functionality, perhaps by providing an equivalent link. In other words, what happens if there's no JavaScript, or I'm using a screen reader, etc.
UJS 也可能意味着温和的退化（我最喜欢的那种），例如，另一种获得#info点击功能的方法，也许是通过提供等效的链接。换句话说，如果没有 JavaScript，或者我正在使用屏幕阅读器等，会发生什么？
回答by nnnnnn
unobtrusive- "not obtrusive; inconspicuous, unassertive, or reticent."
unobtrusive- “不引人注目；不显眼、不自信或沉默寡言。”
obtrusive- "having or showing a disposition to obtrude, as by imposing oneself or one's opinions on others."
突兀的-“具有或表现出突兀的倾向，例如将自己或自己的观点强加于他人。”
obtrude- "to thrust (something) forward or upon a person, especially without warrant or invitation"
obtrude- “将（某物）向前或推向某人，尤其是在没有保证或邀请的情况下”
So, speaking of imposing one's opinions, in my opinion the most important part of unobtrusive JavaScript is that from the user's point of viewit doesn't get in the way. That is, the site will still work if JavaScript is turned off by browser settings. With or without JavaScript turned on the site will still be accessible to people using screen readers, a keyboard and no mouse, and other accessibility tools. Maybe (probably) the site won't be as "fancy" for such users, but it will still work.
所以，说到强加自己的意见，在我看来，不引人注目的 JavaScript 最重要的部分是，从用户的角度来看，它不会妨碍。也就是说，如果浏览器设置关闭了 JavaScript，该站点仍然可以工作。无论是否打开 JavaScript，使用屏幕阅读器、键盘和鼠标以及其他辅助工具的人仍然可以访问该站点。也许（可能）该网站对这些用户来说不会那么“花哨”，但它仍然可以工作。
If you think in term's of "progressive enhancement" your site's core functionality will work for everybody no matter how they access it. Then for users with JavaScript and CSS enabled (most users) you enhance it with more interactive elements.
如果您认为在“渐进增强”方面，您网站的核心功能将适用于每个人，无论他们如何访问它。然后，对于启用了 JavaScript 和 CSS 的用户（大多数用户），您可以使用更多交互元素对其进行增强。
The other key "unobtrusive" factor is "separation of concerns" - something programmers care about, not users, but it can help stop the JavaScript side of things from obtruding on the users' experience. From the programmer's point of view avoiding inline script does tend to make the markup a lot prettier and easier to maintain. It's generally a lot easier to debug script that isn't scattered across a bunch of inline event handlers.
另一个关键的“不显眼”因素是“关注点分离”——程序员关心的东西，而不是用户，但它可以帮助阻止 JavaScript 方面的事情突显用户体验。从程序员的角度来看，避免内联脚本确实会使标记更漂亮，更易于维护。调试不分散在一堆内联事件处理程序中的脚本通常要容易得多。
