jQuery如何将domElement哈希与data（）一起使用？

Question

The sorcecode for jQuery is a little bit confusing to me, with a lot of global variables and cross-references.

I have several assumptions as to how jQuery.data() works: It creates a hashtable and hashes a domElement as a key, and sets the data as a value. I got to this conclusion since there is no changes to the dom, so somehow hashing the domElement is the only possible thing left.

Question 1: How is it hashed?

Question 2: Is it possible to extend the hashing algorithm to work persistently with saved elements in the localStorage?

Answer 1

It is stored in the $.cache variable. You can see it if you for example open your browser console and type it.

Here is an example

 $('div').data('tryme', 'okay'); $('p').data('try', 'okay'); $('div').append(JSON.stringify($.cache)); console.log($('div'), $('p')) 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div></div> <p></p> 

How it works

Each time you call $(domElement) jQuery will assign a key to it starting with 1 . You can think of it as an ID. As you can see in the result above each object with the data is assigned to a key.

When you call $('div').data() , jQuery will just get the key for that element and get the resulting data from the $.cache variable. You can check the keys doing something like

 $('div').each(function(){ $(this).data(this.className, $(this).attr('data-class')); }); $('div').each(function(){ $('<div/>', { text: 'I am ' + this.className + ', my key is ' + this[$.expando] + ' and my data is ' + JSON.stringify($.cache[this[$.expando]].data) }).appendTo('span'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class='ok1' data-class='test1'></div> <div class='ok2' data-class='test2'></div> <div class='ok3' data-class='test3'></div> <div class='ok4' data-class='test4'></div> <span> </span> 

With the result of this data you can simple save it in localStorage or do whatever you want.