JQuery的那些坑，JQuery坑人指數排行

1 亂用選擇器

坑人指數：200

#JQuery選擇器呼叫代價很大，重複呼叫效率更低。應採用快取物件的方法或採用鍊式呼叫的方式。

//错误的写法
$("#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 全域選擇效率低

坑人指數：100

盡量使用上下文（context）查找，避免全域選擇的使用。全域選擇器會進行整個Doc的查找，效率很低。

//错误的写法
$(".active").method();
//正确的写法
var ul = $("#myList");
$(".active",ul).method();

 

3 複製匿名函數

#坑人指數：50

避免多次複製匿名函數的寫法，將匿名函數分離出來，供其它物件多次呼叫。

//错误的写法
$('#myp').click( function(){
   //一些操作
});
//正确的写法
function pClickFn (){
   //一些操作   
}
$('#myp').click( pClickFn );

 

4 誤用ajax的complete

坑人指數：30

當用ajax進行資料要求時，避免使用complete回呼方法，而應該使用success方法。 complete回呼在請求成功或失敗時都會觸發。

//错误的写法
$.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 鍊式呼叫的誤用

#坑人指數：20

採用鍊式呼叫的方式會使物件在漸變未完成之前就被移除，也就是remove方法會在fadeOut方法完成前呼叫。當需要第一個方法完成之後，再執行第二個方法，請使用回調，即第二種方式。

//错误的写法
$("#myp").click(function(e) {
  $(this).fadeOut("slow").remove();
});
//正确的写法
$("myp").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

 

6 事件多次綁定

坑人指數：20

如果你綁定（bind）同一事件多次，回應就會執行多次。為避免多次執行，請先做事件解綁再重新綁定。

//避免响应多次执行
$("myp").unbind("click").bind("click");

 

7 錯誤使用this指示符

坑人指數：10

this指示符存在於一定的上下文中的，當上下文變化時this指向不同的對象。如果還想呼叫原始上下文中的this，則需要在原始上下文中快取原始this物件（ $that = $(this) ）。

//错误的写法
$( "#myList").click( function() {
   $(this).method(); 
   $("#myList li").each( function() {
      //this并不指向myList
      $(this).method2(); 
   })
});

 

#

以上是JQuery的那些坑，JQuery坑人指數排行的詳細內容。更多資訊請關注PHP中文網其他相關文章！