美文网首页Web 前端开发 程序员
JQuery坑,说说哪些大家都踩过的坑

JQuery坑,说说哪些大家都踩过的坑

作者: 毛三十 | 来源:发表于2017-04-19 08:24 被阅读0次

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(); 
   })
});

相关文章

  • JQuery坑,说说哪些大家都踩过的坑

    1 乱用选择器 坑人指数:200 JQuery选择器调用代价很大,反复调用效率更低。应采用缓存对象的方法或采用链式...

  • PHP中的数据类型

    一说到数据类型,这个坑就太多了,多到有哪些坑,有多少坑,不知道自己还会踩哪些坑,以及踩过的坑还会不会再踩,我对...

  • 【产品】在做产品过程中遇到的几个坑

    在一个论坛上看到一个话题“说说做产品工作过程中遇到的几个坑”大家的讨论我都感同身受,那我也说说自己踩过的几个坑吧,...

  • 我踩的买房坑(1)

    我踩过各种各样的坑,其中有买房坑、工作坑、相亲坑、刷单坑、酒托坑等。今天我想说说买房坑。 我以前在南京待过四年,从...

  • POJ3684(弹性碰撞)各种wrong answer踩坑

    我踩过的坑全部都写在注释里面了,供大家参考。

  • iOS开发中遇到的坑

    从事iOS开发已有数年,一路走来踩过无数的坑,然而都踩过哪些坑,如今想来脑子里竟是一片空白,为什么呢?仔细想了想,...

  • 踩坑

    我们在这个世间,就是把要踩的坑,把好的坑,把坏的坑,都踩一遍!都经历一遍,都尝一遍! 我们踩过之后就会知道,不要进...

  • 交互设计师所要避免的几个坑

    前言 工作中难免会踩到几个坑,即使现在不踩以后还会踩,只有踩过才会深刻记住,踩过说明爱过!但是踩过的坑必须把坑填满...

  • 职场干货 | 你都踩过哪些职场坑?

    大部分的我们都经历过职场,或多或少都有自己的经验。今天和大家一起聊聊自己都踩过哪些职场坑。 1.不会表达,从不会向...

  • 幕布+讯飞,为读书插上腾飞的翅膀

    在读书过程中,你遇到哪些问题,踩过哪些坑? 慢:速度不高,忘:质量不高,相信大家都遇到过这两个大问题,而最近参与的...

网友评论

    本文标题:JQuery坑,说说哪些大家都踩过的坑

    本文链接:https://www.haomeiwen.com/subject/oarczttx.html