Ideas de implementación de la función de almacenamiento en caché de datos de jQuery

Prefacio Todos estamos familiarizados con el sistema de almacenamiento en caché de datos de jQuery. El sistema de almacenamiento en caché de jQuery no sólo se utiliza para elementos DOM, sino también para animaciones, eventos, etc. Por lo tanto, en el mundo real, a menudo necesitamos almacenar en caché algunos datos para un determinado elemento, y estos datos a menudo están estrechamente relacionados con los elementos DOM. Dado que los elementos DOM (nodos) son objetos, podemos extender directamente los atributos de los elementos DOM. Sin embargo, agregar atributos personalizados y demasiados datos a los elementos DOM puede provocar pérdidas de memoria, por lo que debemos intentar evitarlo. Por lo tanto, una mejor solución es utilizar una forma de bajo acoplamiento para conectar el DOM y los datos de la caché. Además, no presentaremos en detalle los métodos estáticos jQuery data y jQuery removeData, ni los métodos de extensión prototipo basados ​​​​en estos dos métodos. Puede consultar la documentación oficial de la API para obtener más información. Ideas de implementación jQuery proporciona un conjunto de métodos de almacenamiento en caché potentes y flexibles (). Primero, creamos un objeto de caché dentro de jQuery {} para almacenar datos de caché, y luego ampliamos el nodo DOM que necesita ser almacenado en caché y lo ampliamos con un atributo de valor anando. "jQuery" (nueva fecha) getTime() Tenga en cuenta que el valor de expando es igual a la hora actual de "jQuery". Es poco probable que el elemento tenga tal atributo, por lo que se puede ignorar el conflicto. El valor dom[expando] de cada nodo se establece en una identificación de variable de incremento automático para mantener la unicidad global. El valor de identificación se usa como clave de caché para asociar el nodo DOM con datos, lo que significa que caché [id] obtendrá todos los cachés en ese nodo, es decir, la identificación es como la que abre la clave de la habitación (nodo DOM). Todos los cachés de cada elemento se colocarán en un mapa. El caché de cada elemento se coloca en un mapa, de modo que se puedan almacenar en caché varios cachés al mismo tiempo (), por lo que la estructura del objeto de caché debe ser así. El código de copia es el siguiente: var cache = { ". uuid ": { // Datos de caché del nodo DOM "uuid" es equivalente a dom [expando] "nombre ": valor "nombre ": valor } "uuid "."uuid ".｝"uuid ": { // caché del nodo DOM datos "uuid" es equivalente a dom [expando ] "nombre "： valor "nombre "： valor } "uuid".//

Cada uuid corresponde a un elemento de datos de caché. puede estar compuesto por varios pares de nombre/valor, y el valor puede ser cualquier tipo de datos. Implementación simulada simple Basado en la idea anterior, puede simplemente implementar datos jQuery y funciones removeDate de jQuery: (función (ventana undefinida) { var cacheData = {}// Objeto utilizado para almacenar datos win = ventana // Ventana de caché como una variable uuid = // Declarar un número aleatorio (bits) // Tenga en cuenta que el número aleatorio generado por new Date() es de tipo Número. Antes de usar el método de corte, debe conectarse con una cadena vacía (o convertirse en una cadena usando). el método toString).

expando = "cacheData" ( new Date() "") slice() // ( new Date()) toString() slice() es equivalente a expando // escribir en caché var data = function(elem name value) { // O usar métodos locales para verificar la cadena Prototipo de objeto toString call(elem) === "[Cadena de objeto]" // si elem es una cadena if (typeof elem === "string") { // escribir en caché si se pasa el nombre if (nombre! == indefinido) { cacheData[elem] = nombre } // devuelve cacheData return cacheData[elem] = nombre; // devuelve cacheData return cacheData[elem]; // si elem es un nodo DOM } else if (typeof elem === "object") { var id thisCache; // si elem no tiene un atributo expando entonces agrega un expando atributo (establezca el caché para el elemento por primera vez); de lo contrario, obtenga los valores expando e id existentes directamente if (!elem[expando]) { id = elem[expando] = thisCache = cacheData[id] = { }; } else { id = elem[expando]; thisCache = cacheData[id]; } }//Establece el número aleatorio como atributo del objeto de caché actual y usa el número aleatorio para encontrar el objeto de caché if (!thisCache[ expando]) { thisCache[expando ] = { }; } if (value ! == indefinido) { // Almacena los datos en el objeto de caché thisCache[expando][nombre] = value } // Devuelve los datos almacenados en el; DOC.

// Devuelve los datos almacenados en el elemento DOM return thisCache[expando][name]; // Elimina el caché var.} // Elimina el caché var removeData = function(elem name) { // si elem es una cadena elimina el valor directamente if (typeof elem === "string") { eliminar cacheData[elem]; // si la clave es un nodo DOM } else if (typeof elem === "object" ) { // If elem no tiene un atributo expando entonces aborta sin borrar el caché if (!elem[expando]) { return } // Detecta si el objeto está vacío.// Detecta si el objeto está vacío var isEmptyObject = function(obj) { var nombre; para (nombre en obj) { return false; } return true; removeAttr = function() { try { // IE, el navegador estándar, puede usar eliminar directamente para eliminar elem[expando]; e) { // IE /IE Utilice el método removeAttribute para eliminar el atributo elem removeAttribute(expando); // IE /IE Utilice el método removeAttribute para eliminar el caché. } id = elem[expando]; if (name) { // Solo elimina los datos especificados eliminar cacheData[id][expando][name] // Si está vacío, elimina todos los objetos de datos correspondientes a id if (isEmptyObject) { // Si está vacío, elimina todos los objetos de datos correspondientes a id if (isEmptyObject(cacheData[id][expando])){delete cacheData[id]; removeAttr(); else { // Elimina el elemento DOM; en el caché Todos los datos almacenados eliminar cacheData[id]; removeAttr(); else { // Eliminar todos los datos almacenados por los elementos DOM en el caché eliminar cacheData[id]; removeAttr() } Eliminar cacheData[id]; ); } } else { // Eliminar todos los datos almacenados en el caché para los elementos DOM } // Eliminar todos los datos almacenados en el caché para los elementos DOM.

); }}; // Engancha datos y eliminaDatos con el objeto global de ventana para acceder a ellos desde fuera win expando = expando; win data = removeData })(ventana undefinida); el código de la siguiente manera: lt; div id="demo" class="page_speeder_1704451263"gt; demo lt;/divgt;

código js Copie el código de la siguiente manera: window onload = function() { // prueba var demo = document getElementById("demo"); // escribir en caché datos(demo "myName" "hcy"); log de consola (datos(demo "myName"); // hcy data(demo " myBlog" " consola log (data(demo "myBlog"); // // Eliminar un valor almacenado en caché de un elemento DOM removeData(demo "myBlog"); console log(data(demo "myBlog")); // indefinido console log(data( demo "myName")); // hcy console log(demo[expando]); // // Eliminar elemento DOM removeData(demo) console log(demo[expando]); / Java/JSP/201311/20545