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, nota un errore tipografico che le mancava. Lo aggiusta e sta per cliccare su "salva", quando riceve una telefonata arrabbiata dal suo capo.

Dopo che la chiamata è finita, torna allo schermo, vede "le 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 svanire 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 nodo cambia, 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 Mutation Events). MutationObserver è un oggetto nativo JavaScript con un insieme di proprietà e metodi. Ci consente di 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. Prima creeremo un set dove appare un messaggio al clic del pulsante, come quello che vide Rita. Quindi creeremo e collegheremo un osservatore di mutazione a quella finestra di messaggio e codificheremo la logica per nascondere automaticamente il messaggio . Esperto?

Nota : puoi ad un certo punto o mi hai già chiesto in testa " Perché non nascondere semplicemente il messaggio dall'interno del click 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 oggetto MutationObserver con una funzione di callback definita dall'utente (la funzione viene definita successivamente nel post). La funzione verrà eseguita su ogni mutazione osservata da MutationObserver .
• Creare un oggetto config per specificare il tipo di mutazioni che devono essere osservate da MutationObserver .
• Collega il MutationObserver alla destinazione, che è il div "msg" 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 l'oggetto config che identifica i diversi tipi di mutazioni. Poiché nel nostro esempio ci occupiamo solo di un nodo di testo figlio creato per il testo del messaggio, abbiamo utilizzato la proprietà childList .

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 esso e controlliamo se è stato inserito un nodo di testo. Se si verificano più di una modifica, possiamo semplicemente scorrere l'array di mutations .

Ogni mutazione nell'array delle mutations è 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

• "W3C DOM4 Mutation Observer." W3C. Web. 19 giugno 2015
• "MutationObserver." Rete di sviluppatori Mozilla . Web. 19 giugno 2015.

BioHacks: 6 Cases How Tech Upgraded Human Abilities

Se i piercing ti fanno sentire schizzinoso, potresti saltare questo post. Ancora qui? Grande. Sareste sorpresi dal tipo di cose che le persone stanno mettendo o attaccando a parti del loro corpo per migliorare la loro capacità di fare qualcosa.In questo post vedremo 6 diversi modi in cui alcuni coraggiosi hanno cercato di usare la tecnologia per compensare una disabilità o per dare loro "poteri speciali".

(Consigli tecnici e di design)

Facebook to roll Out "Mid-roll" annunci presto e condividerà le sue entrate con editori

Il servizio video di Facebook è pronto per fare il passo successivo, come le fonti del settore avrebbero riferito a Recode che il servizio di social media inizierà a testare un nuovo formato di annunci "mid-roll" per i video pubblicati su Facebook .Dal punto di vista dell'esecuzione, il formato di annunci "mid-roll" di Facebook consentirebbe agli editori di video di inserire annunci nei loro video clip che durano almeno 90 secondi .

(Consigli tecnici e di design)