jQuery.data() wird verwendet, um Daten an gewöhnliche Objekte oder DOM-Elemente anzuhängen (und abzurufen).
Im Folgenden wird die Umsetzung in drei Teilen analysiert:
1.
Verwenden Sie Name und Wert, um Daten an das Objekt anzuhängen. Das heißt, Sie übergeben drei Parameter. Der erste Parameter ist das Objekt, an das die Daten angehängt werden müssen, 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 ist ebenfalls ein Objekt (wir nennen es). it „another“ „); die in „another“ enthaltenen Schlüssel-Wert-Paare werden kopiert
„obj“ im Datencache (nennen wir es „Cache“).
3. Daten an DOM-Element anhängen; DOM-Element ist ebenfalls eine Art Objekt, aber IE6 und IE7 sind direkt an DOM-Element angehängt
Es gibt ein Problem mit der Garbage Collection von Objekten; daher speichern wir diese Daten in einem globalen Cache (wir nennen ihn „globalCache“), das heißt, „globalCache“ enthält mehrere DOM
Fügen Sie dem „Cache“ des Elements ein Attribut hinzu und fügen Sie dem DOM-Element ein Attribut hinzu, um die UID zu speichern, die dem „Cache“ entspricht.
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, 'name', 'value');
documentwrite("$data(obj, 'name') = " + $data(obj, 'name') + '<br />');
for (var key in obj)
{
documentwrite("obj" + key + 'name = ' + obj[key]name);
}
</script>Nach dem Login kopieren
Das angezeigte Ergebnis ist:
$.data(obj, 'name') = value
obj.jQuery16018518865841457738.name = value
Nach dem Login kopieren
In diesem Code Wir hängen zuerst ein Attribut an „obj“ an (Name ist „name“, Wert ist „value“) und übergeben dann $.data(obj, 'name')
um die angehängten Daten zu erhalten. Um ein tieferes Verständnis des Implementierungsmechanismus zu erlangen, haben wir eine Schleife verwendet, um die Attribute von „obj“ zu erhalten. Tatsächlich haben wir die an „obj“ angehängten Attribute herausgenommen.
„Cache“-Objekt.
Wie Sie sehen können, hängt jQuery.data() tatsächlich „obj“ an die Datei mit dem Namen „jQuery16018518865841457738“ an.
(der Name ist zufällig) Objekt, das der „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 Funktionalität zu erreichen:
$ = 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);
}
}
}
}();Nach dem Login kopieren
Die erste Codezeile in der Funktion definiert „expando“, also „jQuery1.6“.
Fügen Sie eine Zufallszahl (0.xxxx) hinzu und entfernen Sie den nicht numerischen Teil. Dieses Format wird an anderer Stelle in jQuery verwendet und wird hier nicht besprochen. Beachten Sie jedoch, dass es sich um einen speziellen Namen handelt, der zur Identifizierung verschiedener Seiten verwendet werden kann (z. B als unterschiedlich
„expando“ im iframe wird anders sein).
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], wenn obj[expando];
Wenn es leer ist, wird die Initialisierung durchgeführt.
Schließlich wird die Datenmethode entsprechend dem eingehenden „obj“ bereitgestellt, wenn zwei Parameter übergeben werden
getData()-Methode; wenn drei Parameter übergeben werden, wird die setData()-Methode 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 „andere“
Der Attributname und der Attributwert werden als mehrere Schlüssel-Wert-Paare behandelt und der daraus extrahierte „Name“ und „Wert“ werden in den Cache des Zielobjekts kopiert.
Der Funktionstestcode lautet wie folgt:
<script type="text/javascript" src="jqueryjs"></script>
<script>
obj = {};
$data(obj, {name1: 'value1', name2: 'value2'});
documentwrite("$data(obj, 'name1') = " + $data(obj, 'name1') + '<br />' );
documentwrite("$data(obj, 'name2') = " + $data(obj, 'name2') + '<br />');
for (var key in obj)
{
documentwrite("obj" + key + 'name1 = ' + obj[key]name1 + '<br />');
documentwrite("obj" + key + 'name2 = ' + obj[key]name2);
}
</script>Nach dem Login kopieren
Das Anzeigeergebnis lautet wie folgt:
$.data(obj, 'name1') = value1
$.data(obj, 'name2') = value2
obj.jQuery1600233050178663064.name1 = value1
obj.jQuery1600233050178663064.name2 = value2
Nach dem Login kopieren
Im obigen Testcode haben wir zuerst einen Schlüssel eingegeben -Wertpaar mit zwei Das „andere“ Objekt wird übergeben und dann verwendet $.data(obj, 'name1') und
$.data(obj, 'name2') erhält auf ähnliche Weise zusätzliche Daten. Um den Mechanismus im Detail zu verstehen, entfernen wir den versteckten „Cache“, indem wir „obj“ durchlaufen.
Objekt und erhielt die Werte des Attributs „name1“ und des Attributs „name2“ des Objekts „cache“.
Wie Sie sehen können, hängt jQuery.data() tatsächlich ein Objekt mit dem Namen „obj.jQuery1600233050178663064“ an „obj“ an
„cache“ an. Mit jquery.data() übergebene Schlüssel-Wert-Paare werden in den „Cache“ kopiert.
Wir können den folgenden Code verwenden, um eine ähnliche Funktionalität 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);
}
}
}
}();Nach dem Login kopieren
这段代码是在之前的代码的基础上进行修改的。首先增加了内部函数 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('div_test');
$data(div, 'name', 'value');
documentwrite($data(div, 'name'));
}
</script>Nach dem Login kopieren
显示结果如下：
value
Nach dem Login kopieren
测试代码中，首先通过 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
}();Nach dem Login kopieren
这段代码与之前的代码相比，增加了 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
中这刻意优化的地方非常多，在许多原本可以统一处理的对方都进行了特殊处理。但这在一定程度上，也造成了阅读源码的障碍。当然这是作者（及其他代码贡献者）本身的编程哲学，这里就不加评论了。
