封闭空间以及封闭空间中的选项卡

js中的封闭空间主要是利用了给变量加括号结果不变。比如:

var show=function(){

  alert(1);

}

show();

即使给show()变换成(show)(),结果是不变的。show本身代表的是(function(){alert(1)}),所以还可以写成匿名函数(function(){alert(1)})();

这样写的好处是匿名函数在执行的同时,还可以定义他,还有一个是定义的变量都变为局部变量。

封闭空间可以避免变量名重复的问题

比如在工作中,你写了一行代码:

var oBtn=document.getElementById("input")[0];

oBtn.onclick=function(){

  alert(1);

};

几天以后你的同事B也写了这样一行代码

var oBtn=document.getElementById("input")[1];

oBtn.onclick=function(){

  alert(2);

};

你同事写的代码就会覆盖你的代码,发生冲突。

这个时候可以使用封闭空间解决这个问题

自己的代码;

;(function(){

  var oBtn=document.getElementById("input")[0];

  oBtn.onclick=function(){

    alert(1);

  };

})();

同事的代码:

;(function(){

  var oBtn=document.getElementById("input")[1];

  oBtn.onclick=function(){

    alert(2);

  };

})();

使用了封闭空间后,变量的作用域发生了改变,这个时候的oBtn只在自己的函数中起作用。

在函数前面加分号是为了避免被别人坑,导致和别的程序猿发生肢体冲突:如果别人的代码没有写分号,如果代码压缩的时候就会发生问题,这个时候我们自己的代码就会拯救我们,而两个分号写在一起时是没有问题的。

在函数后面写分号,是为了不坑别人,避免被别人打。

封闭空间的选项卡

for(var i=0;i<aBtn.length;i++){

  (function(index){//这里的index为定义的参数

    aBtn[i].onclick=function(){

      for(var i=0;i<aBtn.length;i++){

        aBtn[i].className='';

        aDiv[i].style.display='none';

      }

      this.className='on';

      aDiv[this.index].style.display='block';

    };    

  })(i);//i为for循环里的某个值,i++,

}

封闭空间解决的问题:

1:变量名冲突的问题

2:for循环里去不到i值的问题

原文地址:https://www.cnblogs.com/zhengzunzun/p/5793124.html