Une brève analyse du mécanisme de mise en cache de jQuery_jquery

Lorsque j'étudiais la file d'attente d'animation de jQuery il n'y a pas longtemps, j'ai découvert que le système de mise en cache de jQuery est également très puissant. Même si j'y ai déjà été exposé, je ne l'ai jamais étudié en profondeur. Le système de mise en cache de jQuery est relativement simple lorsqu'il est utilisé en externe. Par exemple, pour stocker certaines données d'URL dans le cache, écrivez simplement :

Copier le code<.> Le code est le suivant :

var val = "stylechen.com";
$("div").data( "url" ); $ ("div").data( "url", val ); // Retourne "stylechen.com"
$("div").data( "url" ); 🎜 >

Non seulement il peut stocker des chaînes, mais la valeur ci-dessus peut également contenir n'importe quelle donnée, et des objets, tableaux, fonctions, etc. peuvent y être stockés. Il est assez simple d'implémenter cette fonction. Déclarez un objet global pour stocker des données, puis utilisez la méthode data pour stocker ou renvoyer des données :

Copier le code Le code est le suivant :var cacheData = {} ; pour stocker des données Objet global

var data = function( key, val ){

if( val !== undefined ){
cacheData[key] = val;
}

return cacheData[key];
} ;

Le vrai charme du système de mise en cache jQuery réside dans ses applications internes. Les animations, événements, etc. utilisent tous ce système de mise en cache. Lorsque j'écrivais easyAnim auparavant, je stockais la file d'attente d'animation dans les attributs personnalisés de chaque élément DOM. Bien que cela facilite l'accès aux données de la file d'attente, cela comportait également des dangers cachés. L'ajout d'attributs personnalisés et de trop de données aux éléments DOM peut provoquer des fuites de mémoire, alors essayez d'éviter de le faire.

Si vous utilisez le système de mise en cache de jQuery pour stocker les données d'un élément DOM, un attribut généré aléatoirement sera d'abord ajouté à l'élément DOM. Cet attribut est utilisé pour stocker la valeur d'index pour accéder aux données mises en cache, tout comme le DOM. L'élément a une clé ouverte La clé du coffre-fort, vous pouvez ouvrir le coffre-fort à tout moment tant que vous avez la clé. Les données initialement stockées dans l'élément DOM sont transférées vers le cache et l'élément DOM lui-même n'a besoin de stocker qu'un simple attribut, afin de minimiser le risque de fuite de mémoire provoquée par l'élément DOM. Ce qui suit est un système de mise en cache simple que j'ai écrit pour simuler jQuery :

Copiez le code Le code est le suivant :

var cacheData = {}, // Objet global utilisé pour stocker les données
uuid = 0,
// Déclarer des nombres aléatoires
expando = "cacheData" ( new Date() " " .slice( -8 );

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

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

if( !key [expando] ){
// Ajouter un attribut d'un élément DOM
// Le nombre aléatoire est le nom de l'attribut et la valeur de l'index est la valeur de l'attribut
index = key[expando] = uuid;
thisCache = cacheData[ index] = {};
}
else{
index = key[expando];
thisCache = cacheData[index];
}


if( !thisCache[expando] ){
thisCache[expando] = {};
}

if( gambling // Stocker les données dans l'objet cache
thisCache[expando][val] = data;
}

// Renvoie l'élément DOM stocké Data
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;
}
// Vérifiez si l'objet est vide
var isEmptyObject = function( obj ) {
var name;
for ( name in obj ) {
return false;
}
return true;
},

removeAttr = function(){
try{
// IE8 et les navigateurs standards peuvent directement utiliser delete pour supprimer des attributs
delete key[expando];
}
catch (e) {
// Utilisation IE6/IE7 Méthode RemoveAttribute pour supprimer les attributs
key.removeAttribute(expando);
}
},

index = key[expando];

if( val ){
// Supprimez uniquement les données spécifiées
delete cacheData[index][expando][val];
// S'il s'agit d'un objet vide, supprimez simplement tous les objets
if( isEmptyObject( cacheData[index] [expando] ) ){
delete cacheData[index];
removeAttr();
}
}
else{
// Supprime toutes les données stockées dans le cache pour les éléments DOM
supprimer cacheData[index];
supprimerAttr();
}
}
};

Ce qu'il convient de noter à propos du code ci-dessus, c'est que l'utilisation de delete pour supprimer un attribut personnalisé dans IE6/IE7 signalera une erreur. Il ne peut être supprimé qu'à l'aide de deleteAttribute. Les navigateurs standard peuvent utiliser delete pour supprimer. Voici le résultat de l'appel :

Copier le code Le code est le suivant :

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" ) );

removeData( box, "monBlog" );

alert( data( box, "myBlog" ) ); // undefined

alert( data( box, "myName" ) ); // chen
alert( box[expando] );

removeData( box );

alert( box[expando] ); // non défini

Bien sûr, le système de mise en cache de jQuery est plus compliqué que le mien, mais le principe de base est toujours le même. easyAnim introduira ce système de mise en cache dans les versions ultérieures.