About let avoid problems caused by closures
Use object-oriented thinking to complete the buyer information deletion function, each piece of information includes:
Name
Telephone
telephone number
province
Implement the following requirements:
No third-party libraries can be borrowed, and they need to be implemented using native code.
Combined with the basic code structure given, add code here 2 below to complete the delete function of buyer information. Note that this page should be displayed clearly on your phone.
The js code can be adjusted arbitrarily, for example and done using es6 code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--code here-->
<title>demo</title>
<style>
* {
padding: 0;
margin: 0;
}
.head, li div {
display: inline-block;
width: 70px;
text-align: center;
}
li .id, li .sex, .id, .sex {
width: 15px;
}
li .name, .name {
width: 40px;
}
li .tel, .tel {
width: 90px;
}
li .del, .del {
width: 15px;
}
ul {
list-style: none;
}
.user-delete {
cursor: pointer;
}
</style>
</head>
<body>
<div >
<div class="record-head">
<div class="head id">Serial number</div>
<div class="head name">Name</div>
<div class="head sex">gender</div>
<div class="head tel">telephone number</div>
<div class="head province">province</div>
<div class="head">operate</div>
</div>
<ul >
<li>
<div class="id">1</div>
<div class="name">Zhang San</div>
<div class="sex">male</div>
<div class="tel">13788888888</div>
<div class="province">Zhejiang</div>
<div class="user-delete">delete</div>
</li>
<li>
<div class="id">2</div>
<div class="name">Li Si</div>
<div class="sex">female</div>
<div class="tel">13788887777</div>
<div class="province">Sichuan</div>
<div class="user-delete">delete</div>
</li>
<li>
<div class="id">3</div>
<div class="name">Wang Er</div>
<div class="sex">male</div>
<div class="tel">13788889999</div>
<div class="province">Guangdong</div>
<div class="user-delete">delete</div>
</li>
</ul>
</div>
<script>
// You can also change the writing method of ES6 here. function Contact() {
();
}
// your code here
</script>
</body>
</html>
code1
<meta name="viewport" content="width = device-width,initial-scale=1">
code2 (other people’s code)
= function () {
("Test");
var div = ("user-delete");
var ul = ("#J_List");
var list = ("li");
for (var i = 0; i < ; i++) {
(function (i) {
div[i].onclick = function () {
list[i].remove();
(i);
}
})(i);
}
}
new Contact();
in
(function (i) {
div[i].onclick = function () {
list[i].remove();
(i);
}
})(i);
This function is not understood immediately
My code
= function () {
let div = ("user-delete");
let ul = ("#J_List");
let list = ("li");
for (let i in div) {
div[i].onclick = function () {
list[i].remove();
(i);
}
}
}
new Contact();
Later I remembered that it was to avoid the problems caused by closures. Teacher Liao Xuefeng talked about this paragraph, but I didn’t think about it for a while. See Liao Xuefeng’s closures for details.
But my code has no problem running, because there was no block-level scope at that time, but now let can be used to avoid this problem. So if i is declared with let, you don't need to execute the function immediately. And when writing code, you should avoid using var and use let instead. Another thing is to avoid using for(let i =0;condition;++i) statements, try to use for...in... Some good habits should be developed.
This is the article about let's avoid closures in JavaScript. For more related content on let's closure problems in JavaScript, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!