JQuery七个常犯的错误

作者: 小明yz | 来源:发表于2017-07-01 08:47 被阅读91次

    1、 乱用选择器

    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、全局选择效率低

    尽量使用上下文(context)查找,避免全局选择的使用。全局选择器会进行整个Doc的查找,效率很低。

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

    3 、复制匿名函数

    避免多次复制匿名函数的写法,将匿名函数分离出来,供其它对象多次调用。

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

    4 、误用ajax的complete

    当用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、 链式调用的误用

    采用链式调用的方式会使对象在渐变未完成之前就被移除,即remove方法会在fadeOut方法完成之前调用。当需要第一方法完成之后,再执行第二个方法,请使用回调,即第二种方式。

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

    6 、事件多次绑定

    如果你绑定(bind)同一事件多次,响应就会被执行多次。为避免多次执行,请先做事件解绑再重新绑定。

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

    7、错误使用this指示符

    this指示符存在于一定的上下文中的,当上下文变化时this指向不同的对象。如果还想调用原上下文中的this,则需要在原上下文中缓存原this对象( $that = $(this) )。

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

    欢迎关注我的公众号(同步更新文章):DoNet技术分享平台

    阅读原文

    相关文章

      网友评论

        本文标题:JQuery七个常犯的错误

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