Vermeidung von durch Closures verursachten Problemen in JavaScript
Über let, um Probleme durch Schließung zu vermeiden
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<!--Code hier-->
<Titel>Demo</Titel>
<Stil>
* {
Polsterung: 0;
Rand: 0;
}
.kopf, li div {
Anzeige: Inline-Block;
Breite: 70px;
Textausrichtung: zentriert;
}
li .id, li .sex, .id, .sex {
Breite: 15px;
}
li .name, .name {
Breite: 40px;
}
li .tel, .tel {
Breite: 90px;
}
li .del, .del {
Breite: 15px;
}
ul {
Listenstil: keiner;
}
.Benutzer löschen {
Cursor: Zeiger;
}
</Stil>
</Kopf>
<Text>
<div id="J_container">
<div Klasse="Datensatzkopf">
<div class="head id">Seriennummer</div>
<div Klasse="Kopfname">Name</div>
<div class="head sex">Geschlecht</div>
<div class="head tel">Telefonnummer</div>
<div class="head province">Provinz</div>
<div class="head">Betrieb</div>
</div>
<ul id="J_Liste">
<li>
<div Klasse="id">1</div>
<div Klasse="Name">Zhang San</div>
<div class="sex">Männlich</div>
<div class="tel">13788888888</div>
<div class="provinz">Zhejiang</div>
<div class="user-delete">Löschen</div>
</li>
<li>
<div Klasse="id">2</div>
<div Klasse="Name">Li Si</div>
<div class="sex">weiblich</div>
<div class="tel">13788887777</div>
<div class="province">Sichuan</div>
<div class="user-delete">Löschen</div>
</li>
<li>
<div Klasse="id">3</div>
<div class="name">Wang Er</div>
<div class="sex">Männlich</div>
<div class="tel">13788889999</div>
<div class="provinz">Guangdong</div>
<div class="user-delete">Löschen</div>
</li>
</ul>
</div>
<Skript>
// Sie können hier auch ES6 verwenden function Contact() {
dies.init();
}
// Ihr Code hier
</Skript>
</body>
</html>Code1
Code2 (Code anderer Leute)
Kontakt.prototype.init = Funktion () {
console.log("Test");
var div = document.getElementsByClassName("Benutzer-Löschen");
var ul = document.querySelector("#J_List");
var list = ul.querySelectorAll("li");
für (var i = 0; i < div.Länge; i++) {
(Funktion (i) {
div[i].onclick = Funktion () {
Liste[i].entfernen();
konsole.log(i);
}
})(ich);
}
}
neuer Kontakt();In
(Funktion (i) {
div[i].onclick = Funktion () {
Liste[i].entfernen();
konsole.log(i);
}
})(ich);Ich verstehe die Bedeutung dieser sofortigen Ausführungsfunktion nicht Mein Code
Kontakt.prototype.init = Funktion () {
let div = document.getElementsByClassName("Benutzer löschen");
: Lassen Sie ul = document.querySelector("#J_List");
let list = ul.querySelectorAll("li");
für (lass i in div) {
div[i].onclick = Funktion () {
Liste[i].entfernen();
konsole.log(i);
}
}
}
neuer Kontakt();Später fiel mir ein, dass es dazu diente, die durch Closures verursachten Probleme zu vermeiden. Lehrer Liao Xuefeng hatte darüber gesprochen, aber ich konnte mich im Moment nicht daran erinnern. Weitere Einzelheiten finden Sie unter Closure von Liao Xuefeng. Es gab jedoch kein Problem beim Ausführen meines Codes, da zu diesem Zeitpunkt kein Blockebenenbereich vorhanden war. Aber jetzt kann ich let verwenden, um dieses Problem zu vermeiden. Wenn i mit let deklariert wird, besteht also keine Notwendigkeit, die Funktion sofort auszuführen. Und wenn Sie Code schreiben, sollten Sie die Verwendung von var vermeiden und stattdessen let verwenden. Vermeiden Sie außerdem die Verwendung von Anweisungen wie for(let i =0;condition;++i) und versuchen Sie, for...in... zu verwenden. Sie sollten sich einige gute Gewohnheiten aneignen. Damit ist dieser Artikel darüber, wie Sie Probleme vermeiden können, die durch Closures mit let in JavaScript verursacht werden, abgeschlossen. Weitere Informationen zu let-Closures in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Grafische Einführung in den Unterschied zwischen := und = in MySQL
>>: Docker erstellt ein benutzerdefiniertes Netzwerk, um eine feste Container-IP-Adresse zu erhalten
Artikel empfehlen
Detailliertes Tutorial zur Installation von Ubuntu 19.10 auf Raspberry Pi 4
Da einige Abhängigkeiten von OpenCV beim Ausführe...
Die vernachlässigten Spezialeffekte von META-Tags (Seitenübergangseffekte)
Durch die Verwendung von JS im Webdesign können vi...
Zusammenfassung der grundlegenden allgemeinen MySQL-Befehle
Inhaltsverzeichnis Grundlegende allgemeine MySQL-...
So gehen Sie mit verstümmelten Zeichen in der MySQL-Datenbank um
In MySQL können in der Datenbank fehlerhafte Zeic...
Detaillierte Erklärung der wunderbaren Verwendung von SUID, SGID und SBIT in Linux
Vorwort Die Dateiberechtigungsverwaltung von Linu...
Detaillierter Prozess zum Erstellen eines NFS-Servers mithilfe des NFS-Ganesha-Image von Docker
Inhaltsverzeichnis 1. Einführung in NFS-Ganesha 2...
Detailliertes Tutorial zur Integration von Apache Tomcat mit dem IDEA-Editor
1. Laden Sie das komprimierte Tomcat-Paket von de...
JS verwendet Clip-Pfad, um eine dynamische Bereichs-Clipping-Funktion zu implementieren
Hintergrund Heute habe ich CodePen durchsucht und...
So richten Sie geplante Aufgaben in Linux und Windows ein
Inhaltsverzeichnis Linux 1. Grundlegende Verwendu...
CSS-Isolationsproblem in Blazor
1. Umwelt VS 2019 16.9.0 Vorschau 1.0 .NET SDK 5....
Der Unterschied und die Verwendung des Kommunikationsbusses der Bruderkomponenten von Vue2 und Vue3
Inhaltsverzeichnis vue2.x vue3.x Verwendung des T...
jQuery implementiert den Fall der Schriftgrößenanpassung
In diesem Artikel wird der spezifische Code von j...
Detaillierte Erläuterung des Dockerfiles zum Erstellen eines benutzerdefinierten Docker-Images und Vergleich der CMD- und ENTRYPOINT-Anweisungen
1. Übersicht Es gibt drei Möglichkeiten, ein Dock...
InnoDB-Typ MySql stellt Tabellenstruktur und Daten wieder her
Voraussetzung: Speichern Sie die .frm- und .ibd-D...
Detaillierte Erklärung der Destrukturierungszuweisungssyntax in Javascript
Vorwort Die erstmals in ES6 eingeführte „Destruct...