侵入式和非侵入式 javascript 之间的区别

Question

用简单的英语来说，侵入式和非侵入式 javascript 有什么区别。简洁受到赞赏。简短的例子也值得赞赏。

Answer 1

标记中的 JavaScript 不显眼：

显眼：

<div onclick="alert('obstrusive')">Information</div>

显眼：

<div id="informationHeader">Information</div>

window.informationHeader.addEventListener('click', (e) => alert('unobstrusive'))

Answer 2

我不再认可这一点，因为它在 2011 年有效，但可能在 2018 年及以后不再有效。

关注点分离。 你的 HTML 和 CSS 不会与你的 JS 绑定在一起代码。您的 JS 代码未内联到某些 HTML 元素。您的代码没有一个大函数（或非函数）来处理所有事情。你的函数简短、简洁。

模块化。
当您正确地分离关注点时，就会发生这种情况。例如，您出色的画布动画不需要知道矢量如何工作来绘制盒子。

如果他们没有安装 JavaScript，或者没有运行最新的浏览器，不要破坏体验 - 尽你所能来优雅地降低体验。

当您只需要做一些小事情时，不要构建堆积如山的无用代码。人们通过重新选择 DOM 元素、搞乱语义 HTML、在其中乱扔编号 ID，以及由于不理解文档模型或其他一些技术而发生的其他奇怪的事情，不断地使代码变得复杂——因此他们依赖于“神奇”的抽象层可以将一切速度减慢到垃圾速度，并带来大量的开销。

Answer 3

1. HTML 和 JavaScript 分离（在外部 JavaScript 文件中定义 JavaScript）
2. 优雅降级（页面的重要部分在禁用 JavaScript 的情况下仍然可以工作）。

如需冗长的解释，请查看有关该主题的维基百科页面。

Answer 4

为了扩展 Mike 的答案：使用 UJS 行为是“稍后”添加的。

<div id="info">Information</div>

... etc ...

// In an included JS file etc, jQueryish.
$(function() {
    $("#info").click(function() { alert("unobtrusive!"); }
});

UJS 也可能意味着温和的降级（我最喜欢的那种），例如，获取 #info 点击功能的另一种方法，也许是通过提供等效的链接。换句话说，如果没有 JavaScript，或者我正在使用屏幕阅读器等，会发生什么。

Answer 5

不引人注目 - “不引人注目、不引人注目、不自信或沉默寡言。”

唐突 - “具有或表现出唐突的倾向，例如将自己或自己的观点强加于他人。”

obtrude - “将（某事）推进或强加给某人，尤其是在没有授权或邀请的情况下”

因此，说到强加某人的观点，在我看来，不引人注目的 JavaScript 最重要的部分是 从用户的角度来看，它不会造成妨碍。也就是说，如果浏览器设置关闭 JavaScript，该网站仍然可以运行。无论 JavaScript 是否打开，使用屏幕阅读器、键盘（不使用鼠标）以及其他辅助工具的人们仍然可以访问该网站。也许（可能）该网站对于此类用户来说不会那么“花哨”，但它仍然可以工作。

如果您从“渐进增强”的角度考虑，您网站的核心功能将适用于每个人，无论他们如何访问它。然后，对于启用了 JavaScript 和 CSS 的用户（大多数用户），您可以使用更多交互元素来增强它。

另一个关键的“不引人注目”因素是“关注点分离”——程序员关心的事情，而不是用户关心的事情，但它可以帮助阻止 JavaScript 方面的事情干扰用户的体验。从程序员的角度来看，避免内联脚本确实会使标记更漂亮且更易于维护。通常，调试不分散在一堆内联事件处理程序中的脚本要容易得多。

Answer 6

即使您不使用 ruby​​ on Rails，这些前几段仍然提供了很好的解释不引人注目的 javascript 的好处。

总结如下：

• 组织：大部分 javascript 代码将与 HTML 和 CSS 分开，因此您确切地知道在哪里可以找到它
• 干燥/效率：因为 javascript 是由于存储在网站上任何特定页面之外，因此可以轻松地在许多页面中重复使用它。换句话说，您不必将相同的代码复制/粘贴到许多不同的位置（至少远不如您原本需要的那么多）
• 用户体验：因为您的代码可以移出到其他文件，这些文件可以存储在客户端缓存中，并且仅下载一次（在网站的首页上），而不需要在网站上的每个页面加载时获取 JavaScript
• 易于最小化、串联：因为你的javascript不会分散在 HTML 中，通过最小化和连接 javascript 的工具可以很容易地减小其文件大小。较小的 JavaScript 文件意味着更快的页面加载。
  • 混淆：您可能不关心这一点，但通常缩小和连接 javascript 会使其更难以阅读，因此如果您不希望人们窥探您的 javascript 并弄清楚什么确实如此，并且查看函数和变量的名称会有所帮助。
• 可服务性：如果您使用框架，它可能已经就存储 javascript 文件的位置建立了约定，因此如果其他人在您的应用上工作，或者如果您在其他人的应用上工作，您将能够对某些 javascript 代码的位置做出有根据的猜测