Jak použít MutationObserver API pro změny uzlu DOM

Zde je scénář: Rita, spisovatelka časopisu, edituje článek jejích online. Zachrání její změny a uvidí zprávu “Změny uloženy!” V tu chvíli si všimne překlepu, který jí chyběla. Ona to opraví a chystá se kliknout “Uložit”, když dostane rozzlobený telefonní hovor od svého šéfa.

Po ukončení hovoru se otočí zpět na obrazovku a uvidí “Změny uloženy!” vypne počítač a zaútočí z kanceláře.

Kromě mé nezdvořilosti pro vyprávění příběhů jsme si z tohoto krátkého scénáře všimli, jaký problém způsobuje přetrvávající zpráva. Takže v budoucnu se rozhodneme, že se tomu vyhneme, pokud je to možné, a použijeme ten, který buď vyzve uživatele, aby to potvrdil kliknutím - nebo zmizí sám. Použití druhého pro rychlé zprávy je dobrý nápad.

Už víme, jak prvek ze stránky zmizí, takže by to neměl být problém. To, co potřebujeme vědět, je kdy to vypadalo? Můžeme to udělat tak, že zmizí po hodné době.

MutationObserver API

Celkově, když je prvek DOM (jako zpráva div) nebo jakékoli jiné změny uzlu, měli bychom to vědět. Dlouhodobě se vývojáři museli spoléhat na hacky a rámce kvůli nedostatku nativního API. Ale to se změnilo.

Teď máme MutationObserver (dříve mutační události). MutationObserver je nativní objekt JavaScript se sadou vlastností a metod. Umožňuje nám to pozorovat změnu v každém uzlu jako DOM Element, Dokument, Text, atd. Mutací máme na mysli přidání nebo odebrání uzlu a změny atributu a dat uzlu.

Podívejme se na příklad pro lepší pochopení. Nejdříve provedeme nastavení, kde se po kliknutí na tlačítko objeví hlášení, jako to viděla Rita. Pak budeme vytvořit a propojit pozorovatele mutací s tímto oknem zpráv a kódovat logiku, aby se zpráva automaticky skryla. Savvy?

Poznámka: V určitém okamžiku se můžete zeptat ve své hlavě “Proč ne jen skrýt zprávu z vnitřku události kliknutí tlačítka v JavaScriptu?” V mém příkladu nepracuji se serverem, takže klient je samozřejmě zodpovědný za to, aby zprávu zobrazil a mohl ji snadno skrýt. Ale stejně jako v editačním nástroji Rity, pokud je server ten, kdo se rozhodne změnit obsah DOM, může klient zůstat pouze v pohotovosti a čekat.

Nejprve vytvoříme nastavení pro zobrazení zprávy na tlačítku.

 Zobrazit zprávu

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Změny uloženy!"; / * Přidat tlačítko click event * / document .querySelector ('button') .addEventListener ('click', showMsg); function showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Jakmile se nám podaří spustit počáteční nastavení, proveďte následující;

• Vytvořit MutationObserver objekt s uživatelem definovanou funkcí zpětného volání (funkce je definována později v příspěvku). Funkce bude provedena při každé mutaci pozorované pomocí MutationObserver.
• Vytvořte objekt config a určete druh mutací, které mají být sledovány MutationObserver.
• Navázat MutationObserver k cíli, což je „msg“ div v našem příkladu.

(funkce startObservation () var / * 1) Vytvořte objekt MutationObserver * / observer = new MutationObserver (funkce (mutace) mutationObserverCallback (mutace);), / * 2) Vytvořte konfigurační objekt * / config = childList: skutečný; / * 3) Glue'em all * / observer.observe (msg, config); ) (); 

Níže je uveden seznam vlastností config objekt identifikující různé druhy mutací. Vzhledem k tomu, že v našem příkladu se zabýváme pouze dětským uzlem vytvořeným pro text zprávy, použili jsme tento childList vlastnictví.

Pozorované druhy mutací

Nyní k této funkci zpětného volání, která se provede na každé pozorované mutaci.

funkce mutaceObserverCallback (mutace) / * Uchopte první mutaci * / var mutationRecord = mutace [0]; / * Pokud byl přidán podřízený uzel, skryjte zprávu po 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  function hideMsg () msg.textContent = "; msg.style.background = 'none'; 

Protože jsme jen přidali zprávu div, vezmeme jen první mutaci, která byla pozorována a zkontrolujeme, zda byl vložen textový uzel. Pokud se stane více než jedna změna, můžeme jen projít mutací pole.

Každá mutace v mutací pole je reprezentováno objektem MutationRecord s následujícími vlastnostmi.

Vlastnosti MutationRecord

A to je vše. musíme jen dát dohromady kód pro poslední krok.

Podpora prohlížeče

Odkaz

• “Pozorovatel mutace W3C DOM4.” W3C. Web. 19. června 2015
• “MutationObserver.” Mozilla Developer Network. Web. 19. června 2015.