Question

我目前正在jQuerifying（如果有这样的话）我的网站。我根本不擅长JavaScript，也不擅长jQuery。面向对象在JS中传递给我，但我的网站的其余部分是面向对象的VB.net。我注意到，从一段时间以来我对jQuery的一些经验，加载特定行的页面有多么困难 - 你必须以某种方式找出什么ID，例如，提交和类似的东西。

就在最近，我尝试使用类似的东西：

<li class="catalogueItem"><a pName='" & Product.Name & "' pID='" & Product.ID & "'>" & Product.Name & "</a></li>

好吧所以这不完全相同 - 我添加了类似这样的文字控件，但是我现在没有屏幕上的代码所以我只是写了类似的东西。

无论如何，我接着尝试了以下内容：

$("li.catalogueItem").click(function() {
    $(this).html($(this).find("a").attr("pID"));
});

根据我的发现，这应该可以正常工作。所以我的问题如下： a）使用这种技术有问题吗？ b）其他人对这种技术的看法是什么？ c）在其他人的意见中使用这种技术是否可以，尽管HTML不符合W3C等？ d）任何人都可以指向一个更有效或更容易，或者甚至更难/复杂但被广泛接受的方式来做这种事情吗？

请注意，产品可能有很多属性，我可以在管理员前端使用它来通过拖放界面重新排列产品。

非常感谢提前。

此致

理查德

相当长的时间留给鲁本斯......

我不知道您之前是否曾经做过任何VB.Net，但我找不到创建服务器端脚本标签的方法，然后说出类似的内容：

ScriptTag.Controls.add(New LiteralControl("$('#" & MyDiv.clientID.toString & "').data('ProductName', '" & Product.Name & "');"))

我已经尝试过并尝试过，但我能找到的唯一方法是将脚本存储在服务器端（可能在数组中），然后覆盖页面呈现事件（此时所有脚本都将添加到数组）在一个脚本标签中输出这些，或者更可怕的是，使head标签在服务器上运行，然后每当我需要输出另一个脚本时添加一个脚本标签。无论哪种方式实现这些技术都会导致花费很长时间来实现这样的方法或者带有许多脚本标记的可怕长头标记。

我认为开发人员应尽可能遵守指南 - 因此我将脚本标记保留在它们所属的头部。

我建议的方式可以“动态”完成 - 无论是否需要脚本都会被加载（它们在母版页的head标签中指定）。

我以我建议的方式看待它的方式有很多优点，因为它更容易编码（根据我的经验）并且可以更快地编码。

有一件事发生在我身上......我在Visual Studio中看到过一些叫做ScriptManager的东西......我想知道这是否与将脚本保存在一个地方有关...也许是它的时间做一些调查...如果我想到其他任何事情，请回到这里，或者学习任何其他方法（利弊等）。

理查德

Answer 1

如果您要使用自定义属性，我会说使用data- attributes，如下所示：

<li class="catalogueItem"><a data-pName='" & Product.Name & "' data-pID='" & Product.ID & "'>" & Product.Name & "</a></li>

在HTML5 data-中，前缀属性完全此目的......但不会对HTML4文档造成任何问题（尽管它们在技术上无效）。现在您可以像这样访问它们：

$("li.catalogueItem").click(function() {
  $(this).html($(this).find("a").attr("data-pID"));
});

在即将发布的jQuery 1.5中，.data()也将look for them as a fallback，如下所示：

$("li.catalogueItem").click(function() {
  $(this).html($(this).find("a").data("pID"));
});

Answer 2

所有现代浏览器都不会抱怨使用无效HTML。那就是说，它总是困扰着我。通常会看到使用 rel 属性在HTML中存储数据。我还经常在 id 属性上添加某些内容： <a id="product-384">My Product</a>

一旦进入JavaScript / jQuery领域，最好使用jQuery的data（）方法。见http://docs.jquery.com/Data

Answer 3

正如 Cory Gagliardi 所写，最好使用jQuery.data（http://docs.jquery.com/Data）来存储和读取任何HTML节点中的数据。

使用jQuery.data方法会为您添加一些额外的代码（请参阅工作）。主要思想是您可以使用密钥将JavaScript Object存储在HTML中。

示例：

$('li.catalogueItem item-0').data('item', {id:0, name:'My Item', desc:'...'});

对于您的实际.NET代码，您将被推送为每个项目编写前面的示例。使用循环可以完成这项工作。

Answer 4

正如Nick所解释的那样，它是jQuery即将发布的功能，你应该坚持下去，因为它也是有效的HTML5代码。

但我明白你的要求是个人经验，而非技术理由。

根据我的经验，尽可能多地使用它们。

HTML从第一天开始就被打破了，它缺少很多有用的功能，但好消息是你可以在不破坏功能的情况下解决大部分问题。

我有这条规则，如果您正在构建和应用，而不是公共网站（将由广泛且未知的受众使用），并且您可以拥有受控制的环境（阅读您可以告诉应用程序用户应该使用哪种浏览器），做任何你需要做的事情来改善你的应用程序，这对客户来说更好，而且你更好地开发/维护/更新。

规格总是在变化，并且它们总是引入已经在使用的功能;）

其他人如何看待使用“自定义”属性来简化操作（在jQuery中）

4 个答案: