Ako používať MutationObserver API pre zmeny uzla DOM

Tu je scenár: Rita, spisovateľka časopisu upravuje svoj článok on-line. Uloží svoje zmeny a zobrazí správu “uložené zmeny!” Práve potom si všimla preklep, ktorú stratila. Opravuje to a chystá sa kliknúť “uložiť”, keď dostane rozhnevaný telefonát od svojho šéfa.

Po skončení hovoru sa vráti na obrazovku, vidí “uložené zmeny!” vypne počítač a vyrazí z kancelárie.

Okrem mojej neochoty rozprávať príbeh sme si z tohto krátkeho scenára všimli, aké ťažkosti sa varenie pretrvávajúcej správy. Takže v budúcnosti sa rozhodneme vyhnúť sa, ak je to možné, a použijeme taký, ktorý buď vyzve užívateľa na potvrdenie kliknutím - alebo zaniká sama. Použitie druhého pre rýchle správy je dobrý nápad.

Už vieme, ako urobiť prvok zmiznúť zo stránky, takže by nemal byť problém. Potrebujeme vedieť kedy sa to ukázalo? Takže môžeme zmiznúť po prijateľnom čase.

MutationObserver API

Celkovo, keď prvok DOM (ako správa div) alebo akýmkoľvek iným uzlom, mali by sme to vedieť. Po dlhú dobu sa vývojári museli spoliehať na hacks a rámce kvôli nedostatku natívneho rozhrania API. Ale to sa zmenilo.

Teraz máme MutationObserver (predtým Mutačné udalosti). MutationObserver je natívny objekt typu JavaScript s množinou vlastností a metód. Umožňuje to sledovať zmenu v každom uzle ako prvok DOM, dokument, text atď. Mutáciou rozumieme pridanie alebo odstránenie uzla a zmeny atribútu a údajov uzla.

Pozrime sa na príklad pre lepšie porozumenie. Najskôr si vytvoríme nastavenie tam, kde sa po stlačení tlačidla zobrazí správa, podobne ako tá, ktorú Rita videl. Potom to urobíme vytvoriť a prepojiť pozorovateľa mutácie s touto schránkou správ a kód logiky na automatické skrytie správy. pútavé?

Poznámka: Môžete sa v určitom okamihu alebo sa ma už pýtate vo svojej hlave “Prečo nielen skryť správu zvnútra samotnej udalosti click kliknutia v jazyku JavaScript?” V mojom príklade nepracujem so serverom, takže klient je samozrejme zodpovedný za zobrazenie správy a môže ju ľahko skryť. Ale rovnako ako v nástroji Rita na úpravu, ak je server ten, ktorý sa rozhodne zmeniť obsah DOM, klient môže zostať len upozornený a čakať.

Najprv vytvoríme nastavenie na zobrazenie správy po kliknutí na tlačidlo.

 Zobraziť správu

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Zmeny uložené!"; / * Pridať tlačidlo tlačidlo udalosti * / document .querySelector ('tlačidlo'). AddEventListener ('kliknite', showMsg); funkcia showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Po spustení pôvodného nastavenia vykonajte nasledovné kroky:

• Vytvor MutationObserver objekt s používateľom definovanou funkciou spätného volania (funkcia je definovaná neskôr v príspevku). Funkcia sa bude vykonávať pri každej mutácii pozorovanej MutationObserver.
• Vytvorte konfigurovateľný objekt, ktorý špecifikuje druh mutácií, ktoré majú byť dodržané MutationObserver.
• Priviazať MutationObserver k cieľu, ktorým je "msg" div v našom príklade.

()), / * 2) Vytvorte objekt config * / config = childList: *) * Vytvorte objekt MutationObserver * / observer = true; / * 3) Glue'em všetko * / observer.observe (msg, config); ) (); 

Nižšie je uvedený zoznam vlastností pre config objekt identifikujúci rôzne druhy mutácií. Vzhľadom k tomu, že v našom príklade sa zaoberáme výhradne uzlovým textovým uzlom vytvoreným pre text správy, použili sme ho podřízenémseznamu vlastnosť.

Pozorovali sa druhy mutácií

Teraz, na túto funkciu spätného volania, ktorá sa spustí na každú pozorovanú mutáciu.

funkčná mutáciaObserverCallback (mutácie) / * Uchopenie prvej mutácie * / var mutationRecord = mutácie [0]; / * Ak bol pridaný dieťa uzol, skryť msg po 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  funkcia hideMsg () msg.textContent = "; msg.style.background = 'žiadne'; 

Keďže pridávame iba správu div, jednoducho chystáme prvú mutáciu pozorovanú na ňom a skontrolujeme, či bol vložený textový uzol. Ak sa stane viac ako jedna zmena, môžeme jednoducho prejsť cez mutácie rad.

Každá mutácia v mutácie pole je reprezentované objektom MutationRecord s nasledujúcimi vlastnosťami.

Vlastnosti MutationRecord

A ... to je ono. jednoducho musíme uviesť kód pre posledný krok.

Podpora prehliadača

referencie

• “W3C DOM4 Mutation Observer.” W3C. Web. 19. júna 2015
• “MutationObserver.” Mozilla Developer Network. Web. 19. júna 2015.