jQuery 哈希 domElements 如何与 data() 一起使用

Question

jQuery的sorcecode对我来说有点混乱，有很多全局变量和交叉引用。

我对jQuery.data()的工作原理有几个假设：它创建一个哈希表并将 domElement 哈希为键，并将数据设置为值。我得出了这个结论，因为 dom 没有变化，所以以某种方式散列 domElement 是唯一可能的事情。

问题 1：它是如何散列的？

问题 2：是否可以扩展哈希算法以持久处理 localStorage 中保存的元素？

Answer 1

它存储在$.cache变量中。例如，如果您打开浏览器控制台并键入它，则可以看到它。

这是一个例子

$('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>

工作原理

每次调用$(domElement) jQuery都会为其分配一个从1开始的键。您可以将其视为 ID。正如您在上面的结果中看到的那样，每个带有数据的对象都被分配给一个键。

当你调用$('div').data()时，jQuery将只获取该元素的键，并从$.cache变量中获取结果数据。您可以检查按键，执行以下操作

$('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>

有了这些数据的结果，您可以简单地将其保存在本地存储中或做任何您想做的事情。