1,变量缓存
dom搜索是比较昂贵的,所以记得用缓存功能
// 垃圾代码
h = $('#element').height();
$('#element').css('height',h-20);
// 优秀的代码
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
2,不要使用全局变量
// 垃圾代码
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
// 优秀代码
var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);
3,使用匈牙利语法的变量,就是在变量前面加上美元符合,表示的是Jquery对象
// 垃圾代码
var first = $('#first');
var second = $('#second');
var value = $first.val();
// 优秀代码
var $first = $('#first');
var $second = $('#second'),
var value = $first.val();
4,变量定义尽量在一行,不要多行定义,建议把没有值的放在最后
var
$first = $('#first'),
$second = $('#second'),
value = $first.val(),
k = 3,
cookiestring = 'SOMECOOKIESPLEASE',
i,
j,
myArray = {};
5,使用事件的时候,尽量用on
// 垃圾代码
$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');
})
6,合并函数
// 垃圾代码
$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'
});
});
7,使用链式结构代码
// 垃圾代码
$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);
8,增强代码可读性
// 垃圾代码
$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);
9,使用短路循环表达式,从左边优先匹配,最后到右边
// 垃圾代码
function initVar($myVar) {
if(!$myVar) {
$myVar = $('#selector');
}
}
// 优秀代码
function initVar($myVar) {
$myVar = $myVar || $('#selector');
}
10,使用简写
// 垃圾代码
if(collection.length > 0){..}
// 优秀代码
if(collection.length){..}
11,对元素进行大量操作时应选择拆卸,最后在组装在一起
// 垃圾代码
var
$container = $("#container"),
$containerLi = $("#container li"),
$element = null;
$element = $containerLi.first();
//... a lot of complicated things
// 优秀代码
var
$container = $("#container"),
$containerLi = $container.find("li"),
$element = null;
$element = $containerLi.first().detach();
//...a lot of complicated things
$container.append($element);
12,技巧
// 垃圾代码
$('#id').data(key,value);
// 优秀代码
$.data('#id',key,value);
13,使用缓存父元素方法进行子查询
// 垃圾代码
var
$container = $('#container'),
$containerLi = $('#container li'),
$containerLiSpan = $('#container li span');
// 优秀代码
var
$container = $('#container '),
$containerLi = $container.find('li'),
$containerLiSpan= $containerLi.find('span');
14,避免通用选择器,尽量不要用*
// 垃圾代码
$('.container > *');
// 优秀代码
$('.container').children();
15,避免默认通用选择器
// 垃圾代码
$('.someclass :radio');
// 优秀代码
$('.someclass input:radio');
16,尽量用id选择器
// 垃圾代码
$('div#myid');
$('div#footer a.myLink');
// 优秀代码
$('#myid');
$('#footer .myLink');
17,不要用多个id选择器
// 垃圾代码
$('#outer #inner');
// 优秀代码
$('#inner');
18,不要使用废弃的方法
// 垃圾代码 - live is deprecated
$('#stuff').live('click', function() {
console.log('hooray');
});
// 优秀代码
$('#stuff').on('click', function() {
console.log('hooray');
});