javascript - 无需 jQuery 即可获取 jQuery.data 功能

Question

您可以使用 $('#elid').data('key', value) 通过 jquery 轻松设置任何元素的数据属性。您可以使用 document.querySelector('#elid').setAttribute('data-key', value)

执行相同操作

但是，jQuery 为您提供了 querySelector 所没有的特殊功能 - 添加任意类型的属性(包括函数，我认为 Promise，这正是我所需要的)的能力。

因此，如果您要使用 jQuery 执行 $('#elid').data('key', function(){console.log('yes')}) ，然后 $('#elid').data('key')()，它会将“yes”记录到控制台——我们可以将一个函数作为数据属性分配给元素并运行它每当。

但是我们不能对“setAttribute”做同样的事情——当我们这样做时，它显然只是将函数的字符串化形式分配给数据属性，而不是实际的函数。

我在这里提供了示例代码:

https://jsfiddle.net/8e1wyL41/

那么如何使用纯 JavaScript(就像 jQuery 一样)将数据应用到元素，包括将任意函数或 JavaScript 对象作为数据属性值的能力？

Answer 1

jQuery#data()使用internal object跟踪数据值。设置数据值时，它不会更新元素以具有新的或更改的 data-* 属性。当检索数据值时，如果内部对象没有设置值，它将尝试从 data-* 属性中获取它。

在没有 jQuery 的情况下执行此操作的一种过于简化的方法是仅使用一个对象并将数据存储在该对象上

var element = document.querySelector("div");
element.customData = {};
//get data example, check if customData has a value first, if not use dataset
var someData = element.customData["somedata"] || element.dataset["somedata"];
//set
element.customData["somedata"] = function(){};

如果您不想用任意属性污染元素，您可以使用 WeakMap ，等待浏览器支持，将数据对象与元素相关联。这还允许使用单个对象来维护其他元素数据对象。数据对象的关键是元素对象本身。一旦元素被垃圾收集，数据对象就会自动从 map 中删除

var dataMap = new WeakMap();
var element = document.querySelector('div');
var elementData = dataMap.get(element);

if(!elementData){
   dataMap.set(element, elementData = {});
}
//get data example, check if data object has a value first, if not use dataset
var someData = elementData["somedata"] || element.dataset["somedata"];
//set
elementData["somedata"] = function(){};