js小程序写法优化
Posted tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js小程序写法优化相关的知识，希望对你有一定的参考价值。
(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小程序写法优化的主要内容，如果未能解决你的问题，请参考以下文章