[javascript] 피해야 할 jQuery 함정

JAVASCRIPT / 글쓴이

jQuery로 프로젝트를 시작하고 있습니다.

jQuery 프로젝트에 어떤 함정 / 오류 / 오해 / 부정 / 오용이 있습니까?

답변

성능 저하를 인식하지 못하고 선택기를 로컬 변수에 할당하는 대신 셀렉터를 과도하게 사용합니다. 예를 들면 다음과 같습니다.

$('#button').click(function() {
    $('#label').method();
    $('#label').method2();
    $('#label').css('background-color', 'red');
});

오히려 :-

$('#button').click(function() {
    var $label = $('#label');
    $label.method();
    $label.method2();
    $label.css('background-color', 'red');
});

또는 더 나은 체인으로 :-

$('#button').click(function() {
    $("#label").method().method2().css("background-color", "red");
});

내가 찾은 이 내가 어떻게 호출 스택 작업을 깨달았을 때 계몽 순간을.

편집 : 의견에 제안을 통합했습니다.

답변

컨텍스트 사용 방법을 이해하십시오. 일반적으로 jQuery 선택기는 전체 문서를 검색합니다.

// This will search whole doc for elements with class myClass
$('.myClass');

그러나 컨텍스트 내에서 검색하여 작업 속도를 높일 수 있습니다.

var ct = $('#myContainer');
// This will search for elements with class myClass within the myContainer child elements
$('.myClass', ct);

답변

다음과 같이 베어 클래스 선택기를 사용하지 마십시오.

$('.button').click(function() { /* do something */ });

그러면 모든 단일 요소를 살펴보고 “button”클래스가 있는지 확인합니다.

대신 다음과 같이 도움을 줄 수 있습니다.

$('span.button').click(function() { /* do something */ });
$('#userform .button').click(function() { /* do something */ });

작년에 Rebecca Murphy의 블로그 에서 배웠습니다.

업데이트 -이 답변은 2 년 전에 제공되었으며 현재 버전의 jQuery에 적합하지 않습니다 . 의견 중 하나에는이를 증명하는 테스트가 포함됩니다. 이 답변 당시 jQuery 버전을 포함 하는 업데이트 된 테스트 버전 도 있습니다 .

답변

익명 함수를 분리하여 재사용 할 수 있도록하십시오.

//Avoid
$('#div').click( function(){
   //do something
});

//Do do
function divClickFn (){
   //do something    
}

$('#div').click( divClickFn );

답변

  • 문서를 남용하지 마십시오.
  • 문서를 초기화 코드로만 준비하십시오.
  • 항상 재사용 가능한 문서 외부에서 함수를 추출하십시오.

doc ready 문에서 수백 줄의 코드를 보았습니다. 추악하고 읽을 수 없으며 유지 관리가 불가능합니다.

답변

서버에 $.ajax대한 Ajax 요청에 대한 기능을 사용하는 동안 complete이벤트를 사용하여 응답 데이터를 처리 하지 않아야 합니다. 요청이 성공했는지 여부를 나타냅니다.

대신을 complete사용하십시오 success.

문서에서 Ajax Events 를 참조하십시오 .

답변

“Chaining”콜백이있는 애니메이션 이벤트.

클릭하면 사라지는 단락에 애니메이션을 적용하려고한다고 가정합니다. 나중에 DOM에서 요소를 제거하려고했습니다. 메소드를 간단히 연결할 수 있다고 생각할 수도 있습니다.

$("p").click(function(e) {
  $(this).fadeOut("slow").remove();
});

이 예제에서 .remove ()는 .fadeOut ()이 완료되기 전에 호출되어 점진적인 페이딩 효과를 없애고 요소를 즉시 사라지게합니다. 대신 이전을 마친 후에 만 ​​명령을 실행하려면 콜백을 사용하십시오.

$("p").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

.fadeOut ()의 두 번째 매개 변수는 .fadeOut () 애니메이션이 완료되면 실행되는 익명 함수입니다. 이것은 점진적인 페이딩과 요소의 후속 제거를 만듭니다.