zoukankan      html  css  js  c++  java
  • 闭包的常见用处

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

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

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

  • 相关阅读:
    转载:DIV+CSS有可能遇到的问题
    CSS3那些不为人知的高级属性
    php获取GET方式传入的全部变量名称与值:foreach用法
    转载:Erlang 资源
    Java工具类 Apache Commons:commons-lang
    PHP安装环境,服务器不支持curl_exec的解决办法
    2018年5月10日论文阅读
    C++ code:char pointers and char arrays(字符指针与字符数组)
    2018年5月9日论文阅读
    C++ code:More Loop Designs
  • 原文地址:https://www.cnblogs.com/yiyistar/p/7484207.html
Copyright © 2011-2022 走看看