Hoe MutationObserver API te gebruiken voor DOM Node Changes

Hier is een scenario: Rita, een tijdschriftschrijver, bewerkt een artikel van haar online. Ze slaat haar wijzigingen op en ziet het bericht 'Wijzigingen opgeslagen!'. Op dat moment merkt ze een typefout op die ze heeft gemist. Ze repareert het en staat op "opslaan", wanneer ze een boos telefoongesprek krijgt van haar baas.

Nadat het telefoongesprek is afgelopen, keert ze terug naar het scherm en ziet 'wijzigingen opgeslagen!' Haar computer af en stormt het kantoor uit.

Afgezien van mijn onbekwaamheid voor het vertellen van verhalen, merkten we uit dat korte scenario op wat voor moeite die aanhoudende boodschap werd gebrouwen. Dus, in de toekomst besluiten we het te vermijden wanneer mogelijk en gebruiken we een die de gebruiker vraagt ​​om te bevestigen door erop te klikken - of zelf verdwijnt . Het gebruik van de tweede voor snelle berichten is een goed idee.

We weten al hoe je een element van een pagina kunt laten verdwijnen, dus dat zou geen probleem moeten zijn. Wat we moeten weten, is wanneer is het gebeurd? Zodat we het na een plausibele tijd kunnen laten verdwijnen.

MutationObserver API

Over het algemeen zouden we in staat moeten zijn om het te weten wanneer een DOM-element (zoals een bericht- div ) of een ander knooppunt verandert. Lange tijd moesten ontwikkelaars vertrouwen op hacks en frameworks vanwege het ontbreken van een native API. Maar dat was veranderd.

We hebben nu MutationObserver (voorheen mutatie-evenementen). MutationObserver is een JavaScript-native object met een reeks eigenschappen en methoden. Hiermee kunnen we een wijziging in een knooppunt zoals DOM-element, document, tekst, enzovoort bekijken. Met mutatie bedoelen we de toevoeging of verwijdering van een knooppunt en wijzigingen in het attribuut en de gegevens van een knooppunt .

Laten we een voorbeeld zien voor een beter begrip. We zullen eerst een set-up maken waar een bericht verschijnt bij een klik op de knop, zoals Rita zag. Vervolgens maken en koppelen we een waarnemer van mutaties aan dat berichtvenster en coderen we de logica om het bericht automatisch te verbergen . Savvy?

Opmerking : misschien heb je het op een gegeven moment al in je hoofd gevraagd " Waarom verberg je het bericht niet gewoon in de knopklikgebeurtenis zelf in JavaScript? "In mijn voorbeeld werk ik niet met een server, dus de klant is natuurlijk verantwoordelijk om het bericht te tonen en kan het te gemakkelijk verbergen. Maar net als in de bewerkingstool van Rita als de server degene is die beslist om de DOM-inhoud te wijzigen, kan de client alleen maar alert blijven en wachten.

Eerst maken we de instellingen om het bericht weer te geven bij klikken op de knop.

Toon bericht 

 var msg = document.querySelector ('# msg'), SUCCESSMSG = "Wijzigingen opgeslagen!"; / * Knopklikgebeurtenis * / document .querySelector ('knop') .addEventListener ('klik', showMsg); function showMsg () {msg.textContent = SUCCESSMSG; msg.style.background = 'teal'; } 

Zodra we de eerste setup hebben uitgevoerd, kunnen we het volgende doen;

• Maak een MutationObserver object met een door de gebruiker gedefinieerde callback-functie (de functie wordt later in het bericht gedefinieerd). De functie wordt uitgevoerd op elke mutatie die door de MutationObserver waargenomen.
• Maak een config-object om het soort mutaties op te geven dat moet worden waargenomen door de MutationObserver .
• Bind de MutationObserver aan het doel, dat is de 'msg' div in ons voorbeeld.

 (function startObservation () {var / * 1) Maak een MutationObserver-object * / observer = nieuwe MutationObserver (functie (mutaties) {mutationObserverCallback (mutaties);}), / * 2) Maak een config-object * / config = {childList: true}; / * 3) Lijm ze allemaal * / observer.observe (msg, config); }) (); 

Hieronder is een lijst met eigenschappen voor het config object die de verschillende soorten mutaties identificeren. Omdat we in ons voorbeeld alleen omgaan met een onderliggende childList gemaakt voor de berichttekst, hebben we de eigenschap childList gebruikt.

Soorten mutaties waargenomen

Nu naar die callback-functie die wordt uitgevoerd op elke waargenomen mutatie.

 functie mutatieObserverCallback (mutaties) {/ * Pak de eerste mutatie * / var-mutatieRecord = mutaties [0]; / * Als een kindknooppunt is toegevoegd, verbergt u het bericht na 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000); } function hideMsg () {msg.textContent = ''; msg.style.background = 'none'; } 

Omdat we alleen een bericht aan de div, nemen we de eerste mutatie die erop is waargenomen en controleren we of er een tekstknoop is ingevoegd. Als we meer dan één verandering hebben, kunnen we gewoon door de array mutations bladeren.

Elke mutatie in de mutations array wordt gerepresenteerd door het object MutationRecord met de volgende eigenschappen.

Eigenschappen van MutationRecord

En dat is het. we moeten gewoon de code samenvoegen voor de laatste stap.

Browserondersteuning

• "W3C DOM4 Mutation Observer." W3C. Web. 19 juni 2015
• "MutationObserver." Mozilla Developer Network . Web. 19 juni 2015.

Ontwerpers: ontvang gratis SVG-achtergrondpatronen van hero-patronen

Alle moderne webbrowsers ondersteunen SVG en het is de meest flexibele afbeeldingsindeling die u kunt gebruiken. Maar het is geen eenvoudige taak om aangepaste SVG's helemaal opnieuw te ontwerpen .Daarom kan een tool als Hero Patterns zo waardevol zijn voor ontwerpers. Het is een gratis bibliotheek met herhaalbare SVG-patronen die u kunt aanpassen met verschillende stijlen, kleuren en opaciteit

(Technische en ontwerptips)

Creëer eenvoudig HTML5-animaties met HTML5Maker

Wil je lezers meenemen, met geanimeerde en interactieve inhoud ? Hoewel dit vroeger het domein van Flash was - wat resulteerde in veel laadtijd en mogelijke compatibiliteitsproblemen - is HTML5 snel de dominante methode geworden voor het maken van geanimeerde en interactieve webinhoud.Natuurlijk heeft niet iedereen de tijd of de vaardigheden om HTML5-inhoud te coderen; als je een van die mensen bent, is HTML5Maker misschien iets dat je zou moeten proberen

(Technische en ontwerptips)