js小程序写法优化

标签：获取   window   isp   优化   offset   弹窗   size   onscroll   length   

(function(){
   var gcld_but = document.getElementById("gcld_but"),
         gcld_but_li = gcld_but.getElementsByTagName("li"),
         gcld_box = document.getElementById("gcld_box"),
         close_btn = document.getElementById("close_btn"),
         gcld_btn = document.getElementById("gcld_btn"),
         box = document.getElementById("box"),
         len = gcld_but_li.length,
         gcld_but_a,
         i,
         c_height = document.documentElement.clientHeight,
         c_width = document.documentElement.clientWidth,
         o_height,
         o_width,
         on = 0;

   /*弹窗上下左右居中*/
   function centered_box(){
      var  s_top = document.body.scrollTop,---------------------》》》》》》》》》》》变量尽量写在开头，防止滚动时候每次执行函数就取DOM元素，浪费性能。
         left,
         top;

      if( !o_height ){ ----------------------》》》》》》》》》》没获取过该DOM元素再获取，取一次DOM元素后放在变量里（页面不关就一直存在），下次执行函数就不取了。
         o_height = box.offsetHeight;------------------》》》》》》有些浏览器在元素display：none时候取不到宽高，点击按钮元素显示执行函数，所以写在函数里面一定能取到。
         o_width = box.offsetWidth;    
      }


      left = (c_width - o_width)/2 + "px";
      top = (c_height/2 - o_height/2 +s_top) + "px";

      box.style.left = left;
      box.style.top = top;
   }



   /*点击打开弹窗*/
   for(i=0; i<len; i++){
      gcld_but_a = gcld_but_li[i].getElementsByTagName("a")[0];
      gcld_but_a.onclick = function(){
         gcld_box.style.display = "block";
         on = 1;
         centered_box();
      }
   }

   /*点击关闭弹窗*/
   close_btn.onclick = gcld_btn.onclick = function(){
      gcld_box.style.display = "none";
      on = 0;
   };

   window.onscroll = window.onresize = function(){
      if(on){ ----------------------------------》》》》》》》》》》》》》》》》》》》加个开关，只让点击的时候执行弹窗函数。
         centered_box();
      }
   };

})();

总结：1：定义的变量尽量写在程序的上方----规范
　　　2：（从执行流的角度）功能实现后----（从性能的角度）对程序进行优化。
　　　3：性能优化 
　　　　　　1、防止重复获取DOM元素
　　　　　　2、防止重复执行代码函数
　　　　　　3、写法考虑兼容性
　　　　　　

js小程序写法优化

标签：获取   window   isp   优化   offset   弹窗   size   onscroll   length   

原文地址：http://www.cnblogs.com/fengluzheweb/p/6033718.html