文盲的 JavaScript 经验谈之四:在 JS 中使用闭包

    技术2022-05-11  7

    文盲的 JavaScript 经验谈之一:认识 JavaScript 文盲的 JavaScript 经验谈之二:了解一下浏览器对 JS 的处理 文盲的 JavaScript 经验谈之三:认识 arguments 文盲的 JavaScript 经验谈之四:在 JS 中使用闭包
    闭包的定义很简单:   闭包是可以用作函数参数和方法参数的代码块。   闭包是具有闭合作用域的匿名函数。 引自《 跨越边界: 闭包 在这里,由于文盲的水平有限,就不对闭包的优点缺点什么的进行评论了,咱们只进行闭包如何使用来进行说明。 假设一个情况,我们要点击一个按钮,并对该按钮有一个事件,传统的写法是这样: <input type="button" value="button 1" οnclick="btnEvent(1);"> <input type="button" value="button 2" οnclick="btnEvent(2);"> <input type="button" value="button 3" οnclick="btnEvent(3);"> <input type="button" value="button 4" οnclick="btnEvent(4);"> <input type="button" value="button 5" οnclick="btnEvent(5);"> <script> function btnEvent(n){     alert('你现在点击的按钮是“button ”' + n); } </script> 每一个按钮的事件都是相同的,只有参数稍有不同,传统的方法在按钮比较少的情况下还好,如果按钮很多,不只是代码多的问题了,维护起来也是相当麻烦,甚至有的时候参数写错了都无法察觉。 那么,结合 DOM 和闭包,我们可以使用 JS 来定义这些按钮的动作: <input type="button" value="button 1"> <input type="button" value="button 2"> <input type="button" value="button 3"> <input type="button" value="button 4"> <input type="button" value="button 5"> <script> var el = document.getElementsByTagName('input'); for (var i = 0 ; i < el.length ; i ++){      if (el[i].type == 'button'){            el[i].onclick = function(){                alert('你现在点击的按钮是“' + this.value + '”');           }      } } </script> 蓝色的部分就是一个闭包,在这个小程序中,对所有的 input 类型为按钮的控件都进行了一次 onclick 动作的定义,当按钮很多,或者参数不能确定的时候,使用闭包可以帮我们方便的定义期望动作 具体的应用实例可以参考文盲写的《 JS 版扫雷 》 除了上述情况之外,我们还有一些地方也可能会使用到闭包 比如函数参数的传递 假设我们有一个跨浏览器的 xml 对象 xmldom,我们使用这个对象进行一个 xml 文件的加载动作,在加载完成前不进行进一步的操作: <script> xmldom.load('test.xml'); function initXml(xml){      if (xml.documentElement){           goNextEvent();      }else{           setTimeout( function(){initXml(xml)},50);      } } initXml(xmldom); </script> 在这里使用闭包,主要就是为了传递 xml 这个对象,否则,setTimeout 本身是无法传递对象类型的参数的,而通过闭包,我们就可以传递出任意我们所期望的参数、格式等 具体的应用实例可以参考文盲写的《 XML 版无限级联动 》 使用闭包还有一个好处,就是如果某些参数会被浏览器自动引入的话,我们就可以直接在闭包中引用这个参数了 比如一个追踪鼠标位置的例子: <input type="text" id="x" /> <input type="text" id="y" /> <script> document.onmousemove = function(e){     if (!e){         var x = event.x;         var y = event.y;     }else{         var x = e.pageX;         var y = e.pageY;     }     document.getElementById('x').value = x;     document.getElementById('y').value = y; } </script> 在这里针对鼠标移动事件就做了一个闭包,并根据浏览器传递的参数来确定最终显示的内容; 在 IE 中,鼠标事件是统一存放在 event 这个对象中的,而 FF 则是作为参数传递给相应的处理事件的; 所以,如果 e 非空则是 FF、NS 等浏览器,否则则是 IE 浏览器

    最新回复(0)