• 分析一段包含闭包的代码段


    运行环境:IE6,不支持placeholder属性的浏览器。

    HTML:

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.8.1/jquery.min.js"></script>
    <body>
    <form>
      <label for="name">用户名:</label>
      <input type="text" placeholder="请输入用户名"/>
      <input type="password" placeholder="请输入密码"/>
    </form>
    </body>
    </html>

    JS代码:

    $(document).ready(function(){
        //定义判断当前浏览器是否支持placeholder功能
        var supportPH=function(){return "placeholder" in document.createElement("input");};
        var placeholderFn=function(input){
            var text=input.getAttribute("placeholder");
            var wqinput=input;
            var defaultValue=input.value;
            if(defaultValue==""){
                input.value=text;            
            }
    
            if(input)
            {            
                input.onfocus=function(){
                    if(wqinput.value===text)
                    wqinput.value="";
                };
                input.onblur=function(){          
                    if(wqinput.value==="")
                    {
                        wqinput.value=text;
                    }
                }
            }
        }
        var Inputs=document.getElementsByTagName("input");  
        if (!supportPH()) {
            for (var i = 0; i < Inputs.length; i++) {
                var input = Inputs[i];
                if(input.getAttribute('type')==="text" || true)
                    placeholderFn(input);
            }
        } 
    });

    此段代码有玄机,你如果看懂了wqinput变量在失去焦点和获得焦点的事件中,都依然保持着第一次赋值时的各个对象的值,并且一直保持着。应该想到此处有闭包现象,实际上也确实使用了闭包,只是不知不觉而已。原因是。input.onfocus和input.onblur绑定了处理方法后,即使离开了函数placeholderFn,由于input对象存在,所以,focus和blur的上下文变量也依然存在。

    如果理解的有问题,请留言共同探讨

  • 相关阅读:
    常见网络设备工作原理
    Linux逻辑卷的创建
    关于华为模拟器eNSP-防火墙USG6000V怎么重装镜像
    一人之下(名言吧)
    Struts2学习笔记——Struts2搭建和第一个小程序
    eclipse部署Tomcat9
    通过反射访问类的私有方法(无参)
    Java学习笔记之——IO
    Java学习笔记之——线程的生命周期、线程同步
    Java学习笔记之——多线程
  • 原文地址:https://www.cnblogs.com/wangqiideal/p/10180050.html
Copyright © 2020-2023  润新知