问题标签 [unobtrusive-javascript]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

515 问题
Newest
Active
Bountied
318
Unanswered
0 投票
5 回答
458 浏览

ajax - How important do you think Progressive Enhancement is?

Progressive Enhancement is a web development methodology that not only allows greater portability and accessibility but in my opinion, makes the development process easier.

What I want is to know what the rest of the community think of this approach.

In particular: What do you believe is the minimum set of technologies that a web application should support?

zobier
0 投票
23 回答
1004945 浏览

javascript - 动态创建元素的事件绑定？

我有一些代码循环遍历页面上的所有选择框并将.hover事件绑定到它们以对它们的宽度进行一些调整mouse on/off。

这发生在页面准备就绪并且工作正常。

我遇到的问题是，我在初始循环之后通过 Ajax 或 DOM 添加的任何选择框都不会绑定事件。

我找到了这个插件（jQuery Live Query Plugin），但是在我使用插件向我的页面添加另一个 5k 之前，我想看看是否有人知道这样做的方法，无论是直接使用 jQuery 还是通过其他选项。

Eli
0 投票
1 回答
6551 浏览

javascript - 带有 jquery 的不显眼的 javascript - 10 分钟的好教程？

我正在寻找一个很好的 10 分钟介绍使用 JQuery 的 Unobtrusive Javascript。我对这个概念完全陌生，我想看看事件绑定等是如何工作的。

作为一些背景，我正在寻找一个类似于我们在 SO 上的“删除这个标签”系统。看源码，没看到什么js，就是一个img标签。这让我认为必须有外部 js 绑定到 click 事件。我想知道怎么做，我想要一个教我怎么做的教程！

Micah
0 投票
4 回答
3237 浏览

jquery - 将数据关联到 jQuery 的 DOM 元素

在前世，我可能做过这样的事情：

现在使用 jQuery，我可能会做这样的事情：

除了使用 alt 属性将数据从 DOM 传递到 jQuery 感觉像 hack，因为这不是它的预期目的。在 DOM 中存储/隐藏数据以供 jQuery 访问的最佳实践是什么？

Soldarnal
0 投票
2 回答
1126 浏览

javascript - Low Pro Prototype DOM Builder 可以在 IE 中使用吗？

Dan Webb 对 Prototype 的Low Pro UJS 扩展提供了以下优雅的 DOM Builder：

虽然这在 Firefox 和 Safari 中对我们来说就像做梦一样，但在 IE 6 和 IE7 中却令人欣喜若狂，并出现错误“对象不支持此属性或方法”

了解 Dan Webb 的 DOM Builder 可能会做什么来包装与 IE 不兼容的 Element.new 吗？

Abie
0 投票
3 回答
598 浏览

javascript - 将变量从服务器后端传递给 javascript 的正确方法？

我需要将 php 知道的变量传递给我的 javascript 代码，我想知道正确的方法是什么。

我已经知道我可以将其添加到页面生成中：

但我发现这种方法比我想要的更突兀。我想知道是否有更好的方法来做到这一点，还是我不得不将内联 javascript 代码注入到视图脚本中？

OverloadUT
0 投票
1 回答
1760 浏览

javascript - jQuery切换增值税切换

我想实现一个增值税切换器，如您在http://aria.co.uk右上角所见，尽管我只想在客户端执行此操作。

下面是我想出的东西，虽然我需要：

  • 来回切换增值税（我的例子只是一种方式）
  • 保存并从 cookie 中读取切换状态以保持持久性

  • 让它不显眼/仅当 JS 可用时才显示切换链接

    <html>

    <head>

    <title>VAT Switch</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

    <script type="text/javascript">

    function VATswitch(){

    var price = $(".price strong span").text();

    price = price * 10 / 12;

    $(".price strong span").text(price);

    var excl_incl = $(".price em").text();

    excl_incl = "(excl. VAT)";

    $(".price em").text(excl_incl);

    } </script>

    </head>

    <body>

    <a href="#" onclick="VATswitch();" id="vat_switch">Switch VAT</a>

    <p class="price">

    <strong>£<span>120</span></strong>

    <em>(incl. VAT)</em>

    </p>

    </body>

    </html>

请帮忙。

Frank
0 投票
5 回答
2192 浏览

javascript - 表明我的 JS 脚本已加载的最佳方式

我有一个 JS 脚本，它将托管在我的服务器上，其他人将嵌入到他们的 html 中，即

我的脚本声明了一个具有一堆可用作 Javascript 的属性的对象Object()，即

