JQuery의 함정, 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

전역 선택 사용을 피하기 위해 컨텍스트 검색을 최대한 사용하세요. 전역 선택기는 문서 전체를 검색하는데 이는 매우 비효율적입니다.

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

3 복사 익명 함수

후행 인덱스: 50

익명 함수를 여러 번 복사하지 마세요. 분리되어 있으며 다른 객체에 의해 여러 번 호출될 수 있습니다.

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

4 ajax의 전체 오용

기만 지수: 30

데이터 요청에 ajax를 사용할 때는 대신 전체 콜백 방법을 사용하지 마세요. 성공 방법을 사용하십시오. 요청이 성공하든 실패하든 전체 콜백이 트리거됩니다.

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

체인 호출을 사용하면 그라디언트가 완료되지 않은 경우 객체가 미완성됩니다. 즉, fadeOut 메서드가 완료되기 전에 제거 메서드가 호출됩니다. 첫 번째 방법 완료 후 두 번째 방법을 실행해야 하는 경우 두 번째 방법인 콜백을 이용하시기 바랍니다.

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

6 이벤트다중 바인딩

치트 지수: 20

동일하게 바인딩하는 경우 이벤트가 여러 번 발생하는 경우 , 응답은 여러 번 실행됩니다. 여러 번 실행되는 것을 방지하려면 먼저 이벤트 바인딩을 해제한 다음 다시 바인딩하세요.

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

7 이 지표의 잘못된 사용

훈련 지수: 10

이 지표는 특정 맥락에서 존재하며, 맥락이 바뀔 때 이 지점이 다른 개체에. 원래 컨텍스트에서도 이것을 호출하려면 원래 컨텍스트($that = $(this))에서 원래 this 개체를 캐시해야 합니다.

아아아아

위 내용은 JQuery의 함정, JQuery의 함정은 인덱스 순위를 매깁니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!