資訊專欄INFORMATION COLUMN
摘要：回調(diào)在請求成功或失敗都會(huì)觸發(fā)。為避免多次執(zhí)行，請先做事件解綁再重新綁定。避免響應(yīng)多次執(zhí)行錯(cuò)誤使用指示符坑人指數(shù)指示符存在于一定的上下文中的，當(dāng)上下文變化時(shí)指向不同的對(duì)象。
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ù)請求時(shí)，避免使用complete回調(diào)方法，而應(yīng)該使用success方法。complete回調(diào)在請求成功或失敗都會(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è)方法，請使用回調(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í)行，請先做事件解綁再重新綁定。
//避免響應(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();
})
});
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83375.html
摘要：事件冒泡一個(gè)簡單，但是坑了我無數(shù)回的知識(shí)點(diǎn)與的交互通過事件來實(shí)現(xiàn)。而瀏覽器的事件流是一個(gè)非常重要的概念。不去討論那些古老的瀏覽器有事件捕獲與事件冒泡的爭議，只需要知道在中規(guī)定的事件流包括了三個(gè)部分，事件捕獲階段處于目標(biāo)階段事件冒泡階段。 打算封裝一個(gè)彈窗組件，做的時(shí)候忘記了考慮事件冒泡的因素，結(jié)果被坑得不要不要的。為了解決自己的問題，去查閱了不少資料，把事件流相關(guān)的知識(shí)都給總結(jié)一下。 ...
摘要：事件冒泡一個(gè)簡單，但是坑了我無數(shù)回的知識(shí)點(diǎn)與的交互通過事件來實(shí)現(xiàn)。而瀏覽器的事件流是一個(gè)非常重要的概念。不去討論那些古老的瀏覽器有事件捕獲與事件冒泡的爭議，只需要知道在中規(guī)定的事件流包括了三個(gè)部分，事件捕獲階段處于目標(biāo)階段事件冒泡階段。 打算封裝一個(gè)彈窗組件，做的時(shí)候忘記了考慮事件冒泡的因素，結(jié)果被坑得不要不要的。為了解決自己的問題，去查閱了不少資料，把事件流相關(guān)的知識(shí)都給總結(jié)一下。 ...
摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...
閱讀 1157·2021-10-09 09:43
閱讀 18884·2021-09-22 15:52
閱讀 1124·2019-08-30 15:44
閱讀 3087·2019-08-30 15:44
閱讀 3275·2019-08-26 14:07
閱讀 937·2019-08-26 13:55
閱讀 2598·2019-08-26 13:41
閱讀 3119·2019-08-26 13:29
