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
Anweisungen zur Verwendung von MySQL-Indizes (einspaltiger Index und mehrspaltiger Index)
1. Einspaltiger Index Die Auswahl der Spalten, fü...
Führen Sie die Schritte aus, um schnell ein Vue3.0-Projekt zu erstellen
Inhaltsverzeichnis 1. Wir müssen sicherstellen, d...
Sehr praktische Methode zur Implementierung des Tomcat-Startskripts
Vorwort Es gibt ein Szenario, in dem das Unterneh...
Detaillierte grafische Erklärung der SQLMap-Injektion
Inhaltsverzeichnis 1. Wir haben festgestellt, das...
Webseiten-Erlebnis: Farbabstimmung für Webseiten
<br />Die Farbe einer Webseite ist entscheid...
So verwenden Sie die asynchrone Anforderungs-API von Axios in Vue
Inhaltsverzeichnis Einrichten einer einfachen HTT...
So verwenden Sie Gitlab-ci zur kontinuierlichen Bereitstellung auf Remotecomputern (ausführliches Tutorial)
Kurz gesagt, heute sprechen wir über die Verwendu...
Reagieren Sie mit Beispielcode zur Implementierung des Anmeldeformulars
Als Vue-Benutzer ist es an der Zeit, React zu erw...
Zusammenfassung der Methoden zur Verbesserung der MySQL-Anzahl
Ich glaube, dass viele Programmierer mit MySQL ve...
So installieren und deinstallieren Sie IIS7-Komponenten mithilfe der WIN2008-Serverbefehlszeile
Hinweis: Da .NET Framework nicht im Core-Modus au...
Detaillierte Erklärung gängiger Docker-Befehle
1. Hilfe-Befehl 1. Aktuelle Docker-Version anzeig...
Einfaches Teilen von Mysql-Backup-BAT-Skripten unter Windows
Vorwort Dieser Artikel stellt ein einfaches BAT-S...
So verwenden Sie eine Bildschaltfläche als Schaltfläche zum Zurücksetzen des Formulars
Wenn wir ein Formular erstellen, legen wir häufig ...
So installieren Sie MySQL 8.0.13 in Alibaba Cloud CentOS 7
1. Laden Sie das MySQL-Installationspaket herunte...