深入理解jQuery.data() 的实现方式

<script type="text/javascript" src="/UploadFiles/2021-04-02/jqueryjs">

显示结果为：


$.data(obj, 'name') = value 
obj.jQuery16018518865841457738.name = value 


在这段代码中，我们首先在 “obj” 上附加了一个属性（名称为“name”，值为“value”），然后通过 $.data(obj, 'name') 来获取所附加的数据。为了深入了解其中的实现机制，我们有使用了一个循环来获取 “obj” 的属性，实际上是取出了在 “obj” 上附加的 “cache”对象。
可以看到，jQuery.data() 实际上为 “obj” 附加到了名为 “jQuery16018518865841457738” （这个名称是随机的）的对象，也就是 “cache” 上。用 jquery.data() 方式为对象附加的属性实际上成为了这个 “cache” 的属性。
我们可以用下面的代码实现类似的功能：


$ = function() { 
 var expando = "jQuery" + ("6" + Mathrandom())replace(/\D/g, ''); 
 
 function getData(cache, name) { 
 return cache[name]; 
 } 
 
 function setData(cache, name, value) { 
 cache[name] = value; 
 } 
 
 function getCache(obj) { 
 obj[expando] = obj[expando] || {}; 
 return obj[expando]; 
 } 
 
 return { 
 data : function(obj, name, value) { 
  var cache = getCache(obj); 
 
  if (value === undefined) { 
  return getData(cache, name); 
  } else { 
  setData(cache, name, value); 
  } 
 } 
 } 
}(); 




function 中的第一行代码定义了 “expando” ，即 "jQuery1.6" 加上一个随机数（0.xxxx），并将其中非数字的部分去掉；这种格式将在jQuery的其他地方用到，这里不做探讨；只需要知道这是一个特殊的名称，并且可以用于标识不同的页面（比如不同 iframe 中的 “expando” 就会有所不同）。
接下来定义了获取数据的函数 getData()， 即从 “cache” 中获取一个属性；实际上也就是返回 cache[name] 。 


然后是 setData() 函数，用于设置 “cache” 的属性；实际上也就是设置 cache[name] 的值。 


之后是 getCache() ， 获取 “obj” 上的 “cache”，即 obj[expando]；如果 obj[expando] 为空，则进行初始化。 


最后公开了 data 方法，先根据传入的 “obj”，获取附加在 “obj” 上的 “cache”； 当传入两个参数时，调用 getData（）方法；当传入三个参数时，则调用 setData() 方法。
用另一个对象为对象附加数据
除了以提供 name 和 value 的方式进行赋值，我们还可以直接传入另一个对象（ “another” ）作为参数。这种情况下，“another” 的属性名称和属性值将被视为多个键值对，从中提取的 “name” 和 “value” 都会被复制到目标对象的缓存中。
功能测试代码如下：


<script type="text/javascript" src="/UploadFiles/2021-04-02/jqueryjs">

显示结果如下：


$.data(obj, 'name1') = value1 
$.data(obj, 'name2') = value2 
obj.jQuery1600233050178663064.name1 = value1 
obj.jQuery1600233050178663064.name2 = value2 


上面的测试代码中，我们先将一个带有两个键值对的 “another” 对象传入，然后分别用 $.data(obj, 'name1') 和 $.data(obj, 'name2') 获取附加的数据；同样，为了深入了解其中的机制，我们通过遍历 “obj” 的方式取出了隐藏的 “cache” 对象，并获得了 “cache” 对象的 “name1” 属性和 “name2” 属性的值。
可以看到，jQuery.data() 实际上为 “obj” 附加了名为 “obj.jQuery1600233050178663064” 的对象，也就是 “cache” 上。用 jquery.data() 方式传入的键值对都被复制到了 “cache” 中。
我们可以用下面的代码实现类似的功能：


$ = function() { 
 // Other codes 
 
 function setDataWithObject(cache, another) { 
 for (var name in another) { 
  cache[name] = another[name]; 
 } 
 } 
 
 // Other codes 
 
 return { 
 data : function(obj, name, value) { 
  var cache = getCache(obj); 
 
  if (name instanceof Object) { 
  setDataWithObject(cache, name) 
  } else if (value === undefined) { 
  return getData(cache, name); 
  } else { 
  setData(cache, name, value); 
  } 
 } 
 } 
}(); 


这段代码是在之前的代码的基础上进行修改的。首先增加了内部函数 setDataWithObject() ，这个函数的实现是遍历 “another” 的属性，并复制到 “cache” 中。 


然后，在对外开放的 data 函数中，先判断传入的第二个参数的名称，如果这个参数是一个 Object 类型的实例，则调用 setDataWithObject() 方法。
为 DOM Element 附加数据
由于 DOM Element 也是一种 Object，因此之前的方式也可以为 DOM Element 赋值；但考虑到 IE6、IE7 中垃圾回收的问题（不能有效回收 DOM Element 上附加的对象引用），jQuery采用了与普通对象有所不同的方式附加数据。
测试代码如下：


<script type="text/javascript" src="/UploadFiles/2021-04-02/datajs">

显示结果如下：


value 


测试代码中，首先通过 document.getElementById 方法获取了一个 DOM Element （当然，也可以用 jQuery 的选择器），然后在这个 DOM Element 上附加了一个属性，随后就从 DOM Element 上取出了附加的属性并输出。
因为考虑到 IE6、IE7 对 DOM Element 上的对象引用的垃圾回收存在问题，我们不会直接在 DOM Element 上附加对象；而是使用全局cache，并在 DOM Element 上附加一个 uid。
实现方式如下：


$ = function() { 
 var expando = "jQuery" + ("6" + Mathrandom())replace(/\D/g, ''); 
 var globalCache = {}; 
 var uuid = 0; 
 
 // Other codes 
 
 function getCache(obj) { 
 if (objnodeType) { 
  var id = obj[expando] = obj[expando] || ++uuid; 
  globalCache[id] = globalCache[id] || {}; 
  return globalCache[id]; 
 } else { 
  obj[expando] = obj[expando] || {}; 
  return obj[expando]; 
 } 
 } 
 
 // Other codes 
}(); 


 这段代码与之前的代码相比，增加了 globalCache 和 uuid，并修改了 getCache() 方法。
globalCache 对象用于存放附加到 DOM Element 上的 “cache”，可以视为 “cache” 的“容器”。uuid 表示 “cache” 对应的唯一标识，是唯一且自增长的。uuid 或被存放在 DOM Element 的 “expando” 属性中。 


getCache() 函数中增加了一个判断，即 “obj” 具有 “nodeType” 属性，就认为这是一个 DOM Element；这种情况下，就先取出附加在 “obj” 上的 id ，即 obj[expando] ；如果 obj[expando] 未定义，则先用 ++uuid 对其进行初始化；取出 id 之后，就到 globalCache 中找到对应的 “cache” ，即 globalCache[id], 并返回。
    到此为止，jQuery.data() 函数的实现就介绍完了；但是，这里还有一个需要思考的问题：为什不都统一用 “globalCache” 存储，而要将 “cache” 直接附加到普通对象上？我认为这应该是一种性能优化的方式，毕竟少一个引用的层次，存取速度应该会略快一些。 jQuery 中这刻意优化的地方非常多，在许多原本可以统一处理的对方都进行了特殊处理。但这在一定程度上，也造成了阅读源码的障碍。当然这是作者（及其他代码贡献者）本身的编程哲学，这里就不加评论了。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

            
            上一篇：基于Vue.js实现简单搜索框

            下一篇：利用vue-router实现二级菜单内容转换