Verwendung der MutationObserver-API für DOM-Knotenänderungen

Hier ist ein Szenario: Rita, eine Magazinautorin, bearbeitet einen Artikel von ihr online. Sie speichert ihre Änderungen und sieht die Meldung "Änderungen gespeichert!" In diesem Moment bemerkt sie einen Tippfehler, den sie verpasst hat. Sie behebt es und will gerade auf "Speichern" klicken, als sie einen wütenden Anruf von ihrem Chef bekommt.

Nachdem der Anruf beendet ist, kehrt sie zum Bildschirm zurück, sieht "Änderungen gespeichert!", Schaltet ihren Computer aus und stürmt aus dem Büro.

Abgesehen von meiner Unfähigkeit, Geschichten zu erzählen, bemerkten wir aus diesem kurzen Szenario, welche Schwierigkeiten diese persistente Nachricht gebraut hatte. In Zukunft werden wir daher versuchen, dies möglichst zu vermeiden und einen Benutzer zu verwenden, der ihn entweder durch Anklicken anklickt oder von selbst verschwindet . Die Verwendung der zweiten für eine schnelle Nachricht ist eine gute Idee.

Wir wissen bereits, wie man ein Element von einer Seite verschwinden lässt, also sollte das kein Problem sein. Was müssen wir wissen, wann ist es erschienen? So können wir es nach einer plausiblen Zeit verschwinden lassen.

MutationObserver-API

Wenn sich ein DOM-Element (wie ein Nachrichten- div ) oder ein anderer Knoten ändert, sollten wir es insgesamt wissen können. Entwickler mussten sich lange auf Hacks und Frameworks verlassen, da eine native API fehlte. Aber das hatte sich geändert.

Wir haben jetzt MutationObserver (früher Mutation Events). MutationObserver ist ein natives JavaScript-Objekt mit einer Reihe von Eigenschaften und Methoden. Es erlaubt uns , eine Änderung an jedem Knoten wie DOM-Element, Dokument, Text usw. zu beobachten. Mit Mutation meinen wir das Hinzufügen oder Entfernen eines Knotens und Änderungen an den Attributen und Daten eines Knotens .

Lassen Sie uns ein Beispiel zum besseren Verständnis sehen. Wir werden zuerst eine Einrichtung einrichten, bei der eine Nachricht auf Knopfdruck erscheint, wie die, die Rita sah. Dann erstellen und verknüpfen wir einen Mutationsbeobachter mit dieser Nachrichtenbox und codieren die Logik, um die Nachricht automatisch auszublenden . Kapieren?

Hinweis : Sie können irgendwann in meinem Kopf oder schon gefragt haben: " Warum verstecken Sie nicht einfach die Nachricht aus dem Button Click Event selbst in JavaScript? "In meinem Beispiel arbeite ich nicht mit einem Server, also ist der Client natürlich dafür verantwortlich, die Nachricht zu zeigen und kann sie zu leicht verstecken. Aber wie in Ritas Bearbeitungswerkzeug, wenn der Server derjenige ist, der den DOM-Inhalt ändert, kann der Client nur wachsam bleiben und warten.

Zuerst erstellen wir das Setup, um die Nachricht beim Klick auf die Schaltfläche anzuzeigen.

Zeige Nachricht 

 var msg = document.querySelector ('# msg'), SUCCESSMSG = "Änderungen gespeichert!"; / * Add button click event * / Dokument .querySelector ('button') .addEventListener ('click', showMsg); Funktion showMsg () {msg.textContent = SUCCESSMSG; msg.style.background = 'aquamarin'; } 

Sobald wir die Ersteinrichtung ausgeführt haben, können wir Folgendes tun:

• Erstellen Sie ein MutationObserver Objekt mit einer benutzerdefinierten Rückruffunktion (die Funktion wird später im Post definiert). Die Funktion wird bei jeder vom MutationObserver beobachteten MutationObserver .
• Erstellen Sie ein Konfigurationsobjekt, um die Art der Mutationen anzugeben, die vom MutationObserver beobachtet werden sollen.
• Binden Sie den MutationObserver an das Ziel, das in unserem Beispiel das 'msg'- div .

 (function startObservation () {var / * 1) Erzeuge ein MutationObserver-Objekt * / observer = new MutationObserver (Funktion (Mutationen) {mutationObserverCallback (Mutationen);}), / * 2) Erstelle ein Config-Objekt * / config = {childList: wahr}; / * 3) Glue'em all * / observer.observe (msg, config); }) (); 

Im Folgenden finden Sie eine Liste von Eigenschaften für das config, die die verschiedenen Arten von Mutationen identifizieren. Da wir in unserem Beispiel nur einen childList behandeln, der für den Nachrichtentext erstellt wurde, haben wir die Eigenschaft childList .

Arten von Mutationen beobachtet

Nun zu dieser Callback-Funktion, die bei jeder beobachteten Mutation ausgeführt wird.

 Funktion MutationObserverCallback (Mutationen) {/ * Besorgen Sie sich die erste Mutation * / var mutationRecord = Mutationen [0]; / * Wenn ein untergeordneter Knoten hinzugefügt wurde, verstecke die Nachricht nach 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000); } function hideMsg () {msg.textContent = ''; msg.style.background = 'none'; } 

Da wir dem div nur eine Nachricht hinzufügen, nehmen wir einfach die erste beobachtete Mutation und prüfen, ob ein Textknoten eingefügt wurde. Wenn mehr als eine Änderung eintritt, können wir einfach das mutations Array durchlaufen.

Jede Mutation im mutations Array wird durch das Objekt MutationRecord mit den folgenden Eigenschaften repräsentiert.

Eigenschaften von MutationRecord

Und das ist es. Wir müssen den Code nur für den letzten Schritt zusammensetzen.

Browserunterstützung

• "W3C DOM4 Mutation Observer." W3C. Netz. 19. Juni 2015
• "MutationObserver." Mozilla-Entwickler-Netzwerk . Netz. 19. Juni 2015.

Diese App löst einen Alarm aus, wenn das Telefon aus der Hosentasche entfernt wird

Verlieren Sie Ihr Android-Handy zu einem Taschendieb kann eine sehr frustrierende Angelegenheit sein. Glücklicherweise können Android-Smartphone-Besitzer ihre Handys mit einer App namens Pocket Sense vorbeugen, wenn es um Taschendiebe geht .Wie der Name schon sagt, ist Pocket Sense eine Sicherheits-App, die erkennt, wenn das Telefon aus der Tasche genommen wurde.

(Tech- und Design-Tipps)

10 besten Android Ninja Spiele, um Ihren inneren Ninja aufzurufen

Aus den Schatten zu kommen, das Ziel in Sekundenbruchteilen zu eliminieren und zurück in die Schatten zu streuen ist eine Ninja-Fantasie, die fast jeder gerne hätte . Aber höchstwahrscheinlich wirst du nicht bald Lehrling eines Shinobi-Meisters werden. Aber du kannst deine Ninja-Fantasie leben, indem du ein paar tödliche Ninja-Spiele auf deinem Android-Handy spielst.Wen

(Tech- und Design-Tipps)