用闭包减少代码-优快云博客

本文介绍了一种利用JavaScript闭包来简化RadioButton点击事件处理的方法，通过将重复的事件处理逻辑封装进闭包中，实现了代码的整洁和复用。

做一个radiolist控制textbox显示隐藏的功能，最初的代码：

rblSecurityCameras = document.getElementsByName("<%=rblSecurityCameras.UniqueID %>");
        txtSecurityCameras = document.getElementById("<%=txtSecurityCameras.ClientID %>");


        for (i in rblSecurityCameras) {
            rblSecurityCameras[i].onclick = function(){
                if (this.value == "2" && this.checked) {
                    txtSecurityCameras.style.display = 'none';
                }
                else if (this.value == "1" && this.checked) {
                    txtSecurityCameras.style.display = '';
                }
};
             if (rblSecurityCameras[i].value == "2" && rblSecurityCameras[i].checked) {
                    txtSecurityCameras.style.display = 'none';
                }
                else if (rblSecurityCameras[i].value == "1" && rblSecurityCameras[i].checked) {
                    txtSecurityCameras.style.display = '';
                }
        }

点击事件和load的过程的代码是相同的，有代码洁癖的我就不干了。

使用闭包

 1 rblSecurityCameras = document.getElementsByName("<%=rblSecurityCameras.UniqueID %>");
 2         txtSecurityCameras = document.getElementById("<%=txtSecurityCameras.ClientID %>");
 3 
 4         var mm = function(obj, txt) {
 5             return (function() {
 6                 if (obj.value == "2" && obj.checked) {
 7                     txt.style.display = 'none';
 8                 }
 9                 else if (obj.value == "1" && obj.checked) {
10                     txt.style.display = '';
11                 }
12             });
13         };
14 
15         for (i in rblSecurityCameras) {
16             rblSecurityCameras[i].onclick = mm(rblSecurityCameras[i], txtSecurityCameras);
17             mm(rblSecurityCameras[i], txtSecurityCameras)();
18         }