nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


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.


 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

EigendomIndien ingesteld op true
childListInsertie en verwijdering van de child-knooppunten van het doel worden waargenomen.
attributenVeranderingen in kenmerken van het doelwit worden waargenomen.
characterDataVeranderingen in de gegevens van het doelwit worden 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

EigendomKomt terug
addedNodesLege array of reeks knooppunten toegevoegd.
attribuut naamNull of naam van het kenmerk dat is toegevoegd, verwijderd of gewijzigd.
attributeNamespaceNull of naamruimte van het kenmerk dat is toegevoegd, verwijderd of gewijzigd.
nextSiblingNull of volgende broer of zus van het knooppunt dat is toegevoegd of verwijderd.
OldValueNull of vorige waarde van het attribuut of de gegevens veranderd.
previousSiblingNull of vorige broer of zus van het knooppunt dat is toegevoegd of verwijderd.
removedNodesLege array of array van knooppunten die zijn verwijderd.
doelwitKnooppunt getarget door de MutationObserver
typeType mutatie waargenomen.

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

Browserondersteuning

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

Codering van een sierlijk broodkruimel navigatiemenu in CSS3

Codering van een sierlijk broodkruimel navigatiemenu in CSS3

Dit artikel maakt deel uit van onze "HTML5 / CSS3 Tutorials-serie" - speciaal bedoeld om u een betere ontwerper en / of ontwikkelaar te maken. Klik hier om meer artikelen uit dezelfde serie te zien. Navigatiemenu's en koppelingen zijn mogelijk de belangrijkste interface-elementen voor een weblay-out

(Technische en ontwerptips)

20 gratis Photoshop-acties die alle ontwerpers moeten hebben

20 gratis Photoshop-acties die alle ontwerpers moeten hebben

Geautomatiseerde scripts besparen tijd en verbeteren de workflow in alle creatieve velden. Adobe-producten zoals Photoshop bieden scripts die acties worden genoemd en die een proces meerdere keren automatiseren met één klik op een knop. Er zijn exclusieve Photoshop-actiesites, maar veel ervan richten zich op fotografen.I

(Technische en ontwerptips)