一个糟糕的Jquery可能会影响到整个页面的渲染更或是请求耗时很长,这样的网页展示,我想是用户不愿意看到的。
1.取消没必要的频繁的获取Jquery对象,这个在Java编程里我想一样:
// 糟糕
h = $('#element').height();
$('#element').css('height',h-20);
// 建议
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
2.用局部变量代理从JQuery对象中获取属性
// 糟糕
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
// 建议var
$element = $('#element');
var h = $element.height();
$element.css('height',h-20);
// 糟糕
$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});
$first.hover(function(){
$first.css('border','1px solid red');
})
// 建议
$first.on('click',function(){
$first.css('border','1px solid red');
$first.css('color','blue');
})
$first.on('hover',function(){
$first.css('border','1px solid red');
})
合并函数:
// 糟糕
$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});
// 建议
$first.on('click',function(){
$first.css({
'border':'1px solid red',
'color':'blue'
});
});
5.使用链接
// 糟糕
$second.html(value);
$second.on('click',function(){
alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);
// 建议
$second.html(value);
$second.on('click',function(){
alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);
6.基于5做一些代码格式优化,增加可读性
// 糟糕
$second.html(value);
$second.on('click',function(){
alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);
// 建议
$second.html(value);
$second
.on('click',function(){ alert('hello everybody');})
.fadeIn('slow')
.animate({height:'120px'},500);
7.避免使用一些容易出错的形式:
<a href="#"/> # 这里指的是返回页面top,虽然没有深究,但是在项目中真心踩过坑。
尽量使用<a href="javascript:;">,当然也有喜好用<a href="javascript:void(0);">//javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。
8.对于一些常见问题的解释:
//一下操作并不是按钮失效,因为οnclick="return false"只能阻止a标签href属性中的网址(或代码)执行,可以理解成让一个a标签的页面跳转失败
$("#id").on("click",function(){return false;});