引人注目和不引人注目的javascript之间的区别

IT技术 javascript unobtrusive-javascript
2021-01-16 08:56:06

突兀和不突兀的 javascript 之间有什么区别 - 纯英语。简洁是值得赞赏的。简短的例子也很受欢迎。

6个回答

我不再认可它,因为它在 2011 年有效,但可能不会在 2018 年及以后有效。

关注点分离。你的 HTML 和 CSS 没有绑定到你的 JS 代码中。您的 JS 代码未内联到某些 HTML 元素。你的代码没有一个大功能(或非功能)。你有简短的功能。

module化的。 当您正确分离关注点时,就会发生这种情况。例如,您出色的画布动画不需要知道向量如何工作才能绘制一个框。

如果他们没有安装 JavaScript,或者没有运行最新的浏览器,请不要扼杀体验——尽你所能优雅地降低体验。

当您只需要做一些小事时,不要构建大量无用的代码人们通过重新选择 DOM 元素、弄乱语义 HTML 并在其中抛出编号 ID 以及其他奇怪的事情,因为他们不了解文档模型或其他一些技术而不断地使他们的代码复杂化——所以他们依赖“神奇”的抽象层将一切降低到垃圾速度并带来大量开销。

“不要建造垃圾山”——你能举一个小例子或示范吗?
2021-03-17 08:56:06
@Incognito 2018 年发生了哪些重大变化,这使得突兀的 javascript 有效?
2021-03-29 08:56:06
我不再认可它,因为它在 2011 年有效,但可能不会在 2018 年及以后有效。
2021-03-30 08:56:06
@amesh 没什么……只是趋势改变了。在过去,基本上每个人都在提倡不引人注目的 Javascript。然后 React、Vue 等开始流行,它们使用的语法更类似于侵入式 Javascript。所以这是一个偏好问题,两种解决方案都有利有弊。
2021-04-08 08:56:06
是不是要onkeypress="someFilter();"在每个文本字段上单独添加类似的内容,混合到 HTML 中而不是使用 jQuery,以及使用多个选择器并一次性完成所有操作?
2021-04-09 08:56:06

标记中没有 javascript 是不引人注目的:

突兀的

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

不显眼

<div id="informationHeader">Information</div>
window.informationHeader.addEventListener('click', (e) => alert('unobstrusive'))
@nnnnnn StackOverflow 是一个面向程序员的网站。
2021-03-23 08:56:06
不过,这完全是从程序员的角度来看的:您可以将所有内容都放在一个单独的 JS 脚本文件中,并且仍然有一个对用户来说非常麻烦的站点......
2021-03-29 08:56:06
@crmpicco - 是的,我知道。我的观点是,“非侵入式 Javascript”的概念更多是关于它对用户的影响,而不是它对程序员的影响。用户并不关心 html 中是否混入了 JS,他们只关心网站是否与他们的浏览器兼容。
2021-03-30 08:56:06
@nnnnnn 所以不引人注目的应该是:在启用JS 的页面上,我有文本字段过滤器和onsubmit表单的 JS 验证检查submit默认情况下按钮是隐藏的,请display:block;使用 JS 操作进行设置。禁用JS 的页面上,按钮永远不会显示,因此不允许用户提交未经前端验证的表单。这是一个正确的例子吗?
2021-03-30 08:56:06
@Abdul - 前端验证是一个很好的功能,但即使您拥有它,您也必须始终在后端进行验证,以允许故意绕过您的 JS 的恶意用户。不显眼的方法是让 JS 使 UI 变得更好(如果需要,包括验证),但在 JS 关闭时仍然退回到带有后端验证的传统表单提交。也就是说,确保您的页面的基本、基本功能在没有 JS 的情况下也能正常工作,然后应用 JS 使其更好/更漂亮——并且您的大多数用户都会看到更漂亮的版本。
2021-04-06 08:56:06
  1. HTML 和 JavaScript 的分离(在外部 JavaScript 文件中定义您的 JavaScript)
  2. 优雅降级(页面的重要部分仍然可以在禁用 JavaScript 的情况下工作)。

有关冗长的解释,请查看有关该主题维基百科页面

那么你的答案需要更清晰。
2021-03-18 08:56:06
使用内联 DOM 0 处理程序时,页面仍然可以正常降级。
2021-03-21 08:56:06
@Abdul 不,在不显眼的方法中,用户仍然可以在没有任何 js 验证的情况下提交表单(如果 JS 被禁用),以便在服务器中验证表单。请记住,客户端验证用于更好的用户体验,并且应该始终有服务器端验证。
2021-03-25 08:56:06
@MattMcDonald:我不是说他们不能?但是你打破了 HTML 和 JavaScript 分离的原则
2021-04-06 08:56:06
你说页面的重要部分......如果它是一个表单并且需要大量验证呢所以不显眼的应该是:在启用JS 的页面上,我有文本字段过滤器和onsubmit表单的 JS 验证检查submit默认情况下按钮是隐藏的,请display:block;使用 JS 操作进行设置。禁用JS 的页面上,按钮永远不会显示,因此不允许用户提交未经前端验证的表单。这是一个正确的例子吗?
2021-04-06 08:56:06

扩展迈克的回答:“稍后”添加使用 UJS 行为。

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

... etc ...

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

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

我认为 jQuery 对 JavaScript 来说太突兀了。我宁愿只在静态 HTML 中看到那里的事件,因为它们在动态生成的 DOM 中将是相同的。
2021-03-14 08:56:06
@austincheney 这与 jQuery 没有任何关系;UJS 是框架中立的。
2021-03-19 08:56:06

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

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

obtrude - “将(某物)向前或推向某人,尤其是在没有保证或邀请的情况下”

所以,说到强加自己的意见,在我看来,不显眼的 JavaScript 最重要的部分是从用户的角度来看它不会妨碍。也就是说,如果浏览器设置关闭了 JavaScript,该站点仍然可以工作。无论是否打开 JavaScript,使用屏幕阅读器、键盘和鼠标以及其他辅助工具的人仍然可以访问该站点。也许(可能)该网站对这些用户来说不会那么“花哨”,但它仍然可以工作。

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

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