Så här använder du MutationObserver API för DOM Node Changes

Här är ett scenario: Rita, en tidningsförfattare redigerar en artikel av hennes online. Hon sparar sina förändringar och ser meddelandet “ändringar sparade!” Just då märker hon ett typsnitt som hon saknat. Hon fixar det och är på väg att klicka “spara”, när hon får ett arg telefonsamtal från sin chef.

När samtalet är över, vänder hon tillbaka till skärmen, ser “ändringar sparade!” stänger av sin dator och stormar ur kontoret.

Bortsett från min ojämnhet för berättande, så märkte vi från det korta scenariot vilka problem det kvarhållande budskapet bryggde. Så i framtiden bestämmer vi oss för att undvika det när det är möjligt och använd en som antingen uppmanar användaren att erkänna genom att klicka på den - eller försvinner på egen hand. Att använda den andra för snabbmeddelanden är en bra idé.

Vi vet redan hur man försvinner ett element från en sida, så det borde inte vara ett problem. Vad vi behöver veta är när visade det sig? Så vi kan göra det försvinner efter en rimlig tid.

MutationObserver API

Sammantaget när ett DOM-element (som ett meddelande div) eller någon annan nod ändras, borde vi kunna känna till det. Under lång tid hade utvecklarna lita på hack och ramverk på grund av bristen på ett inbyggt API. Men det hade förändrats.

Vi har nu MutationObserver (tidigare mutationshändelser). MutationObserver är ett JavaScript-inbyggt objekt med en uppsättning egenskaper och metoder. Det låter oss observera en ändring på vilken nod som helst som DOM Element, Document, Text, etc. Med mutation menar vi tillägg eller borttagning av en nod och ändringar i en nods attribut och data.

Låt oss se ett exempel för bättre förståelse. Vi gör först en uppsättning där ett meddelande visas vid knapptryckning, som den ena Rita-sågen. Då ska vi skapa och länka en mutationsobservatör till den meddelandeboxen och kod logiken för att dölja meddelandet automatiskt. Smart?

Notera: Du kan någon gång eller har redan frågat mig i ditt huvud “Varför inte bara dölja meddelandet från inuti knappen klicka på händelsen själv i JavaScript?” I mitt exempel arbetar jag inte med en server, så självklart är klienten ansvarig för att visa meddelandet och kan gömma det för lätt. Men som i Ritas redigeringsverktyg om servern är den som bestämmer sig för att ändra DOM-innehållet, kan klienten bara vara alert och vänta.

Först skapar vi inställningen för att visa meddelandet på knappen klicka.

 Visa meddelande

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Ändringar sparas!"; / * Lägg till knappen klicka händelse * / dokument .querySelector ('button') .addEventListener ('klicka', visaMsg); funktion showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

När vi fått den ursprungliga konfigurationen körs, gör följande:

• Skapa en MutationObserver objekt med en användardefinierad återuppringningsfunktion (funktionen definieras senare i posten). Funktionen kommer att utföras på varje mutation observerad av MutationObserver.
• Skapa ett konfigurationsobjekt för att ange vilken typ av mutationer som ska observeras av MutationObserver.
• Binda in MutationObserver till målet, vilket är "msg" div i vårt exempel.

(funktionsstartObservation () var / * 1) Skapa ett MutationObserver-objekt * / observatör = ny MutationObserver (funktion (mutationer) mutationObserverCallback (mutationer);), / * 2) Skapa ett configobjekt * / config = childList: Sann; / * 3) Lim'em alla * / observer.observe (msg, config); ) (); 

Nedan är en lista över egenskaper för config objekt som identifierar de olika typerna av mutationer. Eftersom vi i vårt exempel bara handlar om en barntextnod skapad för meddelandetexten, har vi använt listamed fast egendom.

Typer av mutationer observerade

Nu till den återuppringningsfunktionen som utförs på varje observerad mutation.

funktion mutationObserverCallback (mutationer) / * Ta den första mutationen * / var mutationRecord = mutationer [0]; / * Om en barnnod läggs till döljer du meddelandet efter 2s * / om (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  funktion hideMsg () msg.textContent = "; msg.style.background = 'none'; 

Eftersom vi bara lägger till ett meddelande till div, vi tar bara den första mutationen som observerats på den och kontrollerar om en textnod infördes. Om vi ​​får fler än en förändring, kan vi bara gå igenom mutationer array.

Varje mutation i mutationer array representeras av objektet MutationRecord med följande egenskaper.

Egenskaper hos MutationRecord

Och det är allt. vi måste bara sätta koden tillsammans för sista steget.

Webbläsarsupport

Referens

• “W3C DOM4 Mutation Observer.” W3C. Webb. 19 juni 2015
• “MutationObserver.” Mozilla Developer Network. Webb. 19 juni 2015.