Come utilizzare l'API MutationObserver per le modifiche ai nodi DOM

Ecco uno scenario: Rita, uno scrittore di riviste sta modificando un suo articolo online. Salva i suoi cambiamenti e vede il messaggio “modifiche salvate!” Proprio in quel momento, si accorge di un errore tipografico che le mancava. Lei lo aggiusta e sta per cliccare “salvare”, quando riceve una telefonata arrabbiata dal suo capo.

Dopo che la chiamata è finita, torna allo schermo, vede “modifiche salvate!” spegne il suo computer e si precipita fuori dall'ufficio.

A parte la mia inettitudine per il racconto, abbiamo notato da quel breve scenario quali problemi quel messaggio persistente ha prodotto. Quindi, in futuro, decidiamo di evitarlo quando possibile e usarne uno che richiede all'utente di confermare facendo clic su di esso - o svanisce da solo. Usare la seconda per un messaggio veloce è una buona idea.

Sappiamo già come far scomparire un elemento da una pagina, quindi non dovrebbe essere un problema. Quello che dobbiamo sapere è quando è apparso? Quindi possiamo farlo sparire dopo un tempo plausibile.

API MutationObserver

Nel complesso, quando un elemento DOM (come un messaggio div) o qualsiasi altro cambiamento di nodo, dovremmo essere in grado di conoscerlo. Per molto tempo gli sviluppatori hanno dovuto fare affidamento su hack e framework a causa della mancanza di un'API nativa. Ma quello era cambiato.

Ora abbiamo MutationObserver (precedentemente Eventi mutazionali). MutationObserver è un oggetto nativo JavaScript con un insieme di proprietà e metodi. Ci lascia osservare una modifica su qualsiasi nodo come elemento DOM, documento, testo, ecc. Per mutazione, intendiamo l'aggiunta o la rimozione di un nodo e le modifiche all'attributo e ai dati di un nodo.

Vediamo un esempio per una migliore comprensione. Per prima cosa configureremo dove appare un messaggio al clic del pulsante, come quello che vide Rita. Allora lo faremo crea e collega un osservatore di mutazione a quella finestra di messaggio e codifica la logica per nascondere automaticamente il messaggio. Esperto?

Nota: Potresti ad un certo punto o già mi hai chiesto nella tua testa “Perché non nascondere semplicemente il messaggio dall'interno del clic sul pulsante stesso in JavaScript?” Nel mio esempio, non sto lavorando con un server, quindi ovviamente il cliente è responsabile di mostrare il messaggio e può nasconderlo troppo facilmente. Ma come nello strumento di editing di Rita se il server è quello che decide di modificare il contenuto DOM, il client può solo stare in allerta e aspettare.

Per prima cosa, creiamo la configurazione per mostrare il messaggio al clic del pulsante.

 Mostra messaggio

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Modifiche salvate!"; / * Aggiungi pulsante clic evento * / documento .querySelector ('pulsante') .addEventListener ('clic', showMsg); function showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Una volta eseguita la configurazione iniziale, facciamo quanto segue;

• Creare un MutationObserver oggetto con una funzione di callback definita dall'utente (la funzione viene definita successivamente nel post). La funzione verrà eseguita su ogni mutazione osservata dal MutationObserver.
• Creare un oggetto config per specificare il tipo di mutazioni che devono essere osservate dal MutationObserver.
• Lega il MutationObserver al bersaglio, che è il "msg" div nel nostro esempio.

(function startObservation () var / * 1) Crea un oggetto MutationObserver * / observer = new MutationObserver (function (mutations) mutationObserverCallback (mutations);), / * 2) Crea un oggetto config * / config = childList: vero; / * 3) Glue'em all * / observer.observe (msg, config); ) (); 

Di seguito è riportato un elenco di proprietà per config oggetto che identifica i diversi tipi di mutazioni. Dal momento che nel nostro esempio abbiamo a che fare solo con un nodo di testo figlio creato per il testo del messaggio, abbiamo usato il childList proprietà.

Tipi di mutazioni osservate

Ora, a quella funzione di callback che viene eseguita su ogni mutazione osservata.

function mutationObserverCallback (mutations) / * Prendi la prima mutazione * / var mutationRecord = mutations [0]; / * Se è stato aggiunto un nodo figlio, nascondi il messaggio dopo 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  function hideMsg () msg.textContent = "; msg.style.background = 'none'; 

Dal momento che stiamo aggiungendo un messaggio solo al div, prendiamo semplicemente la prima mutazione osservata su di essa e controlliamo se è stato inserito un nodo di testo. Se dovessimo avere più di un cambiamento, possiamo semplicemente scorrere il mutazioni schieramento.

Ogni mutazione nel mutazioni la matrice è rappresentata dall'oggetto MutationRecord con le seguenti proprietà.

Proprietà di MutationRecord

E ... questo è tutto. dobbiamo solo mettere insieme il codice per il passaggio finale.

Supporto del browser

Riferimento

• “W3C DOM4 Mutation Observer.” W3C. Web. 19 giugno 2015
• “MutationObserver.” Mozilla Developer Network. Web. 19 giugno 2015.