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>

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

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

  • 相关阅读:
    cnblog项目--20190309
    django js引入失效问题
    Python老男孩 day16 函数(六) 匿名函数
    Python老男孩 day16 函数(五) 函数的作用域
    Python老男孩 day15 函数(四) 递归
    Python老男孩 day15 函数(三) 前向引用之'函数即变量'
    Python老男孩 day15 函数(二) 局部变量与全局变量
    Python老男孩 day14 函数(一)
    Python老男孩 day14 字符串格式化
    Python老男孩 day14 集合
  • 原文地址:https://www.cnblogs.com/yiyistar/p/7484207.html
Copyright © 2011-2022 走看看