将用jQuery实现的函数改写为纯js实现
习惯了jQuery后，单纯的js已经懒的用了。心里一直在想，用jQ吧，那东西查找DOM元素，循环操作可都是一级赞的。然而现在在做页面优化，发现页面使用了jQuery，然而却并没有太多的使用，只是几个函数，而为此就引入一个55K左右的文件值与不值，这就是个问题了。
别说gzip压缩，因为如果去掉jQuery后压缩的更小啊，是这个道理吧？而且凭白增加一次Http请求，总是很吃亏。于是今天花费了一些时间来将用jQuery实现的函数改写为纯js实现。记录下来，可能对各位的帮助不大，但是有些小技巧对自己还是有所帮助的，老来回忆一下吧。
示例1：
源代码如下：
var url = 'framer真正的URL地址，算是异步加载吧';
if ('show_taobao_mobile' == $(this).attr('name') && url != document.getElementById('huafei_chongzhi').src) {
document.getElementById('huafei_chongzhi').src = url;
}
$('#tagBox ul li').removeClass();
$(this).addClass('at1');
$('#buyBox div.table').hide();
$('#'+$(this).attr('name')).show();
});
该函数拆出的难题是在于要对id为tagBox下的每个ul 下的li绑定onclick事件，虽然实际代码中该li只有三个，我也完全可以定义三个id来操作这些东西。但是如果以后增加新的li呢？为了以后维护的人方便些，我决定还是采用此方式，对每个li都执行绑定操作。
改后的代码如下：
var tagBoxul = tagBox.firstChild;
for(var tagBoxli=tagBoxul.firstChild; tagBoxli!=null;tagBoxli=tagBoxli.nextSibling)
{
tagBoxli.onclick=function(){
var url = 'framer真正的URL地址，算是异步加载吧';
if('show_taobao_mobile'== this.getAttribute('name') && url != document.getElementById('huafei_chongzhi').src) {
document.getElementById('huafei_chongzhi').src = url;
}
tagRemoveClass();
this.className = 'at1';
tagHiddenTable();
document.getElementById(this.getAttribute('name')).style.display='block';
}
}
function tagRemoveClass(){
for(var tagBoxli=tagBoxul.firstChild; tagBoxli!=null;tagBoxli=tagBoxli.nextSibling)
{
tagBoxli.className = '';
}
}
function tagHiddenTable(){
var buyBox = document.getElementById('buyBox');
for(var div=buyBox.firstChild; div!=null; div=div.nextSibling)
{
if(div.className == 'table'){
div.style.display = 'none';
}
}
}
这里面我先找到其tagBox的这个元素，其ul为第一个子元素，再对ul标签下面的子元素(li)标签执行循环绑定。
示例2：
源代码如下：
if($('iframe[name=xxadboo]').length==0){//如果没有就插入
$('body').append('<iframe name="xxadboo" src="" width="1px" height="1px" style="visibility:hidden;"></iframe>');
}
var url = $('form[name='+obj.name+']').attr('action')+'?';
$('form[name='+obj.name+'] input').each(function(k,v){
if(v.type != 'submit') url += v.name+'='+v.value+'&';
});
var request = '这里是统计的代码'+obj.name+'&_u='+encodeURIComponent(url)+'&_r='+new Date().getTime()+'&_t=2';
$('iframe[name=xxadboo]').attr('src' , request);
return true;
}
原代码是将函数做为了一个对象的属性，这里让我直接改为函数了，因为用到该对象的只有一处，没必要如此写。
因为是统计不同的事件的点击次数，所以对http请求做异步加载，即要统计的按钮当其点击时触发函数，来异步加载frames来做统计的工作。因为Google并不能统计出每个按钮有多少次点击~~
这里烦人的地方大概要属frame的动态加载了，因为原来用jQuery很容易就判断该对象是否存在现在改用js实现难免要多想一下。
因为IE这款“经典”的浏览器对iframe的name属性无法使用setAttribute方法，而这里使用name又完全没有必要，所以将其改为id方式实现，具体代码如下：
var iframe = document.getElementById("statframe");
if(iframe == undefined){
iframe = document.createElement("iframe");
iframe.setAttribute('width','1px');
iframe.setAttribute('id','statframe');
iframe.setAttribute('height','1px');
iframe.setAttribute('style','visibility:hidden;');
document.body.appendChild(iframe);
}
var url = obj.getAttribute('action')+'?';
var inputs = obj.getElementsByTagName('input');
var len = inputs.length;
for(var l=0; l< len; l++) {
if(inputs[l].type != 'submit'){
url += inputs[l].getAttribute('name')+'='+inputs[l].value+'&';
}
}
var request = '这里是统计的代码'+obj.name+'&_u='+encodeURIComponent(url)+'&_r='+new Date().getTime()+'&_t=2';
iframe.setAttribute('src',request);
return true;
}
简单总结：
jQuery是一个不错的js框架，但是有些地方完全没有必要用，因为用普通的js方式一样可以实现。大家不要过分的迷恋jQuery,jQuery只是个传说~~
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2009/12/09/1663/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
我把jQuery库自己再压缩了一次，40+K，然后整合一些自己要用的插件进去，50K左右。函数的话，我根据代码的难易程度来决定是否使用jQuery
[回复]
@bolo
呵，jQ用gzip压完貌似应该是23K左右，并不算太过分
我这个之所以要去掉jQuery是因为我优化的站是导航站，要的就是速度。嗯。
[回复]
@simaopig
我博客的library.js就是jQuery1.3.2+两个插件做出来的，正常是47K，gzip后16K，哈哈
360出导航站了？
[回复]
@bolo
出一年多了，功能稍微多了些，所以速度上面略显不足，这几天我正在搞优化。
但是积重难返，活不是一天就能干完的，在尽量不减少功能的情况下，能改点是点。
明天也会改一个东西，今天有一点点不太明白，不敢上线，毕竟访问量太大，如果造成功能有问题，影响很坏。呵。
[回复]
@simaopig
囧，刚去看了，这么有家底的一个网站居然没开Gzip，开了的话速度马上提升一半了
[回复]
@bolo
这个不知道为什么没开，也许和CDN有关，因为我不清楚CND是否可以开gzip，所以不敢妄下断言。。
[回复]