Vertiefendes Verständnis der Implementierung von jQuery.data()

jQuery.data() wird verwendet, um Daten an gewöhnliche Objekte oder DOM-Elemente anzuhängen (und abzurufen).

Im Folgenden wird die Implementierung in drei Teilen analysiert:

1 Verwenden Sie Name und Wert, um Daten an das Objekt anzuhängen Der erste Parameter ist das Objekt, das zusätzliche Daten benötigt, der zweite Parameter ist der Name der Daten und der dritte Parameter ist der Wert der Daten. Wenn Sie nur den Wert erhalten, müssen Sie natürlich nicht den dritten Parameter übergeben.

2. Verwenden Sie ein anderes Objekt, um Daten an das Objekt anzuhängen. Das heißt, Sie übergeben zwei Parameter. Der erste Parameter ist das Datenobjekt, das angehängt werden muss (wir nennen es „obj“). und der zweite Parameter Der Parameter ist ebenfalls ein Objekt (wir nennen es „another“); die in „another“ enthaltenen Schlüssel-Wert-Paare werden in den Datencache von „obj“ kopiert (wir nennen es „Cache“).

3. Das Anhängen von Daten an das DOM-Element ist ebenfalls eine Art Objekt, aber IE6 und IE7 haben Probleme mit der Speicherbereinigung von Objekten, die direkt an das DOM-Element angehängt sind Der globale Cache (wir nennen ihn „globalCache“), dh „globalCache“ enthält den „Cache“ mehrerer DOM-Elemente, und dem DOM-Element wird ein Attribut hinzugefügt, um die dem „Cache“ entsprechende UID zu speichern.

Verwenden Sie Namen und Wert, um Daten an das Objekt anzuhängen

Wenn Sie jQuery.data() verwenden, um Daten an ein normales Objekt anzuhängen, besteht das Wesentliche darin, einen „Cache“ an das Objekt anzuhängen und Verwenden Sie einen speziellen Attributnamen.

Der „Cache“, der Daten speichert, ist ebenfalls ein Objekt. Die Daten, die wir an „obj“ anhängen, werden tatsächlich zum Attribut von „Cache“. Und „cache“ ist ein Attribut von „obj“. In jQuery 1.6 lautet der Name dieses Attributs „jQuery16“ plus einer Zufallszahl (wie unten erwähnt „jQuery16018518865841457738“).

Wir können den folgenden Code verwenden, um die Funktion von jQuery.data() zu testen:

<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>

Das angezeigte Ergebnis ist:

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

In diesem Code fügen wir zuerst ein Attribut an „obj“ an (Name ist „Name“, Wert ist „Wert“) und dann Get die angehängten Daten über $.data(obj, 'name'). Um ein tieferes Verständnis des Implementierungsmechanismus zu erlangen, haben wir eine Schleife verwendet, um die Eigenschaften von „obj“ abzurufen, wodurch tatsächlich das an „obj“ angehängte „Cache“-Objekt entfernt wird.

Wie Sie sehen können, hängt jQuery.data() tatsächlich „obj“ an ein Objekt namens „jQuery16018518865841457738“ (der Name ist zufällig) an, das „Cache“ ist. Die mit jquery.data() an das Objekt angehängten Attribute werden tatsächlich zu Attributen dieses „Cache“.

Wir können den folgenden Code verwenden, um eine ähnliche Funktion zu implementieren:

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

Die erste Codezeile in der Funktion definiert „expando“ , also „jQuery1.6“ plus eine Zufallszahl (0.xxxx), und das Entfernen des nicht-numerischen Teils wird an anderen Stellen in jQuery verwendet und wird hier nicht besprochen dass dies ein spezieller Name ist, der zur Identifizierung verschiedener Seiten verwendet werden kann (z. B. ist „expando“ in verschiedenen Iframes unterschiedlich).

Als nächstes wird die Funktion getData() zum Abrufen von Daten definiert, die ein Attribut aus „Cache“ abruft. Tatsächlich gibt sie Cache[Name] zurück.

Dann gibt es die Funktion setData(), die zum Festlegen des Attributs „Cache“ verwendet wird, nämlich zum Festlegen des Werts von Cache[Name]. Auf

folgt getCache(), um den „Cache“ für „obj“ abzurufen, d. h. obj[expando] ist leer, initialisieren Sie ihn.

Schließlich wird die Datenmethode verfügbar gemacht. Zuerst wird der an „obj“ angehängte „Cache“ abgerufen, wenn zwei Parameter übergeben werden. Methode wird aufgerufen; Wenn drei Parameter übergeben werden, wird die Methode setData() aufgerufen.

Verwenden Sie ein anderes Objekt, um Daten an das Objekt anzuhängen

Zusätzlich zur Zuweisung von Werten durch Angabe von Namen und Werten können wir auch direkt ein anderes Objekt („ein anderes“) als Parameter übergeben . In diesem Fall werden der Attributname und der Attributwert von „anderem“ als mehrere Schlüssel-Wert-Paare behandelt und der daraus extrahierte „Name“ und „Wert“ in den Cache des Zielobjekts kopiert.

Der Funktionstestcode lautet wie folgt:

<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>

Das Anzeigeergebnis lautet wie folgt:

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

Im obigen Testcode übergeben wir zunächst ein „anderes“ Objekt mit zwei Schlüssel-Wert-Paaren und verwenden dann $.data(obj, 'name1') und $ .data( obj, 'name2') Um auf ähnliche Weise zusätzliche Daten zu erhalten, haben wir zum tieferen Verständnis des Mechanismus das versteckte „Cache“-Objekt durch Durchlaufen von „obj“ herausgenommen und das Attribut „name1“ und den Wert erhalten Attribut „name2“.

Wie Sie sehen können, hängt jQuery.data() tatsächlich ein Objekt mit dem Namen „obj.jQuery1600233050178663064“ an „obj“ an, das „Cache“ ist. Mit jquery.data() übergebene Schlüssel-Wert-Paare werden in den „Cache“ kopiert.

Wir können den folgenden Code verwenden, um ähnliche Funktionen zu erreichen:

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