Question

在将我的一些现有项目从jQuery转换为普通JS时，我遇到了jQuery的.data（）实用程序的一些问题。到目前为止，我一直无法找到一种简单的JS方法，使我能够获取并检查navGlobal对象中的所有数据属性。

var navGlobal = document.querySelector('.nav-global');

if (navGlobal !== null &&
    navGlobal.data() &&
    navGlobal.data().account &&
    navGlobal.data().account.accountData &&
    navGlobal.data().account.accountData.address &&
    navGlobal.data().account.accountData.address.zip) {

    // do something

}

我尝试了什么：

最初，我以为我会用.getAttribute（）和.hasAttribute（）来检查这些数据属性是否存在。但这只会增加混乱 - 我不确定如何使用vanilla JS深入到嵌套属性（即navGlobal.data（）。account.accountData.address）。 链接.getAttribute（）并不真正起作用，因为大多数这些数据属性都附加到navGlobal的子元素，而不是navGlobal元素本身。

最好的方法是什么？

Answer 1

jQuery的数据函数做了两件截然不同的事情：它提供了一个访问数据属性的接口，它提供了一个接口，用于在页面加载后将数据与DOM节点相关联。关于以前的用例：

递归收集数据属性看起来像这样。

var navGlobal = document.getElementsByClassName('nav-global')[0];
var data = Object.assign({}, navGlobal.dataset);
var children = navGlobal.getElementsByTagName("*");

Array.from(children).forEach(function (el) {
  Object.assign(data, el.dataset)
})

console.log(data)

<div class="nav-global" data-foo="bar">
  <div data-bar="baz">
    <div data-baz="quux"></div>
  </div>
</div>

如果没有看到更多代码，就无法更具体，但我建议您更好地选择包含类名等数据的元素。

如果您需要嵌套数据结构，并且需要将它们作为数据属性实现，那么您必须做一些额外的工作才能实现这一点。

如果你查看我的old jQuery plugin的来源，你会看到一种采用扁平数据结构并将其转换为嵌套数据结构的简单方法，反之亦然。这大致类似于PHP＆amp; Ruby在查询字符串中编码嵌套参数。

{
  "account[accountData][address][zip]": "12345"
}

变为

{
  "account": {
    "accountData": {
      "address": {
        "zip": "1234"
      }
    }
  }
}

我的库旨在用于表单输入，但您可以根据数据属性调整相同的原则。

虽然坦率地说，但我不明白为什么你不只是在页面上删除JSON有效负载。

Answer 2

正如antony所说，使用DOMElement.dataset对象：

var div = document.querySelector('div');
var p = document.querySelector('p');

p.innerHTML = div.dataset.myattribute;

<div data-myattribute="3"></div>
<p></p><!-- Output element -->

如何将jQuery .data（）转换为Vanilla JS？

2 个答案: