使用jQuery data()vs native javascript getAttribute vs input hidden

Question

我需要使用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,所以这并不像我为此加载整个库.

最后,即使是面团性能也是一个问题,在我的情况下,如果这是最快的解决方案,它将不会产生太大的影响.

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将是fooBar

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

更新:
同样重要的是要注意,您也可以使用.attr方法获取数据属性的值,但两者之间存在非常重要的差异.使用.data获取数据属性的值将尝试将属性的值解析为正确的javascript 类型,例如,如果它可以转换为int,则它将转换为int.如果它可以转换为对象或数组,它将被转换为对象或数组.如果你改为使用.attr(),你可以确定你总是有一个字符串.

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