Those pitfalls of JQuery, JQuery pitfalls index ranking

1 Indiscriminate use of selectors

Train index: 200

JQuerySelector calls are very expensive, and repeated calls are even less efficient. The cachingobject method should be used or the chained call method should be used.

//错误的写法
$("#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 Global selection is inefficient

Trading index: 100

Use context search as much as possible to avoid the use of global selection. The global selector will search the entire Doc, which is very inefficient.

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

3 Copy Anonymous function

Training index: 50

Avoid copying the anonymous function multiple times, The anonymous function is separated and can be called multiple times by other objects.

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

4 Misuse of ajax's complete

Training index: 30

When using ajax to make data requests, avoid using the complete callback method. Instead, use the success method. The complete callback is triggered whether the request succeeds or fails.

//错误的写法
$.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 Misuse of chain calls

Training index: 20

Using chain calls will cause the object to not complete the gradient was removed before, that is, the remove method will be called before the fadeOut method is completed. When you need to execute the second method after the first method is completed, please use callback, which is the second method.

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

6 EventMultiple bindings

Deception index: 20

If you bind the same If the event occurs multiple times, the response will be executed multiple times. To avoid multiple executions, please unbind the event first and then rebind it.

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

7 Wrong use of this indicator

Deception index: 10

This indicator exists in a certain context, when the context changes When this points to different objects. If you still want to call this in the original context, you need to cache the original this object in the original context ($that = $(this)).

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

The above is the detailed content of Those pitfalls of JQuery, JQuery pitfalls index ranking. For more information, please follow other related articles on the PHP Chinese website!