javascript - 使用 jQuery data() 与 native javascript getAttribute 与输入隐藏

Question

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

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

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

• 在现有的 html 元素中使用数据属性:<div id="HtmlElement" data-myattr="MyValue"></div>然后使用 jQuery("#HtmlElement").data("myattr") 访问它

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

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

另一方面，我不喜欢滥用外部库，但在我的例子中，我已经在我的站点中加载了 jQuery，所以我并不是为此加载了整个库.

最后，即使面团性能始终是一个问题，在我的情况下，即使它是最快的解决方案也不会产生太大影响。

Answer 1

我会选择数据属性，因为这就是它们的用途，现代浏览器有一个本地 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中的key将是 fooBar

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

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

---

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

提供的额外功能