由于加载时间差异，我似乎需要表明我的脚本中的“真棒”对象已准备好。我需要它独立存在，因此不依赖于特定的 JS 框架。

我是否需要发布我自己的自定义 JS 事件，或者我的脚本已加载这一简单事实是否被现有页面级事件之一捕获？我还应该怎么做？

更新：作为参考，如果我将 JS 包含在从 运行的 HTML 页面中http://mysite.example.com，则 Awesome 对象可用并已填充。当 JS 文件包含在另一个域中时，该对象在运行时未定义。

jro
0 投票
2 回答
208 浏览

javascript - 为 Web 开发人员提供一个 JavaScript 库

这是一个基础广泛的问题，围绕交付其他 Web 开发人员将在其网站上使用的 javascript 库。这是我的图书馆的范围：

  • 我正在提供以 JS 文件形式提供的数据服务。类似的实现是谷歌分析。
  • 将永远由我主持。开发人员将简单地使用 <script> 标签上的@src 属性。
  • 我的库由一个具有一组属性的对象（我们现在称之为 Jeff）组成。没有方法，只有价值观。
  • 该库不是静态的，而是基于会话的。我们提供的数据点只能在请求时确定。（想想通常通过 AJAX 调用的 Web 服务，在页面加载时可用。）
  • 这不是免费服务；实施者将为使用付费。
  • 将始终返回 Jeff 对象，但由于在我的服务器上发生的运行时错误，并非所有属性都可能被填充。Jeff 对象包括指示成功/失败的响应部分和描述。

现在，我的问题是：就如我所描述的以 JS 库的形式提供服务的最佳实践而言，什么是理想的？标准谷歌搜索并没有给我太多的帮助，但是非常感谢对指南的引用。

jro
0 投票
4 回答
6732 浏览

jquery - JQuery：为什么不显眼的 JavaScript / Document Ready 函数而不是 OnClick 事件？

我刚刚开始研究 JQuery。目前我的 Web 应用程序中没有任何 AJAX。

我的 HTML 中现有的 JavaScript 如下所示：

这会显示 [添加] 和 [查找] 的按钮。对于 Find ，必须提交表单，我使用 MyFormSubmit() 验证数据，为页面添加视觉效果，然后 POST 数据。

我可以为 Find 按钮添加一个 CLASS 或 ID，在 JQuery 中我可以编写如下内容：

在我对 JQuery 的“新手”理解阶段，我不明白为什么我会这样做

我的旧方法识别对象附近的方法。在用户按下按钮之前可能存在 JS 尚未加载的风险（是否存在？JS 的 LOAD 就在页面顶部）。

在加载文档之前，不会激活 JQuery Document Ready 方法（我假设保证 JS 全部存在并准备好运行？），但它将代码移动到我的 HTML 文件的单独部分 - 所以当我在 HTML 源代码中看到了 MyButtonArray DIV，我不清楚哪些对象有方法，哪些没有。

你能帮我理解我的选择是什么以及我应该注意的好处/陷阱吗？

编辑：我很满意 DOM 操作 - 例如当单击任何具有“LightBoxThumb”类的缩略图时可以出现的灯箱 - 将使用不显眼的 Javascript。

但是，我正在努力说服自己，具有特定操作的按钮应该以这种方式应用其方法。（除了对“其他地方”的单个函数调用之外，我当然不会在按钮上放置任何代码，但在我看来，这是我关于该按钮功能的最佳线索，并且 Unobtrusive Javascript 层可能会使这更加困难来确定。）

Edit2 - 接受的答案

我已经接受了 Russ Cams 的回答。它以一种有助于我了解更多关于如何以及何时使用它的方式来描述 Unobtrusive Javascript。

目前（当我有更多经验时可能会改变！）我会坚持使用 OnClick 事件来对对象进行单个、不变的操作，因为我觉得这对我来说更容易调试 - 并在出现问题时进行诊断. 对于允许单击标题列进行排序的表格上的 ZebraStripes（以及该类型的情况），我可以看到 Unobtrusive Javascript 方法的好处

Russ 的最后评论特别有帮助，在此重复：

“@Kristen - 你是对的，就像很多编程主题一样，有不止一种方法，人们会强烈地坚持他们的信念！如果我们谈论一个按钮的单一方法，我完全理解你在哪里'来自...

如果我们谈论大量的 JavaScript，相同的函数调用多个元素，不同的函数调用不同的方法，等等。我认为自己混合内联和不显眼的方法会更困难，它会是最好采用一种或另一种方法”

Kristen

12345678910