Question

我正在重新编码我创建的插件jQuery，因此我希望将其创建为纯Javascript

我可以参考YouMightNotNeedjQuery引用的大多数功能，但我不知道在我的插件中使用jQuery.data函数。

如何使用Javascript pure？

实现此功能

Answer 1

您可以通过datasets

来完成

HTML

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

的Javascript

var article = document.getElementById('electriccars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

参考：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

根据评论进行编辑

HTML

<article id="electriccars">
    ...
</article>

的Javascript

var article = document.getElementById('electriccars');
article.setAttribute('data-columns', '3');

示例：

如果使用getAttribute()，则将该值视为字符串，因此对于jQuery .data的类似用法不一样，因为.data会将对象和数组分配给数据attr

如果你使用dataset，你会得到类似于jQuery的用法。

小提琴https://jsfiddle.net/69ukrpcf/

var myArr = ['item1', 'items2'];

jQuery版本

$('#one').data('foo', myArr);
var one = $('#one').data('foo');
console.log(one);

非jQuery版

var div = document.getElementById('two');
var two = div.dataset.foo = myArr;
console.log(two);

Answer 2

阅读有关how to work with data attributes here的文章。

有很多方法可以使用javascript检索数据属性：

var domElement = document.getElementById('randomid');
var articleId = domElement.getAttribute('data-articleid');
console.log(articleId);//Outputs 123

您也可以使用dom元素的datasets属性，但是在旧的IE中，element.dataset将失败。

如何实现非jQuery版本的数据（）？

2 个答案: