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

habren 发布于2019-08-20 17:04 / 312人阅读

摘要：回调在请求成功或失败都会触发。为避免多次执行，请先做事件解绑再重新绑定。避免响应多次执行错误使用指示符坑人指数指示符存在于一定的上下文中的，当上下文变化时指向不同的对象。

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 有哪些坑语言的坑爹设计阿里云服务器的坑

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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