问题标签 [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.

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?

0 投票
23 回答
1004945 浏览

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

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

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

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

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

0 投票
1 回答
6551 浏览

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

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

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

0 投票
4 回答
3237 浏览

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

在前世,我可能做过这样的事情:

现在使用 jQuery,我可能会做这样的事情:

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

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 吗?

0 投票
3 回答
598 浏览

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

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

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

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

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>

请帮忙。

0 投票
5 回答
2192 浏览

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

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

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

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

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

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

0 投票
2 回答
208 浏览

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

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

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

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

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,相同的函数调用多个元素,不同的函数调用不同的方法,等等。我认为自己混合内联和不显眼的方法会更困难,它会是最好采用一种或另一种方法”