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.

Mostrar mensaje 

 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

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

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

Soporte del navegador

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

Brillante uso de listas HTML en diseño web

Puede encontrar listas bien diseñadas en todo Internet. Los diseñadores los han usado durante décadas para coordinar la información de la página y los diseños, y en la web de hoy se puede ver la gran creatividad en la forma en que los diseñadores web utilizan las listas. ¡Estos incluyen menús de navegación, enlaces de perfil, archivos, tareas / listas de verificación y muchísimos otros usos!En esta pub

(Consejos de tecnología y diseño)

Pokémon Go celebra Acción de Gracias con Double XP, Stardust y más

Los jugadores de Pokémon Go se regocijan ya que Niantic ha actualizado el juego para permitir a los jugadores subir de nivel a sus personajes y Pokémon más rápido como una celebración de Acción de Gracias.Desde el 23 de noviembre hasta el 30 de noviembre, todos los jugadores recibirán el doble de XP y Stardust de todas las fuentes . Ya se

(Consejos de tecnología y diseño)