Τρόπος χρήσης του API MutationObserver για τις αλλαγές κόμβου DOM

Εδώ είναι ένα σενάριο: Η Ρίτα, συγγραφέας περιοδικών, επεξεργάζεται ένα άρθρο της στο διαδίκτυο. Αποθηκεύει τις αλλαγές της και βλέπει το μήνυμα “οι αλλαγές αποθηκεύτηκαν!” Ακριβώς τότε, παρατηρεί ένα τυπογραφικό λάθος που έλειπε. Το επιδιορθώνει και πρόκειται να κάνει κλικ “αποθηκεύσετε”, όταν παίρνει ένα θυμωμένο τηλεφώνημα από το αφεντικό της.

Μετά την ολοκλήρωση της κλήσης, γυρίζει πίσω στην οθόνη, βλέπει “οι αλλαγές αποθηκεύτηκαν!” τερματίζει τον υπολογιστή της και βγαίνει από το γραφείο.

Εκτός από την αδράνεια μου για την αφήγηση των ιστοριών, παρατηρήσαμε από αυτό το σύντομο σενάριο το πρόβλημα που προκάλεσε αυτό το επίμονο μήνυμα. Έτσι, στο μέλλον αποφασίζουμε να το αποφύγουμε όταν είναι δυνατό και να χρησιμοποιήσουμε ένα που είτε προτρέπει τον χρήστη να αναγνωρίσει κάνοντας κλικ στο - είτε εξαφανίζεται από μόνη της. Χρησιμοποιώντας το δεύτερο για γρήγορο μήνυμα είναι μια καλή ιδέα.

Γνωρίζουμε ήδη πώς να εξαφανιστεί ένα στοιχείο από μια σελίδα, έτσι ώστε να μην είναι πρόβλημα. Αυτό που πρέπει να ξέρουμε είναι πότε εμφανίστηκε? Έτσι μπορούμε να το εξαφανίσουμε μετά από εύλογο χρόνο.

API MutationObserver

Συνολικά, όταν ένα στοιχείο DOM (όπως ένα μήνυμα div) ή οποιαδήποτε άλλη αλλαγή κόμβου, θα πρέπει να είμαστε σε θέση να το γνωρίζουμε. Για πολύ καιρό οι προγραμματιστές έπρεπε να στηρίζονται σε hacks και πλαίσια εξαιτίας της έλλειψης τοπικού API. Αλλά αυτό είχε αλλάξει.

Τώρα έχουμε MutationObserver (προηγούμενα γεγονότα μετάλλαξης). MutationObserver είναι ένα φυσικό αντικείμενο JavaScript με ένα σύνολο ιδιοτήτων και μεθόδων. Μας επιτρέπει παρατηρήστε μια αλλαγή σε οποιονδήποτε κόμβο όπως DOM Στοιχείο, Έγγραφο, Κείμενο κλπ. Με τη μετάλλαξη, εννοούμε την προσθήκη ή την αφαίρεση ενός κόμβου και τις αλλαγές στα χαρακτηριστικά και τα δεδομένα ενός κόμβου.

Ας δούμε ένα παράδειγμα για καλύτερη κατανόηση. Θα κάνουμε πρώτα ένα set up όπου εμφανίζεται ένα μήνυμα μετά από κλικ στο κουμπί, όπως είδε ο Rita. Τότε θα δημιουργήστε και συνδέστε έναν παρατηρητή μετάλλαξης σε αυτό το πλαίσιο μηνυμάτων και κωδικοποιήστε τη λογική για αυτόματη απόκρυψη του μηνύματος. Καταλαβαίνω?

Σημείωση: Μπορεί σε κάποιο σημείο ή έχετε ήδη με ρωτήσει στο κεφάλι σας “Γιατί να μην κρύβετε απλά το μήνυμα από το ίδιο το κλικ στο συμβάν κουμπί στο JavaScript?” Στο παράδειγμά μου, δεν δουλεύω με ένα διακομιστή, οπότε βέβαια ο πελάτης είναι υπεύθυνος να δείξει το μήνυμα και να το αποκρύψει πάρα πολύ εύκολα. Αλλά όπως και στο εργαλείο επεξεργασίας της Rita αν ο διακομιστής είναι αυτός που αποφασίζει να αλλάξει το περιεχόμενο του DOM, ο πελάτης μπορεί να μείνει μόνο σε επιφυλακή και να περιμένει.

Κατ 'αρχάς, δημιουργούμε τη ρύθμιση για να εμφανιστεί το μήνυμα στο κουμπί κλικ.

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Αλλαγές αποθηκευμένες!"; / * Προσθήκη συμβάντος κλικ με το κουμπί * / document .querySelector ('button') .addEventListener ('κλικ', showMsg); λειτουργία showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';

