闭包的常见用处

Posted 阿柴

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了闭包的常见用处相关的知识,希望对你有一定的参考价值。

都知道闭包,那闭包到底有啥子用呢? 
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>

非常的简单,就是几行代码而已,每次点击的时候,就去调用那个返回的闭包函数。来判断状态。

 大致就是这个样子的,当输入已经投递过的,或者输入为空,则会出现提示消息,很简单,也很实用,算得上是闭包的一个用处。

 

以上是关于闭包的常见用处的主要内容,如果未能解决你的问题,请参考以下文章

Spark闭包与序列化

浅析闭包

Swift函数和闭包

前端工程师 - 面试题 (最新,最全)

js闭包经典试题

Swift之常见闭包与defer关键字的使用分析和闭包中的循环引用