3

我需要使用 javascript 从我的网站访问一般信息。到目前为止，我有以下选择：

  • 使用 html 元素：<input type="hidden" value="MyValue"/>

  • 在现有 html 元素中使用自定义属性：<div id="HtmlElement" myattr="MyValue"></div>然后使用document.getElementById("HtmlElement").getAttribute("myattr")

  • 在现有 html 元素中使用 data 属性：<div id="HtmlElement" data-myattr="MyValue"></div>然后使用jQuery("#HtmlElement").data("myattr")

我想知道使用任一选项有什么好处。

我不喜欢使用隐藏输入，因为我不喜欢包含信息的松散 html 元素的想法。但是由于我需要它来显示一般信息，而不是与页面中现有 html 元素相关的信息，所以它看起来还不错。

另一方面，我不喜欢滥用外部库，但在我的情况下，我已经在我的站点中加载了 jQuery，所以我并不是为了这个而加载整个库。

最后，即使是面团性能也是一个问题，在我的情况下，如果它是最快的解决方案，它不会有太大的不同。

4

1 回答 1

12

我会选择数据属性，因为这就是它们的用途，现代浏览器有一个用于访问它们的本机 api，同时仍然允许非现代浏览器作为自定义属性访问它们。

给定这个html：

<div data-foo="bar"></div>

// modern browser:
foo = document.getElementByID("myelementid").dataset.foo;

// older browser:
foo = document.getElementByID("myelementid").getAttribute("data-foo");

// jQuery (all browsers)
foo = $("#myelementid").data("foo");

请注意，如果您的数据属性是data-foo-bar，则输入dataset和.data将是fooBar

正如 sdespont 所提到的，数据应该与您存储它的元素相关。

更新：
同样重要的是要注意，您还可以使用 .attr 方法获取数据属性的值，但是两者之间有一个非常重要的区别。使用 .data 获取数据属性的值将尝试将属性的值解析为正确的 javascript类型，例如，如果可以将其转换为 int，则会将其转换为 int。如果它可以转换为对象或数组，它将被转换为对象或数组。如果您改为使用.attr()，则可以确定您将始终拥有一个字符串。

可能还值得一提的是，.attr()应该优先使用 using ，.data()除非您特别需要 by 给出的功能，.data()因为通过 using .data()，将为该元素及其数据创建数据缓存，除非您实际打算使用，否则不需要.data()多次或需要提供的额外功能.data()

于 2013-01-09T20:43:12.623 回答