突兀与不引人注目的javascript之间的区别

时间:2011-12-05 21:50:23

标签: javascript unobtrusive-javascript

突出和不引人注目的javascript有什么区别 - 用简单的英语。简洁是值得赞赏的。简短的例子也很受欢迎。

6 个答案:

答案 0 :(得分:36)

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

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

<强>模块化。 当您正确分离问题时会发生这种情况例如,你真棒的画布动画不需要知道矢量如何工作以绘制框。

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

当你只需要做一些小事时,不要建造无用代码的山峰。人们通过重新选择DOM元素,搞砸语义HTML并在其中抛出编号ID以及其他因为不了解文档模型或其他技术而发生的奇怪事情而无休止地使代码复杂化 - 因此他们依赖于“神奇的”抽象层,可以将一切都降低到垃圾速度,并带来大量的开销。

答案 1 :(得分:31)

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

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

突兀:

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

答案 2 :(得分:10)

  1. 分离HTML和JavaScript(在外部JavaScript文件中定义JavaScript)
  2. 优雅降级(重要的部分页面仍可在禁用JavaScript的情况下使用)。
  3. 对于冗长的解释,请查看主题的Wikipedia page

答案 3 :(得分:3)

要扩展Mike的答案:使用UJS行为会在“稍后”添加。

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

... etc ...

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

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

答案 4 :(得分:2)

不引人注目 - “不突兀;不引人注意,不自信,或沉默寡言。”

突兀 - “通过强迫自己或某人对别人的意见来表达或表现出一种倾向。”

obtrude - “推动(某事)前进或某人,特别是没有逮捕令或邀请”

所以,谈到强加一个人的意见,在我看来,不引人注目的JavaScript最重要的部分是从用户的角度来看它不会妨碍。也就是说,如果通过浏览器设置关闭JavaScript,该网站仍然可以正常工作。无论是否启用了JavaScript,使用屏幕阅读器,键盘和鼠标以及其他辅助工具的用户仍然可以访问该网站。也许(可能)该网站不会像这样的用户那样“花哨”,但它仍然有用。

如果您认为在“渐进增强”这个词中,您的网站的核心功能将适用于所有人,无论他们如何访问它。然后,对于启用了JavaScript和CSS的用户(大多数用户),您可以使用更多交互式元素来增强它。

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

答案 5 :(得分:0)

即使您不使用 ruby​​ on rails,these 前几段仍然很好地解释了不引人注目的 javascript 的好处。

总结如下:

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