Eine kurze Analyse des Caching-Mechanismus von jQuery

Eine kurze Analyse des Caching-Mechanismus von jQuery_jquery

WBOY

Freigeben： 2016-05-16 16:45:41

Original

1418 Leute haben es durchsucht

Als ich vor nicht allzu langer Zeit die Animationswarteschlange von jQuery untersuchte, stellte ich fest, dass das Caching-System von jQuery ebenfalls sehr leistungsfähig ist. Obwohl ich schon einiges damit zu tun hatte, habe ich es nie eingehend untersucht. Das Caching-System von jQuery ist bei externer Verwendung relativ einfach. Um beispielsweise bestimmte URL-Daten im Cache zu speichern, schreiben Sie einfach:

Code kopieren Der Code lautet wie folgt:

var val = "stylechen.com";
$("div").data( "url" ); // Rückgabe undefiniert
$ ("div").data( "url", val ); // Rückgabe von "stylechen.com"
$("div").data( "url" ); // Rückgabe von "stylechen.com"

Es können nicht nur Zeichenfolgen gespeichert werden, der obige Wert kann auch beliebige Daten sein und Objekte, Arrays, Funktionen usw. können darin gespeichert werden. Es ist ganz einfach, diese Funktion zu implementieren. Deklarieren Sie ein globales Objekt zum Speichern von Daten und verwenden Sie dann die Datenmethode zum Speichern oder Zurückgeben von Daten:

Code kopieren Der Code lautet wie folgt:

var cacheData = {}; // Verwendet zum Speichern von Daten Globales Objekt
var data = function( key, val ){
if( val !== undefined ){
cacheData[key] = val;
}

return cacheData[key];
};

Der wahre Reiz des jQuery-Caching-Systems liegt in seinen internen Anwendungen. Animationen, Ereignisse usw. nutzen alle dieses Caching-System. Als ich zuvor easyAnim geschrieben habe, habe ich die Animationswarteschlange in den benutzerdefinierten Attributen jedes DOM-Elements gespeichert. Dies erleichterte zwar den Zugriff auf die Warteschlangendaten, brachte jedoch auch versteckte Gefahren mit sich. Das Hinzufügen benutzerdefinierter Attribute und zu vieler Daten zu DOM-Elementen kann zu Speicherverlusten führen. Vermeiden Sie dies daher.

Wenn Sie das Caching-System von jQuery zum Speichern der Daten eines DOM-Elements verwenden, wird dem DOM-Element zunächst ein zufällig generiertes Attribut hinzugefügt. Dieses Attribut wird zum Speichern des Indexwerts für den Zugriff auf die zwischengespeicherten Daten verwendet, genau wie das DOM Das Element verfügt über einen offenen Schlüssel. Sie können den Cache-Safe jederzeit öffnen, solange Sie den Schlüssel haben. Die ursprünglich im DOM-Element gespeicherten Daten werden in den Cache übertragen, und das DOM-Element selbst muss nur ein einfaches Attribut speichern, sodass das Risiko von durch das DOM-Element verursachten Speicherverlusten minimiert werden kann. Das Folgende ist ein einfaches Caching-System, das ich geschrieben habe, um jQuery zu simulieren:

Kopieren Sie den Code Der Code lautet wie folgt:

var cacheData = {}, // Globales Objekt zum Speichern von Daten
uuid = 0,
// Zufallszahlen deklarieren
expando = "cacheData" ( new Date() " " ).slice( -8 );

var data = function( key, val, data ){
if( typeof key === "string" ){
if( val != = undefiniert ){
cacheData[key] = val;
}

return cacheData[key];
}
else if( typeof key === "object" ){
var index,
thisCache;

if( !key [expando] ){
// Ein Attribut eines DOM-Elements hinzufügen
// Die Zufallszahl ist der Attributname und der Indexwert ist der Attributwert
index = key[expando] = uuid;
if( !thisCache[expando] ){
thisCache[expando] = {};
}

if( gambling // Daten im Cache-Objekt speichern
thisCache[expando][val] = data;
}

// Gibt die im DOM-Element gespeicherten Daten zurück
return thisCache[expando][val];
}
};

var removeData = function( key, val ){
if( typeof key === "string" ){
delete cacheData[key];
}
else if( typeof key = == "object" ){
if( !key[expando] ){
return;

}

// Prüfe, ob das Objekt leer ist
var isEmptyObject = function( obj ) {
var name;
for ( name in obj ) {
return false;
}
return true;
},

removeAttr = function(){
try{
// IE8 und Standardbrowser können delete direkt verwenden, um Attribute zu löschen
delete key[expando];
}
Catch (e) {
// IE6/IE7 verwenden Methode „removeAttribute“ zum Löschen von Attributen
key.removeAttribute(expando);
}
},

index = key[expando];

if( val ){
// Nur die angegebenen Daten löschen
delete cacheData[index][expando][val];
// Wenn es sich um ein leeres Objekt handelt, löschen Sie einfach alle Objekte
if( isEmptyObject( cacheData[index] [expando] ) ){
delete cacheData[index];
removeAttr();
}
}
else{
// Alle im Cache gespeicherten Daten für DOM-Elemente löschen
CacheData[index] löschen;
removeAttr();
}
}
};

Bemerkenswert an dem obigen Code ist, dass die Verwendung von „delete“ zum Löschen eines benutzerdefinierten Attributs in IE6/IE7 einen Fehler meldet. Es kann nur mit „removeAttribute“ gelöscht werden. Folgendes ist das Ergebnis des Aufrufs:

Code kopieren

Der Code lautet wie folgt:

var box = document.getElementById( "box " ), list = document.getElementById( "list" );data( box, "myName", "chen" );alert( data( box, "myName" ) ) ; // chen

data( box, "myBlog", "stylechen.com" );

alert( data( box, "myBlog" ) ); // stylechen.com

removeData( box, „myBlog“ );

alert( data( box, "myBlog" ) ); // undefiniert
alert( data( box, "myName" ) ); // chenalert( box[expando] );

removeData( box );

alert( box[expando] ); // undefiniert

Natürlich ist das Caching-System von jQuery komplizierter als meines, aber das Grundprinzip ist immer noch dasselbe. easyAnim wird dieses Caching-System in späteren Versionen einführen.