es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Cómo utilizar la API de MutationObserver para los cambios en el nodo DOM

Aquí hay un escenario: Rita, una escritora de una revista está editando un artículo suyo en línea. Guarda sus cambios y ve el mensaje "¡se guardaron los cambios!" Justo en ese momento, nota un error tipográfico que se olvidó. Lo arregla y está a punto de hacer clic en "guardar", cuando recibe una llamada telefónica enojada de su jefe.

Cuando finaliza la llamada, vuelve a la pantalla, ve "¡cambios guardados!" Apaga su computadora y sale corriendo de la oficina.

Aparte de mi ineptitud para contar historias, notamos desde ese breve escenario qué problema generaba ese persistente mensaje. Por lo tanto, en el futuro decidimos evitarlo cuando sea posible y usar uno que induce al usuario a confirmar haciendo clic en él o que desaparece por sí solo . Usar el segundo para mensajes rápidos es una buena idea.

Ya sabemos cómo hacer desaparecer un elemento de una página, por lo que no debería ser un problema. Lo que necesitamos saber es cuándo apareció? Entonces podemos hacer que desaparezca después de un tiempo plausible.

API MutationObserver

En general, cuando un elemento DOM (como un mensaje div ) o cualquier otro nodo cambia, deberíamos poder conocerlo. Durante mucho tiempo, los desarrolladores tuvieron que recurrir a hacks y frameworks debido a la falta de una API nativa. Pero eso había cambiado.

Ahora tenemos MutationObserver (anteriormente Mutation Events). MutationObserver es un objeto nativo de JavaScript con un conjunto de propiedades y métodos. Nos permite observar un cambio en cualquier nodo como elemento DOM, documento, texto, etc. Por mutación, nos referimos a la adición o eliminación de un nodo y los cambios en los atributos y datos de un nodo .

Veamos un ejemplo para una mejor comprensión. Primero haremos una configuración donde aparezca un mensaje al hacer clic en el botón, como el que vio Rita. Luego crearemos y vincularemos un observador de mutación a ese cuadro de mensaje y codificaremos la lógica para ocultar automáticamente el mensaje . ¿Comprensión?

Nota : Puede que en algún momento ya me hayas preguntado en tu cabeza " ¿Por qué no ocultar el mensaje desde el botón clic en el evento en JavaScript? "En mi ejemplo, no estoy trabajando con un servidor, por lo que, por supuesto, el cliente es responsable de mostrar el mensaje y puede ocultarlo muy fácilmente. Pero al igual que en la herramienta de edición de Rita, si el servidor es el que decide cambiar el contenido de DOM, el cliente solo puede permanecer alerta y esperar.

Primero, creamos la configuración para mostrar el mensaje al hacer clic en el botón.


 var msg = document.querySelector ('# msg'), SUCCESSMSG = "Cambios guardados!"; / * Agregar evento de clic de botón * / document .querySelector ('button') .addEventListener ('click', showMsg); función showMsg () {msg.textContent = SUCCESSMSG; msg.style.background = 'cerceta'; } 

Una vez que hayamos ejecutado la configuración inicial, hagamos lo siguiente;

  • Cree un objeto MutationObserver con una función de devolución de llamada definida por el usuario (la función se define más adelante en la publicación). La función se ejecutará en cada mutación observada por MutationObserver .
  • Crea un objeto config para especificar el tipo de mutaciones que observará el MutationObserver .
  • Vincula el MutationObserver al objetivo, que es el div 'msg' en nuestro ejemplo.
 (function startObservation () {var / * 1) Crea un objeto MutationObserver * / observer = new MutationObserver (function (mutations) {mutationObserverCallback (mutations);}), / * 2) Crea un objeto config * / config = {childList: cierto}; / * 3) Glue'em all * / observer.observe (msg, config); }) (); 

A continuación hay una lista de propiedades para el objeto config que identifica los diferentes tipos de mutaciones. Como en nuestro ejemplo solo tratamos con un nodo de texto hijo creado para el texto del mensaje, hemos utilizado la propiedad childList .

Tipos de mutaciones observadas

PropiedadCuando se establece en true
childListSe observa la inserción y eliminación de los nodos secundarios del objetivo.
atributosSe observan cambios en los atributos del objetivo.
characterDataSe observan cambios en los datos del objetivo.

Ahora, a esa función de devolución de llamada que se ejecuta en cada mutación observada.

 function mutationObserverCallback (mutations) {/ * Coge la primera mutación * / var mutationRecord = mutations [0]; / * Si se agregó un nodo secundario, oculte el mensaje después de 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000); } function hideMsg () {msg.textContent = ''; msg.style.background = 'none'; } 

Como solo estamos agregando un mensaje al div, obtendremos la primera mutación observada y comprobaremos si se insertó un nodo de texto. Si tenemos más de un cambio, podemos pasar por el conjunto de mutations .

Cada mutación en la matriz de mutations está representada por el objeto MutationRecord con las siguientes propiedades.

Propiedades de MutationRecord

PropiedadDevoluciones
additionalNodesMatriz vacía o matriz de nodos añadidos.
Nombre del AtributoNulo o nombre del atributo que se agregó, eliminó o modificó.
attributeNamespaceNulo o espacio de nombre del atributo que se agregó, eliminó o modificó.
proximo hermanoNulo o siguiente hermano del nodo que se agregó o eliminó.
valor antiguoValor nulo o anterior del atributo o datos modificados.
anteriorSiblingNulo o hermano anterior del nodo que se agregó o eliminó.
removedNodesMatriz vacía o matriz de nodos eliminados.
objetivoNodo al que apunta el MutationObserver
tipoTipo de mutación observada.

Y eso es. solo tenemos que armar el código para el paso final.

Soporte del navegador

Referencia
  • "W3C DOM4 Mutation Observer". W3C. Web. 19 de junio de 2015
  • "MutationObserver". Mozilla Developer Network . Web. 19 de junio de 2015.

Comprima y optimice imágenes hasta en un 90% con Compressor.io

Comprima y optimice imágenes hasta en un 90% con Compressor.io

En el pasado, cubrimos muchos consejos de optimización de imágenes para diseñadores web. Pero nuevas herramientas surgen todo el tiempo y Compressor es uno de los mejores.Es una aplicación web gratuita que puede tomar cualquier cantidad de imágenes (menos de 10 MB) y optimizar el tamaño de sus archivos sin pérdida de calidad . Norma

(Consejos de tecnología y diseño)

Los mejores juegos de teléfonos inteligentes para poner tu cerebro a prueba

Los mejores juegos de teléfonos inteligentes para poner tu cerebro a prueba

Soy un fanático de la sangre derramando MMORPGs. Pero cada vez que necesito un poco de entretenimiento liviano y divertido para aceitar mi mente, juego juegos cerebrales (a veces durante semanas seguidas).Si estás bajo el hechizo de ganancia de cerebro en estos días, entonces tengo la colección correcta para ti. Aq

(Consejos de tecnología y diseño)