JQuery坑，說說哪些大家都踩過的坑

habren 發布于2019-08-20 17:04 / 313人閱讀

摘要：回調在請求成功或失敗都會觸發。為避免多次執行，請先做事件解綁再重新綁定。避免響應多次執行錯誤使用指示符坑人指數指示符存在于一定的上下文中的，當上下文變化時指向不同的對象。

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

避免多次復制匿名函數的寫法，將匿名函數分離出來，供其它對象多次調用。

//錯誤的寫法
$("#myDiv").click( function(){
   //一些操作
});
//正確的寫法
function divClickFn(){
   //一些操作   
}
$("#myDiv").click(function(){
    divClickFn();
});

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方法完成之前調用。當需要第一方法完成之后，再執行第二個方法，請使用回調，即第二種方式。

//錯誤的寫法
$("#myDiv").click(function(e) {
  $(this).fadeOut("slow").remove();
});
//正確的寫法
$("myDiv").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

6 事件多次綁定 坑人指數：20

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

//避免響應多次執行
$("myDiv").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(); 
   })
});

云服務器 GPU云服務器云服務器踩過的坑 php 有哪些坑語言的坑爹設計阿里云服務器的坑

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83375.html

又被事件冒泡坑了一把，這次要徹底弄懂瀏覽器的事件流

摘要：事件冒泡一個簡單，但是坑了我無數回的知識點與的交互通過事件來實現。而瀏覽器的事件流是一個非常重要的概念。不去討論那些古老的瀏覽器有事件捕獲與事件冒泡的爭議，只需要知道在中規定的事件流包括了三個部分，事件捕獲階段處于目標階段事件冒泡階段。打算封裝一個彈窗組件，做的時候忘記了考慮事件冒泡的因素，結果被坑得不要不要的。為了解決自己的問題，去查閱了不少資料，把事件流相關的知識都給總結一下。 ...

Ocean 2019-08-19 18:33 評論0 收藏0
又被事件冒泡坑了一把，這次要徹底弄懂瀏覽器的事件流

摘要：事件冒泡一個簡單，但是坑了我無數回的知識點與的交互通過事件來實現。而瀏覽器的事件流是一個非常重要的概念。不去討論那些古老的瀏覽器有事件捕獲與事件冒泡的爭議，只需要知道在中規定的事件流包括了三個部分，事件捕獲階段處于目標階段事件冒泡階段。打算封裝一個彈窗組件，做的時候忘記了考慮事件冒泡的因素，結果被坑得不要不要的。為了解決自己的問題，去查閱了不少資料，把事件流相關的知識都給總結一下。 ...

TIGERB 2019-08-01 15:22 評論0 收藏0
個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0