Μια άλλη πτυχή των στοιχείων Ιστού για την οποία δεν έχουμε μιλήσει ακόμα είναι ότι μια συνάρτηση JavaScript καλείται κάθε φορά που προστίθεται ή αφαιρείται ένα στοιχείο Ιστού από μια σελίδα. Αυτές οι επανακλήσεις κύκλου ζωής μπορούν να χρησιμοποιηθούν για πολλά πράγματα, συμπεριλαμβανομένης της ενημέρωσης ενός στοιχείου σχετικά με το περιεχόμενό του.
Σειρά άρθρων
Οι τέσσερις επανακλήσεις κύκλου ζωής των στοιχείων Ιστού
Υπάρχουν τέσσερις επανακλήσεις κύκλου ζωής που μπορεί να χρησιμοποιηθεί με στοιχεία ιστού:
connectedCallback: Αυτή η επανάκληση ενεργοποιείται όταν είναι το προσαρμοσμένο στοιχείο συνημμένο στο στοιχείο.disconnectedCallback: Αυτή η επανάκληση ενεργοποιείται όταν το στοιχείο είναι αφαιρεθεί από το έγγραφο.adoptedCallback: Αυτή η επανάκληση ενεργοποιείται όταν το στοιχείο είναι προστιθέμενη σε ένα νέο έγγραφο.attributeChangedCallback: Αυτή η επανάκληση ενεργοποιείται όταν ένα Χαρακτηριστικό αλλάζει, προστίθεται ή αφαιρείται, εφόσον παρατηρείται αυτό το χαρακτηριστικό.
Ας δούμε καθένα από αυτά στην πράξη.
Το συστατικό μας μετα-αποκαλυπτικό πρόσωπο
Θα ξεκινήσουμε δημιουργώντας ένα στοιχείο web που ονομάζεται <postapocalyptic-person>. Κάθε άτομο μετά την αποκάλυψη είναι είτε άνθρωπος είτε ζόμπι και θα ξέρουμε ποιο με βάση μια τάξη — είτε .human or .zombie — που εφαρμόζεται στο γονικό στοιχείο του <postapocalyptic-person> συστατικό. Δεν θα κάνουμε κάτι φανταχτερό με αυτό (ακόμα), αλλά θα προσθέσουμε ένα shadowRoot μπορούμε να χρησιμοποιήσουμε για να επισυνάψουμε μια αντίστοιχη εικόνα με βάση αυτή την ταξινόμηση.
customElements.define( "postapocalyptic-person", class extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({ mode: "open" }); }
}Το HTML μας μοιάζει με αυτό:
<div class="humans"> <postapocalyptic-person></postapocalyptic-person>
</div>
<div class="zombies"> <postapocalyptic-person></postapocalyptic-person>
</div>Εισαγωγή ατόμων με connectedCallback
Όταν ένας <postapocalyptic-person> φορτώνεται στη σελίδα, το connectedCallback() καλείται η συνάρτηση.
connectedCallback() { let image = document.createElement("img"); if (this.parentNode.classList.contains("humans")) { image.src = "https://assets.codepen.io/1804713/lady.png"; this.shadowRoot.appendChild(image); } else if (this.parentNode.classList.contains("zombies")) { image.src = "https://assets.codepen.io/1804713/ladyz.png"; this.shadowRoot.appendChild(image); }
}Αυτό διασφαλίζει ότι μια εικόνα ανθρώπου βγαίνει όταν το <postapocalyptic-person> είναι ένας άνθρωπος και μια εικόνα ζόμπι όταν το στοιχείο είναι ζόμπι.
Να είστε προσεκτικοί εργάζεστε με connectedCallback. Εκτελείται πιο συχνά από ό, τι μπορείτε να καταλάβετε, πυροδοτώντας κάθε φορά που το στοιχείο μετακινείται και θα μπορούσε (περίπλοκο) ακόμη και να τρέξει μετά ο κόμβος δεν είναι πλέον συνδεδεμένος — κάτι που μπορεί να είναι ακριβό κόστος απόδοσης. Μπορείς να χρησιμοποιήσεις this.isConnected για να μάθετε αν το στοιχείο είναι συνδεδεμένο ή όχι.
Μετρώντας τους ανθρώπους με connectedCallback() όταν προστίθενται
Ας γίνουμε λίγο πιο σύνθετοι προσθέτοντας μερικά κουμπιά στο μείγμα. Κάποιος θα προσθέσει α <postapocalyptic-person>, χρησιμοποιώντας μια προσέγγιση "αναστροφή νομίσματος" για να αποφασίσετε αν πρόκειται για άνθρωπο ή ζόμπι. Το άλλο κουμπί θα κάνει το αντίθετο, αφαιρώντας το α <postapocalyptic-person> τυχαία. Θα παρακολουθούμε πόσοι άνθρωποι και ζόμπι βλέπουν ενώ είμαστε σε αυτό.
<div class="btns"> <button id="addbtn">Add Person</button> <button id="rmvbtn">Remove Person</button> <span class="counts"> Humans: <span id="human-count">0</span> Zombies: <span id="zombie-count">0</span> </span>
</div>Δείτε τι κάνουν τα κουμπιά μας:
let zombienest = document.querySelector(".zombies"), humancamp = document.querySelector(".humans"); document.getElementById("addbtn").addEventListener("click", function () { // Flips a "coin" and adds either a zombie or a human if (Math.random() > 0.5) { zombienest.appendChild(document.createElement("postapocalyptic-person")); } else { humancamp.appendChild(document.createElement("postapocalyptic-person")); }
});
document.getElementById("rmvbtn").addEventListener("click", function () { // Flips a "coin" and removes either a zombie or a human // A console message is logged if no more are available to remove. if (Math.random() > 0.5) { if (zombienest.lastElementChild) { zombienest.lastElementChild.remove(); } else { console.log("No more zombies to remove"); } } else { if (humancamp.lastElementChild) { humancamp.lastElementChild.remove(); } else { console.log("No more humans to remove"); } }
});Εδώ είναι ο κωδικός connectedCallback() που μετράει τους ανθρώπους και τα ζόμπι καθώς προστίθενται:
connectedCallback() { let image = document.createElement("img"); if (this.parentNode.classList.contains("humans")) { image.src = "https://assets.codepen.io/1804713/lady.png"; this.shadowRoot.appendChild(image); // Get the existing human count. let humancount = document.getElementById("human-count"); // Increment it humancount.innerHTML = parseInt(humancount.textContent) + 1; } else if (this.parentNode.classList.contains("zombies")) { image.src = "https://assets.codepen.io/1804713/ladyz.png"; this.shadowRoot.appendChild(image); // Get the existing zombie count. let zombiecount = document.getElementById("zombie-count"); // Increment it zombiecount.innerHTML = parseInt(zombiecount.textContent) + 1; }
}Η ενημέρωση μετράει με disconnectedCallback
Στη συνέχεια, μπορούμε να χρησιμοποιήσουμε disconnectedCallback() για να μειώσετε τον αριθμό καθώς αφαιρούνται άνθρωποι και ζόμπι. Ωστόσο, δεν μπορούμε να ελέγξουμε την κλάση του γονικού στοιχείου επειδή το γονικό στοιχείο με την αντίστοιχη κλάση έχει ήδη φύγει disconnectedCallback λέγεται. Θα μπορούσαμε να ορίσουμε ένα χαρακτηριστικό στο στοιχείο ή να προσθέσουμε μια ιδιότητα στο αντικείμενο, αλλά επειδή η εικόνα src Το χαρακτηριστικό καθορίζεται ήδη από το γονικό του στοιχείο, μπορούμε να το χρησιμοποιήσουμε ως διακομιστή μεσολάβησης για να γνωρίζουμε εάν το στοιχείο ιστού που καταργείται είναι άνθρωπος ή ζόμπι.
disconnectedCallback() { let image = this.shadowRoot.querySelector('img'); // Test for the human image if (image.src == "https://assets.codepen.io/1804713/lady.png") { let humancount = document.getElementById("human-count"); humancount.innerHTML = parseInt(humancount.textContent) - 1; // Decrement count // Test for the zombie image } else if (image.src == "https://assets.codepen.io/1804713/ladyz.png") { let zombiecount = document.getElementById("zombie-count"); zombiecount.innerHTML = parseInt(zombiecount.textContent) - 1; // Decrement count }
}Προσοχή στους κλόουν!
Τώρα (και μιλώ εκ πείρας εδώ, φυσικά) το μόνο πράγμα πιο τρομακτικό από μια ορδή ζόμπι που επηρεάζει τη θέση σας είναι ένας κλόουν — το μόνο που χρειάζεται είναι ένα! Έτσι, παρόλο που έχουμε ήδη να κάνουμε με τρομακτικά μετα-αποκαλυπτικά ζόμπι, ας προσθέσουμε την πιθανότητα να μπει ένας κλόουν στη σκηνή για ακόμα περισσότερη φρίκη. Στην πραγματικότητα, θα το κάνουμε με τέτοιο τρόπο ώστε να υπάρχει η πιθανότητα οποιοσδήποτε άνθρωπος ή ζόμπι στην οθόνη να είναι κρυφά ένας μεταμφιεσμένος κλόουν!
Παίρνω πίσω αυτό που είπα προηγουμένως: ένας κλόουν ζόμπι είναι πιο τρομακτικός ακόμα και από μια ομάδα «κανονικών» κλόουν. Ας πούμε ότι αν βρεθεί οποιοδήποτε είδος κλόουν - είτε είναι άνθρωπος είτε ζόμπι - τον διαχωρίζουμε από τον πληθυσμό ανθρώπων και ζόμπι στέλνοντάς τους σε ένα εντελώς διαφορετικό έγγραφο - ένα <iframe> φυλακή, αν θέλεις. (Ακούω ότι ο «κλόουν» μπορεί να είναι ακόμη πιο μεταδοτικός από τη μετάδοση των ζόμπι.)
Και όταν μετακινούμε έναν ύποπτο κλόουν από το τρέχον έγγραφο σε ένα <iframe>, δεν καταστρέφει και αναδημιουργεί τον αρχικό κόμβο. Αντίθετα, υιοθετεί και συνδέει τον εν λόγω κόμβο, καλώντας πρώτα adoptedCallback τότε connectedCallback.
Δεν χρειαζόμαστε τίποτα στο <iframe> έγγραφο εκτός από φορέα με α .clowns τάξη. Εφόσον αυτό το έγγραφο βρίσκεται στο iframe του κύριου εγγράφου — δεν προβάλλεται ξεχωριστά — δεν χρειαζόμαστε καν το <postapocalyptic-person> κωδικός στιγμιότυπου. Θα συμπεριλάβουμε έναν χώρο για τους ανθρώπους, έναν άλλο χώρο για τα ζόμπι και ναι, τη φυλακή των κλόουν… err… <iframe> της… διασκέδασης.
<div class="btns"> <button id="addbtn">Add Person</button> <button id="jailbtn">Jail Potential Clown</button>
</div>
<div class="humans"> <postapocalyptic-person></postapocalyptic-person>
</div>
<div class="zombies"> <postapocalyptic-person></postapocalyptic-person>
</div>
<iframe class="clowniframeoffun” src="adoptedCallback-iframe.html">
</iframe>Το κουμπί "Προσθήκη ατόμου" λειτουργεί όπως στο τελευταίο παράδειγμα: αναστρέφει ένα ψηφιακό νόμισμα για να εισάγει τυχαία είτε έναν άνθρωπο είτε ένα ζόμπι. Όταν πατάμε το κουμπί «Δυνητικός κλόουν φυλακής» ένα άλλο νόμισμα ανατρέπεται και παίρνει είτε ένα ζόμπι είτε έναν άνθρωπο, παραδίδοντάς τους σε <iframe> φυλακή.
document.getElementById("jailbtn").addEventListener("click", function () { if (Math.random() > 0.5) { let human = humancamp.querySelector('postapocalyptic-person'); if (human) { clowncollege.contentDocument.querySelector('body').appendChild(document.adoptNode(human)); } else { console.log("No more potential clowns at the human camp"); } } else { let zombie = zombienest.querySelector('postapocalyptic-person'); if (zombie) { clowncollege.contentDocument.querySelector('body').appendChild(document.adoptNode(zombie)); } else { console.log("No more potential clowns at the zombie nest"); } }
});Αποκαλυπτικοί κλόουν με adoptedCallback
Στο adoptedCallback θα προσδιορίσουμε αν ο κλόουν ανήκει στην ποικιλία των ανθρώπων των ζόμπι με βάση την αντίστοιχη εικόνα τους και στη συνέχεια θα αλλάξουμε την εικόνα ανάλογα. connectedCallback θα κληθεί μετά από αυτό, αλλά δεν έχουμε κάτι που χρειάζεται να κάνουμε και αυτό που κάνει δεν θα παρεμβαίνει στις αλλαγές μας. Μπορούμε λοιπόν να το αφήσουμε ως έχει.
adoptedCallback() { let image = this.shadowRoot.querySelector("img"); if (this.parentNode.dataset.type == "clowns") { if (image.src.indexOf("lady.png") != -1) { // Sometimes, the full URL path including the domain is saved in `image.src`. // Using `indexOf` allows us to skip the unnecessary bits. image.src = "ladyc.png"; this.shadowRoot.appendChild(image); } else if (image.src.indexOf("ladyz.png") != -1) { image.src = "ladyzc.png"; this.shadowRoot.appendChild(image); } }
}Ανίχνευση κρυμμένων κλόουν με attributeChangedCallback
Τέλος, έχουμε το attributeChangedCallback. Σε αντίθεση με τις άλλες τρεις επανακλήσεις του κύκλου ζωής, πρέπει να παρατηρήσουμε τα χαρακτηριστικά του στοιχείου web μας για να ενεργοποιηθεί η επανάκληση. Μπορούμε να το κάνουμε αυτό προσθέτοντας ένα observedAttributes() συνάρτηση στην κλάση του προσαρμοσμένου στοιχείου και ζητήστε από αυτή τη συνάρτηση να επιστρέψει έναν πίνακα ονομάτων χαρακτηριστικών.
static get observedAttributes() { return [“attribute-name”];
}Στη συνέχεια, εάν αυτό το χαρακτηριστικό αλλάξει — συμπεριλαμβανομένης της προσθήκης ή κατάργησης — το attributeChangedCallback πυρκαγιές.
Τώρα, το πράγμα για το οποίο πρέπει να ανησυχείτε με τους κλόουν είναι ότι μερικοί από τους ανθρώπους που γνωρίζετε και αγαπάτε (ή εκείνους που γνωρίζατε και αγαπούσατε πριν μετατραπούν σε ζόμπι) θα μπορούσαν κρυφά να είναι μεταμφιεσμένοι κλόουν. Έχω δημιουργήσει έναν ανιχνευτή κλόουν που κοιτάζει μια ομάδα ανθρώπων και ζόμπι και, όταν κάνετε κλικ στο κουμπί "Αποκάλυψη κλόουν", ο ανιχνευτής θα (με εντελώς επιστημονικά και απολύτως αξιόπιστα μέσα που είναι δεν με βάση τυχαίους αριθμούς επιλέγοντας ένα ευρετήριο) ισχύουν data-clown="true" στο εξάρτημα. Και όταν εφαρμόζεται αυτό το χαρακτηριστικό, attributeChangedCallback ενεργοποιεί και ενημερώνει την εικόνα του στοιχείου για να αποκαλύψει τα κλόουν χρώματα τους.
Να σημειώσω επίσης ότι το attributeChangedCallback παίρνει τρεις παραμέτρους:
- το όνομα του χαρακτηριστικού
- την προηγούμενη τιμή του χαρακτηριστικού
- τη νέα τιμή του χαρακτηριστικού
Επιπλέον, η επανάκληση σάς επιτρέπει να κάνετε αλλαγές με βάση το πόσο έχει αλλάξει το χαρακτηριστικό ή με βάση τη μετάβαση μεταξύ δύο καταστάσεων.
Εδώ είναι η δική μας attributeChangedCallback code:
attributeChangedCallback(name, oldValue, newValue) { let image = this.shadowRoot.querySelector("img"); // Ensures that `data-clown` was the attribute that changed, // that its value is true, and that it had an image in its `shadowRoot` if (name="data-clown" && this.dataset.clown && image) { // Setting and updating the counts of humans, zombies, // and clowns on the page let clowncount = document.getElementById("clown-count"), humancount = document.getElementById("human-count"), zombiecount = document.getElementById("zombie-count"); if (image.src.indexOf("lady.png") != -1) { image.src = "https://assets.codepen.io/1804713/ladyc.png"; this.shadowRoot.appendChild(image); // Update counts clowncount.innerHTML = parseInt(clowncount.textContent) + 1; humancount.innerHTML = parseInt(humancount.textContent) - 1; } else if (image.src.indexOf("ladyz.png") != -1) { image.src = "https://assets.codepen.io/1804713/ladyzc.png"; this.shadowRoot.appendChild(image); // Update counts clowncount.innerHTML = parseInt(clowncount.textContent) + 1; zombiecount.innerHTML = parseInt(zombiecount.textContent) - 1; } }
}Και εκεί το έχετε! Όχι μόνο ανακαλύψαμε ότι οι επιστροφές κλήσης στοιχείων ιστού και η δημιουργία προσαρμοσμένων στοιχείων με επίγνωση του περιβάλλοντος είναι ευκολότερες από ό,τι νομίζατε, αλλά και ο εντοπισμός μετα-αποκαλυπτικών κλόουν, αν και τρομακτικό, είναι επίσης πιο εύκολο από όσο νομίζατε. Τι είδους πονηρούς, μετα-αποκαλυπτικούς κλόουν μπορείτε να εντοπίσετε με αυτές τις λειτουργίες επανάκλησης του ιστού;
