闭包的常见用处

50 阅读 0 评论 33 点赞

我是靠谱客的博主美好乌龟，最近开发中收集的这篇文章主要介绍闭包的常见用处，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

都知道闭包，那闭包到底有啥子用呢？
1）创建10个li标签，每一个点击的时候，就会弹出相应的序号

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<ul id="box"></ul>
<body>
<script type="text/javascript">
　　for (var i = 0; i < 10; i++) {
　　　　(function(i) {
　　　　　　var li = document.createElement("li")
　　　　　　li.innerHTML = i + '<br>'
　　　　　　document.getElementById('box').appendChild(li)
　　　　　　li.addEventListener('click', function() {
　　　　　　　　alert(i)
　　　　　　})
　　　　})(i)
　　}
</script>
</body>
</html>

这个是个非常简单的例子，也是最常见的，正好，最近我正在投递简历。投的多了，容易忘记哪些投了没投啥的，我就自己写了一个代码，用来管理一下状态

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<input type="text" name="" id="text">
<input type="submit" name="" value="添加" id="button">
</form>
<ol id="box">
</ol>
<script type="text/javascript">
// 获取页面元素

function GetId(id) {
return document.getElementById(id)
}
var button = GetId("button")
var text = GetId("text")
function isFirst() {
var list = []
return function(value) {
if (list.indexOf(value) >= 0) {
return false
} else {
list.push(value)
return true
}
}
}
var first = isFirst();
button.addEventListener('click', function(e) {
e.preventDefault()
var value = text.value;
var isPay = first(value)
if (value && isPay) {
var li = document.createElement('li')
li.innerHTML = value + '<br>'
var box = GetId("box")
box.appendChild(li)
text.value = ''
} else if (!isPay) {
alert("已经投递")
} else {
alert("输入不能为空")
}
text.value = ''
})
</script>
</body>
</html>