一、缓存变量,减少DOM的遍历
h
= $('#element').height();
$(
'#element'
).css(
'height'
,h-20);
$element
= $(
'#element'
);
h
= $element.height();
$element.css(
'height'
,h-20);
jQuery与javascript一样,一般来说,最好确保你的变量在函数作用域内。
三、使用使用匈牙利命名法
(建议 - 在jQuery对象前加$前缀)
var first = $('#first');
var second = $('#second');
var value = $first.val();
优化↓↓↓↓↓↓↓↓↓↓↓
var $first = $('#first');
var $second = $('#second'),
var value = $first.val();
var second = $('#second');
var value = $first.val();
优化↓↓↓↓↓↓↓↓↓↓↓
var $first = $('#first');
var $second = $('#second'),
var value = $first.val();
四、使用 Var 链(单 Var 模式)
var
$first = $('#first'),
$second = $('#second'),
value = $first.val(),
k = 3,
cookiestring = 'SOMECOOKIESPLEASE',
i,
j,
myArray = {};
$first = $('#first'),
$second = $('#second'),
value = $first.val(),
k = 3,
cookiestring = 'SOMECOOKIESPLEASE',
i,
j,
myArray = {};
五、请使用’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');
})
$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');
})
六、精简javascript
$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'
});
});
$first.css('border','1px solid red');
$first.css('color','blue');
});
优化↓↓↓↓↓↓↓↓↓↓↓
$first.on('click',function(){
$first.css({
'border':'1px solid red',
'color':'blue'
});
});
七、链式操作
$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);
$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);
八、维持代码的可读性
$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);
$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);
九、选择短路求值
function initVar($myVar) {
if(!$myVar) {
$myVar = $('#selector');
}
}
优化↓↓↓↓↓↓↓↓↓↓↓
function initVar($myVar) {
$myVar = $myVar || $('#selector');
}
if(!$myVar) {
$myVar = $('#selector');
}
}
优化↓↓↓↓↓↓↓↓↓↓↓
function initVar($myVar) {
$myVar = $myVar || $('#selector');
}
十、选择捷径
if(collection.length > 0){..}
优化↓↓↓↓↓↓↓↓↓↓↓
if(collection.length){..}
优化↓↓↓↓↓↓↓↓↓↓↓
if(collection.length){..}
十一、使用子查询缓存的父元素
var
$container = $('#container'),
$containerLi = $('#container li'),
$containerLiSpan = $('#container li span');
优化↓↓↓↓↓↓↓↓↓↓↓
var
$container = $('#container '),
$containerLi = $container.find('li'),
$containerLiSpan= $containerLi.find('span');
$container = $('#container'),
$containerLi = $('#container li'),
$containerLiSpan = $('#container li span');
优化↓↓↓↓↓↓↓↓↓↓↓
var
$container = $('#container '),
$containerLi = $container.find('li'),
$containerLiSpan= $containerLi.find('span');