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
js implementiert das klassische Minesweeper-Spiel
In diesem Artikelbeispiel wird der spezifische Co...
Einführung in das Fokuselement document.activeELEment in JavaScript
Inhaltsverzeichnis 1. Der Fokus liegt standardmäß...
Konfigurieren Sie nginx so, dass es zur Systemwartungsseite umleitet
Letztes Wochenende bereitete sich ein Bruderproje...
Zusammenfassung der MySQL-Verbundindizes
Inhaltsverzeichnis 1. Hintergrund 2. Zusammengese...
Einführung in semantische HTML-Tags
In den letzten Jahren war DIV+CSS bei der Website-...
Vue integriert PDF.js, um eine PDF-Vorschau zu implementieren und Schritte zum Hinzufügen von Wasserzeichen durchzuführen
Inhaltsverzeichnis Ergebnisse erzielen Einführung...
Vue-Beispielcode mit dem Animationseffekt „Übergangskomponente“
Die Übergangsdokumentadresse definiert eine Hinte...
Zusammenfassung mehrerer Haltungen, die bei der Linux-Kompilierungsoptimierung beherrscht werden müssen
01. Kompilierungsoptionen und Kernelkompilierung ...
Erste Schritte Tutorial für Anfänger ⑨: So erstellen Sie eine Portal-Website
Darüber hinaus wird eine mit einem Blog-Programm e...
Avue-CRUD-Implementierungsbeispiel für einen komplexen dynamischen Header auf mehreren Ebenen
Inhaltsverzeichnis Vorwort Hintergrunddatenspleiß...
Führen Sie die Schritte zum Erstellen des NFS-Dateifreigabespeicherdienstes in CentOS 7 aus
Vorwort NFS (Network File System) bedeutet Netzwe...
CentOS 6.5 Installations-Tutorial zu MySQL 5.7
1. Neue Funktionen MySQL 5.7 ist ein spannender M...
Zusammenfassung der Wissenspunkte zum B-Tree-Index bei der MySQL-Optimierung
Warum müssen wir SQL optimieren? Wenn wir SQL-Anw...
Einige Schlussfolgerungen zur Gestaltung von Portal-Website-Fokusbildern
Fokusbilder sind eine Möglichkeit, Inhalte zu präs...
Beispiel für die Verwendung von rem zum Ersetzen von px in einem Vue-Projekt
Inhaltsverzeichnis Werkzeug Installieren Sie das ...