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.

Wie Anpassen von Visual Studio-Code

Visual Studio Code, der neue Open-Source-Code-Editor von Microsoft, bietet Entwicklern viele großartige Funktionen, die die Bearbeitung von Quellcode erheblich erleichtern . Außerdem sorgt Visual Studio Code dafür, dass Benutzer bei der Arbeit nicht gelangweilt sind, da sie verschiedene Teile des Aussehens anpassen können, z. B.

(Tech- und Design-Tipps)

macOS Sierra - Universal Clipboard zum Laufen bringen

Eine der neuen Funktionen von macOS Sierra, die ich nützlich finde, ist die Universal-Zwischenablage . Sie wissen bereits, wofür eine Zwischenablage ist - was auch immer Sie kopieren, wird hier aufbewahrt, bis Sie sie woanders einfügen - aber mit Universal Clipboard können Sie Ihre Textauswahl von Ihrem iPhone auf Ihr Macbook oder iPad und umgekehrt kopieren.Es

(Tech- und Design-Tipps)