在没有jQuery的情况下获取jQuery.data功能

Question

You can quite easily set a data attribute of any element with jquery using $('#elid').data('key', value) . You can do the same using document.querySelector('#elid').setAttribute('data-key', value)

However, jQuery gives you a special ability that querySelector doesn't - the ability to add attributes of an arbitrary type (including functions, and I think promises, which is what I need).

So if you were to do $('#elid').data('key', function(){console.log('yes')}) with jQuery, and then $('#elid').data('key')() , it would log 'yes' to the console -- we can just assign a function to the element as a data attribute and run it whenever.

But we can't do the same with 'setAttribute' -- when we do it, it apparently just assigns a stringified form of the function to the data attribute, rather than the actual function.

I've provided example code here:

https://jsfiddle.net/8e1wyL41/

So how can I apply data to elements with plain javascript, just like jQuery, including the ability to have arbitrary functions or javascript objects as data attribute values?

Answer 1

jQuery#data() uses an internal object to keep track of data values. It does not update the element to have new or changed data-* attributes when setting data values. When retrieving a data value, if the internal object does not have a set value it will attempt to get it from the data-* attributes.

A overly simplified way of doing this without jQuery would be to just use an object and store your data on that

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(){};

If you don't want to contaminate the element with arbitrary properties you could use a WeakMap , pending on browser support, to associate a data object with the element. This also allows for using a single object to maintain other element data objects as well. The key to the data object is the element object itself. And the data object will get deleted from the map automatically once the element is garbage collected

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(){};

Answer 2

.dataset sets or gets a DOMString of HTML data-* , though you can use Function() to call the function stored as string at HTMLElement.dataset

 document.documentElement.dataset.fn = function fn(...args) {console.log(args)}; new Function("return " + document.documentElement.dataset.fn)()("yes");