1 亂用選擇器
坑人指數(shù):200
JQuery選擇器調(diào)用代價(jià)很大,反復(fù)調(diào)用效率更低缩挑。應(yīng)采用緩存對(duì)象的方法或采用鏈?zhǔn)秸{(diào)用的方式但两。
//錯(cuò)誤的寫法
$("#button").click(function(){
$('#list li').addClass('strong');
$('#list li').css('color', 'red');
});
//正確的寫法
$("#button").click(function(){
$lis = $('#list li');
$lis.addClass('strong');
$lis.css('color', 'red');
});
//更好的寫法
$("#button").click(function(){
$('#list li').addClass('strong').css('color', 'red');
});
2 全局選擇效率低
坑人指數(shù):100
盡量使用上下文(context)查找,避免全局選擇的使用供置。全局選擇器會(huì)進(jìn)行整個(gè)Doc的查找谨湘,效率很低。
//錯(cuò)誤的寫法
$(".active").method();
//正確的寫法
var ul = $("#myList");
$(".active",ul).method();
3 復(fù)制匿名函數(shù)
坑人指數(shù):50
避免多次復(fù)制匿名函數(shù)的寫法芥丧,將匿名函數(shù)分離出來紧阔,供其它對(duì)象多次調(diào)用。
//錯(cuò)誤的寫法
$('#myDiv').click( function(){
//一些操作
});
//正確的寫法
function divClickFn(){
//一些操作
}
$('#myDiv').click(function(){
divClickFn();
});
4 誤用ajax的complete
坑人指數(shù):30
當(dāng)用ajax進(jìn)行數(shù)據(jù)請(qǐng)求時(shí)续担,避免使用complete回調(diào)方法擅耽,而應(yīng)該使用success方法。complete回調(diào)在請(qǐng)求成功或失敗都會(huì)觸發(fā)赤拒。
//錯(cuò)誤的寫法
$.ajax({
url: "http://tools.42du.cn/jsonp/student/all",
}).complete(function( data ) {
//一些操作
});
//正確的寫法
$.ajax({
url: "http://tools.42du.cn/jsonp/student/all",
}).success(function( data ) {
//一些操作
});
5 鏈?zhǔn)秸{(diào)用的誤用
坑人指數(shù):20
采用鏈?zhǔn)秸{(diào)用的方式會(huì)使對(duì)象在漸變未完成之前就被移除秫筏,即remove方法會(huì)在fadeOut方法完成之前調(diào)用。當(dāng)需要第一方法完成之后挎挖,再執(zhí)行第二個(gè)方法这敬,請(qǐng)使用回調(diào),即第二種方式蕉朵。
//錯(cuò)誤的寫法
$("#myDiv").click(function(e) {
$(this).fadeOut("slow").remove();
});
//正確的寫法
$("myDiv").click(function(e){
$(this).fadeOut("slow", function(){
$(this).remove();
});
});
6 事件多次綁定
坑人指數(shù):20
如果你綁定(bind)同一事件多次崔涂,響應(yīng)就會(huì)被執(zhí)行多次。為避免多次執(zhí)行始衅,請(qǐng)先做事件解綁再重新綁定冷蚂。
//避免響應(yīng)多次執(zhí)行
$("myDiv").unbind("click").bind("click");
7 錯(cuò)誤使用this指示符
坑人指數(shù):10
this指示符存在于一定的上下文中的,當(dāng)上下文變化時(shí)this指向不同的對(duì)象汛闸。如果還想調(diào)用原上下文中的this蝙茶,則需要在原上下文中緩存原this對(duì)象($that = $(this)
)。
//錯(cuò)誤的寫法
$( "#myList").click( function() {
$(this).method();
$("#myList li").each( function() {
//this并不指向myList
$(this).method2();
})
});