jQuery.data() 구현에 대한 심층적인 이해

jQuery.data()는 일반 객체나 DOM 요소에 데이터를 연결(및 획득)하는 데 사용됩니다.

다음은 세 부분으로 구현을 분석합니다.

1. 이름과 값을 사용하여 개체에 데이터를 추가합니다. first 매개변수는 추가 데이터가 필요한 객체이고, 두 번째 매개변수는 데이터의 이름, 세 번째 매개변수는 데이터의 값입니다. 물론 값만 얻으면 세 번째 매개변수를 전달할 필요가 없습니다.

2. 다른 개체를 사용하여 개체에 데이터를 추가합니다. 즉, 두 개의 매개변수를 전달합니다. 첫 번째 매개변수는 추가해야 하는 데이터 개체입니다("obj"라고 함). 두 번째 매개변수도 객체입니다("another"라고 함). "another"에 포함된 키-값 쌍은 "obj"의 데이터 캐시("cache"라고 함)에 복사됩니다.

3. DOM 요소에 데이터 연결 DOM 요소도 일종의 개체이지만 IE6과 IE7은 DOM 요소에 직접 연결된 개체의 가비지 수집에 문제가 있습니다. 글로벌 캐시(우리는 이를 "globalCache"라고 함), 즉 "globalCache"는 여러 DOM 요소의 "캐시"를 포함하고 "캐시"에 해당하는 uid를 저장하기 위해 DOM 요소에 속성이 추가됩니다.

이름과 값을 사용하여 객체에 데이터 추가

jQuery.data()를 사용하여 일반 객체에 데이터를 추가할 때 핵심은 객체에 "캐시"를 연결하고 특수 속성 이름을 사용하십시오.

데이터를 저장하는 "캐시"도 객체입니다. "obj"에 첨부하는 데이터는 실제로 "캐시"의 속성이 됩니다. 그리고 "cache"는 "obj"의 속성입니다. jQuery 1.6에서 이 속성의 이름은 "jQuery16"에 임의의 숫자를 더한 것입니다(예: 아래에 언급된 "jQuery16018518865841457738").

다음 코드를 사용하여 jQuery.data()의 기능을 테스트할 수 있습니다.

<script type="text/javascript" src="jqueryjs"></script>
<script>
obj = {};
$data(obj, &#39;name&#39;, &#39;value&#39;);
documentwrite("$data(obj, &#39;name&#39;) = " + $data(obj, &#39;name&#39;) + &#39;<br />&#39;);
  
for (var key in obj) {
 documentwrite("obj" + key + &#39;name = &#39; + obj[key]name);
}
</script>

표시된 결과는 다음과 같습니다. 🎜>

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

이 코드에서는 먼저 "obj"(이름은 "name", 값은 "value")에 속성을 연결한 다음 Get을 가져옵니다. $.data(obj, 'name')을 통해 첨부된 데이터. 구현 메커니즘에 대한 더 깊은 이해를 얻기 위해 루프를 사용하여 "obj"에 연결된 "캐시" 개체를 실제로 제거하는 "obj"의 속성을 얻었습니다.

보시다시피 jQuery.data()는 실제로 "jQuery16018518865841457738"(이름은 임의임), 즉 "cache"라는 개체에 "obj"를 첨부합니다. jquery.data()를 사용하여 객체에 첨부된 속성은 실제로 이 "캐시"의 속성이 됩니다.

다음 코드를 사용하여 유사한 기능을 구현할 수 있습니다.

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

함수의 첫 번째 코드 줄은 "expando"를 정의합니다. 즉, "jQuery1.6"에 임의의 숫자(0.xxxx)를 추가하고 숫자가 아닌 부분을 제거합니다. 이 형식은 jQuery의 다른 위치에서 사용되며 여기서는 설명하지 않습니다. 이는 다른 페이지를 식별하는 데 사용할 수 있는 특수 이름입니다(예를 들어, 다른 iframe의 "expando"는 다릅니다).

다음으로, 데이터를 얻기 위한 getData() 함수가 정의됩니다. 이는 "캐시"에서 속성을 가져오는 것이며 실제로는 캐시[이름]을 반환합니다.

그리고 "cache" 속성을 설정하는 데 사용되는 setData() 함수가 있는데, 실제로는 캐시[이름]의 값을 설정하는 것입니다.

뒤에는 "obj"에서 "캐시"를 가져오기 위한 getCache()가 옵니다. 즉, obj[expando]가 비어 있으면 초기화합니다. <… 세 개의 매개변수가 전달되면 setData() 메소드가 호출됩니다.

다른 객체를 사용하여 객체에 데이터 추가

이름과 값을 제공하여 값을 할당하는 것 외에도 다른 객체("another")를 매개변수로 직접 전달할 수도 있습니다. . 이 경우 "another"의 속성 이름과 속성 값은 여러 키-값 쌍으로 처리되며, 여기에서 추출된 "이름"과 "값"이 대상 개체의 캐시에 복사됩니다.

기능 테스트 코드는 다음과 같습니다.

<script type="text/javascript" src="jqueryjs"></script>
<script>
obj = {};
$data(obj, {name1: &#39;value1&#39;, name2: &#39;value2&#39;});
  
documentwrite("$data(obj, &#39;name1&#39;) = " + $data(obj, &#39;name1&#39;) + &#39;<br />&#39; );
documentwrite("$data(obj, &#39;name2&#39;) = " + $data(obj, &#39;name2&#39;) + &#39;<br />&#39;);
  
for (var key in obj) {
 documentwrite("obj" + key + &#39;name1 = &#39; + obj[key]name1 + &#39;<br />&#39;);
 documentwrite("obj" + key + &#39;name2 = &#39; + obj[key]name2);
}
</script>

표시 결과는 다음과 같습니다.

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

위의 테스트 코드에서는 먼저 두 개의 키-값 쌍이 있는 "또 다른" 개체를 전달한 다음 $.data(obj, 'name1') 및 $를 사용합니다. .data( obj, 'name2') 추가 데이터를 얻기 위해 마찬가지로 메커니즘을 깊이 이해하기 위해 "obj"를 탐색하여 숨겨진 "캐시" 객체를 꺼내고 "name1" 속성과 해당 값을 얻었습니다. "name2" 속성.

보시다시피 jQuery.data()는 실제로 "obj.jQuery1600233050178663064"라는 개체를 "obj", 즉 "캐시"에 연결합니다. jquery.data()를 사용하여 전달된 키-값 쌍은 "캐시"에 복사됩니다.

다음 코드를 사용하여 유사한 기능을 구현할 수 있습니다.

$ = 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采用了与普通对象有所不同的方式附加数据。

测试代码如下：

<div id="div_test" />
  
<script type="text/javascript" src="datajs"></script>
<script>
windowonload = function() {
 div = documentgetElementById(&#39;div_test&#39;);
 $data(div, &#39;name&#39;, &#39;value&#39;);
 documentwrite($data(div, &#39;name&#39;));
}
</script>

显示结果如下：

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 中这刻意优化的地方非常多，在许多原本可以统一处理的对方都进行了特殊处理。但这在一定程度上，也造成了阅读源码的障碍。当然这是作者（及其他代码贡献者）本身的编程哲学，这里就不加评论了。