Ακούγοντας τις αλλαγές DOM από το Javascript Web API, τον Παρατηρητή Μετάλλαξης (υπαινιγμός: Είναι η καλύτερη πρακτική)

Το "MutationObserver" είναι ένα API Web που παρέχεται από σύγχρονα προγράμματα περιήγησης για την ανίχνευση αλλαγών στο DOM. Χρησιμοποιώντας αυτό το API, μπορείτε να ακούσετε τις αλλαγές στο DOM, όπως οι κόμβοι που έχουν προστεθεί ή αφαιρεθεί, οι αλλαγές χαρακτηριστικών ή οι αλλαγές στο περιεχόμενο κειμένου των κόμβων κειμένου και να κάνετε αλλαγές.

Οι εφαρμογές ιστού γίνονται πολύπλοκες στην πλευρά του πελάτη στις μέρες μας. Πρέπει να κάνετε πολλά ακούγοντας τις αλλαγές DOM. Για παράδειγμα, θέλετε να στείλετε μια ειδοποίηση σε πραγματικό χρόνο στο χρήστη από μια αλλαγή DOM ή χρησιμοποιείτε ένα πλαίσιο JS που έχει διαφορετική συμπεριφορά για διαφορετικό είδος αλλαγής ή πρέπει να κάνετε κάτι βασισμένο στην αξία επιστροφής JS plugin .

Το "Polling" με το setInterval API είναι μία από τις λίγες εναλλακτικές λύσεις του Mutation Observer. Ας ρίξουμε μια ματιά σε αυτό για την καλύτερη κατανόηση όντως τι κάνει "Mutation Observer" κάνει.

index.html

months.js

Το addMonth είναι μια απλή λειτουργία που επιστρέφει ένα τυχαίο όνομα ενός μήνα ή ενός αριθμού από τον πίνακα nameOfMonth μετά από 2 δευτερόλεπτα.

Ας προσθέσουμε μια λειτουργία δημοσκόπησης μετά από αυτήν.

Για να εκτυπώσετε την αλλαγή DOM, το CheckMonth πρέπει να ελέγξει κάθε δευτερόλεπτο εάν κάτι αλλάξει στο DOM και μετά από έλεγχο που εκτυπώνεται μακριά από το outerHTML. Αφού λάβει την αλλαγή, ξεκαθαρίζει το διάστημα. το setInterval WebAPI μπορεί να δημιουργήσει μια εργασία που θα ελέγχει περιοδικά εάν έχουν σημειωθεί τυχόν αλλαγές. Φυσικά, αυτή η μέθοδος υποβαθμίζει σημαντικά την απόδοση των εφαρμογών ιστού / ιστότοπου.

Μεταφορά MutationObserver:

Η εφαρμογή του MutationObserver στην εφαρμογή είναι αρκετά εύκολη. Πρέπει να δημιουργήσετε μια παράμετρο MutationObserver μεταβιβάζοντάς την μια συνάρτηση που θα ονομάζεται κάθε φορά που έχει γίνει μια μετάλλαξη. Και τι είναι καλύτερο, Είναι εξαιρετική απόδοση. Σχεδόν όλοι οι τελευταίοι υποστηρίζουν το πρόγραμμα περιήγησης. Ας πηδήξουμε στον κώδικα, πώς μπορεί να γίνει ο προηγούμενος κώδικας με την εφαρμογή του MutationObserver.

Αντί να προσθέσουμε τη λειτουργία "Polling", μπορούμε να χρησιμοποιήσουμε το MutationObserver μετά τη συνάρτηση addMonth.

Αυτό που κάναμε εδώ, ελέγξαμε αν έχει προστεθεί κάποιος κόμβος στο DOM από mutation.addedNodes.length. Αν επιστρέφει αληθές, καταγράφουμε τον προστιθέμενο κόμβο.

Το δημιουργούμενο αντικείμενο έχει τρεις μεθόδους:

  • παρατηρήστε - αρχίζει να ακούει για αλλαγές. Λαμβάνει δύο επιχειρήματα - τον κόμβο DOM που θέλετε να παρατηρήσετε και ένα αντικείμενο ρυθμίσεων
  • Αποσύνδεση - σταματά να ακούει για αλλαγές
  • takeRecords - επιστρέφει την τελευταία παρτίδα αλλαγών πριν από την ενεργοποίηση της επανάκλησης.

Το παρακάτω απόσπασμα δείχνει πώς να αρχίσετε να παρατηρείτε:

Πλήρης Κωδικός:

Εκτός από το addchildList, μπορεί επίσης να ακούει την κατάργηση του childList και πολλά άλλα πράγματα, όπως χαρακτηριστικά, subtree κλπ. Ελέγξτε το μπλοκ κώδικα παρακάτω.

Αυτό είναι όλο aboutMutationObserver` Προσφέρει μια σειρά από πλεονεκτήματα σε σχέση με το Polling ή άλλες λύσεις. Είναι πιο βελτιστοποιημένο τρόπο καθώς πυροδοτεί τις αλλαγές σε παρτίδες. Εκτός από αυτό, το MutationObserver υποστηρίζεται από όλα τα μεγάλα σύγχρονα προγράμματα περιήγησης, μαζί με μερικά polyfills που χρησιμοποιούν MutationEvents κάτω από την κουκούλα. Το API του MutationObserver είναι ισχυρό, ενημερωτικό και τελικά δωρεάν hack.

Μάθετε την Ασύγχρονη JavaScript λεπτομερώς (επανάκληση, υπόσχεση, γεννήτρια και async-αναμονή)

Μάθετε σχετικά με τα άγκιστρα React JS από το παρακάτω άρθρο.

Αυτά για σήμερα :)