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

防止屡次复制匿名函数的写法,将匿名函数分离出来,供别的对象屡次挪用。

//毛病的写法
$('#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(); 
   })
});
    原文作者:毛瑞
    原文地址: https://segmentfault.com/a/1190000009679758
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