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
Beispielerklärung für langsame MySQL-Abfragen und -Protokolle
1. Einleitung Durch Aktivieren des Slow Query Log...
MySQL: Datenintegrität
Die Datenintegrität wird in Entitätsintegrität, D...
Lösung für das Problem mit verstümmelten chinesischen Schriftzeichen in MySQL unter Ubuntu
Finden Sie das Problem Ich habe vor Kurzem Django...
Detaillierte Erläuterung gängiger Methoden von JavaScript-Arrays
Inhaltsverzeichnis Gängige Array-Methoden Pop() u...
Beheben Sie den 1251-Fehler beim Herstellen einer Verbindung zwischen MySQL und Navicat
Ich habe den Computer neu installiert und die neu...
JavaScript MouseEvent-Fallstudie
Mausereignis Wenn die Maus eine bestimmte Operati...
Detaillierte Erklärung der Tomcat-Verzeichnisstruktur
Inhaltsverzeichnis Verzeichnisstruktur bin-Verzei...
Lösung für das Problem, dass Eingaben im Formular nicht übermittelt werden können, wenn diese deaktiviert sind
Ich habe vorher ein Testprogramm geschrieben, in d...
Bezüglich des Problems der Verwendung von Webpack-Anweisungen in VSCode, das anzeigt: „Weil das Ausführen von Skripten in diesem System verboten ist“ (perfekte Lösung)
Wenn ich Vue lerne und immer Webpack-Anweisungen ...
So konfigurieren Sie die MySQL-Master-Slave-Synchronisierung in Ubuntu 16.04
Vorbereitung 1. Die Master- und Slave-Datenbankve...
Drei gängige Methoden, um HTML-Seiten nach 3 Sekunden automatisch zu springen
In der Praxis stoßen wir häufig auf ein Problem: ...
Lösung für Front-End-Browser-Schriftgrößen von weniger als 12 Pixel
Vorwort Als ich kürzlich an einem Projekt arbeite...
Detaillierte Installation und Konfiguration von hadoop2.7.2 unter Ubuntu15.10
Im Internet und in vielen Büchern gibt es viele T...
So verwenden Sie Lottie-Animationen in React Native-Projekten
Lottie ist eine von Airbnb entwickelte Open-Sourc...
So verhindern Sie mit Nginx die böswillige Auflösung von IP-Adressen
Zweck der Verwendung von Nginx Lassen Sie uns zun...