Αφού ολοκληρώσουμε την αρχική ρύθμιση, αφήστε τα εξής:

Δημιουργώ ένα MutationObserver αντικείμενο με μια συνάρτηση επανάκλησης που έχει οριστεί από το χρήστη (η λειτουργία ορίζεται αργότερα στη θέση). Η λειτουργία θα εκτελεστεί σε κάθε μετάλλαξη που παρατηρείται από το MutationObserver.
Δημιουργήστε ένα αντικείμενο config για να καθορίσετε το είδος των μεταλλάξεων που πρέπει να τηρούνται από το MutationObserver.
Συνδέστε το MutationObserver στο στόχο, το οποίο είναι το 'msg' div στο παράδειγμά μας.

(Δημιουργία ενός αντικειμένου config * / config = childList: *) * Δημιουργήστε ένα αντικείμενο MutationObserver * / observer = new MutationObserver (συνάρτηση (μεταλλάξεις) mutationObserverCallback () αληθής; / * 3) Glue'em όλα * / observer.observe (msg, config); ) ();

Παρακάτω είναι μια λίστα ιδιοτήτων για το config αντικείμενο που προσδιορίζει τα διάφορα είδη μεταλλάξεων. Επειδή στο παράδειγμά μας ασχολούμαστε μόνο με έναν κόμβο κειμένου παιδιού που δημιουργήθηκε για το κείμενο του μηνύματος, χρησιμοποιήσαμε το childList ιδιοκτησία.

Έχουν παρατηρηθεί είδη μεταλλάξεων

Ιδιοκτησία	Όταν είναι ρυθμισμένο σε `αληθής`
childList	Εισαγωγή και αφαίρεση των παιδικών κόμβων του στόχου παρατηρούνται.
γνωρίσματα	Αλλαγές στις ιδιότητες του στόχου παρατηρούνται.
characterData	Ακολουθούν οι αλλαγές στα δεδομένα του στόχου.

Τώρα, σε αυτή τη λειτουργία επανάκλησης που εκτελείται σε κάθε παρατηρούμενη μετάλλαξη.

μεταλλάξεις λειτουργιώνObserverCallback (μεταλλάξεις) / * Πιάστε την πρώτη μετάλλαξη * / var mutationRecord = μεταλλάξεις [0]; / * Εάν ένας παιδικός κόμβος προστέθηκε, κρύψτε το msg μετά από 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  συνάρτηση hideMsg () msg.textContent = "; msg.style.background = 'καμία';

Δεδομένου ότι προσθέτουμε μόνο ένα μήνυμα στο div, θα πάρουμε απλώς την πρώτη μετάλλαξη που παρατηρήθηκε σε αυτήν και θα ελεγχθεί εάν έχει εισαχθεί ένας κόμβος κειμένου. Εάν έχουμε περισσότερες από μία αλλαγές που συμβαίνουν, μπορούμε απλά να βγάλουμε από το μεταλλάξεις παράταξη.

Κάθε μετάλλαξη στο μεταλλάξεις η συστοιχία αντιπροσωπεύεται από το αντικείμενο MutationRecord με τις ακόλουθες ιδιότητες.

Ιδιότητες του MutationRecord

Ιδιοκτησία	Επιστρέφει
addedNodes	Ένας κενός πίνακας ή μια σειρά από κόμβους που προστέθηκαν.
attributeName	Null ή το όνομα του χαρακτηριστικού που προστέθηκε, καταργήθηκε ή άλλαξε.
attributeNamespace	Null ή το χώρο ονομάτων του χαρακτηριστικού που προστέθηκε, καταργήθηκε ή άλλαξε.
nextSibling	Μηδέν ή επόμενο αδελφό του κόμβου που προστέθηκε ή αφαιρέθηκε.
oldValue	Η μηδενική ή προηγούμενη τιμή του χαρακτηριστικού ή των δεδομένων άλλαξε.
previousSibling	Μηδέν ή προηγούμενο αδελφό του κόμβου που προστέθηκε ή αφαιρέθηκε.
removedNodes	Άδειασμα πίνακα ή σειρά από κόμβους που αφαιρέθηκαν.
στόχος	Κόμβος που στοχεύει το `MutationObserver`
τύπος	Ο τύπος της μετάλλαξης που παρατηρήθηκε.

Και ... αυτό είναι. πρέπει απλώς να βάλουμε τον κώδικα μαζί για το τελικό βήμα.

Υποστήριξη προγράμματος περιήγησης

IMAGE: Μπορώ να χρησιμοποιήσω το. 19 Ιουνίου 2015

Αναφορά

“W3C Παρατηρητής μετάλλαξης DOM4.” W3C. Ιστός. 19 Ιουνίου 2015
“MutationObserver.” Δίκτυο προγραμματιστών Mozilla. Ιστός. 19 Ιουνίου 2015.