피해야 할 jQuery 함정

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 () 애니메이션이 완료되면 실행되는 익명 함수입니다. 이것은 점진적인 페이딩과 요소의 후속 제거를 만듭니다.

동일한 이벤트를 여러 번 bind ()하면 여러 번 발생합니다. 나는 보통 항상 unbind('click').bind('click')안전 하러갑니다

플러그인을 남용하지 마십시오.

대부분의 경우 라이브러리와 사용자 인터페이스 만 있으면됩니다. 간단하게 유지하면 장기적으로 코드를 유지 관리 할 수 ​​있습니다. 모든 플러그인이 지원 및 유지 보수되는 것은 아니며 실제로 대부분은 그렇지 않습니다. 핵심 요소를 사용하여 기능을 모방 할 수 있다면 강력히 권장합니다.

플러그인은 코드에 쉽게 삽입하여 시간을 절약 할 수 있지만 추가 항목이 필요할 경우 업데이트를 잃을 수 있으므로 수정하지 않는 것이 좋습니다. 시작할 때 저장하는 시간은 나중에 더 이상 사용되지 않는 플러그인 변경에서 느슨해집니다.

현명하게 사용하는 플러그인을 선택하십시오. 라이브러리 및 사용자 인터페이스 외에도 지속적으로 $ .cookie , $ .form , $ .validate 및 thickbox를 사용 합니다. 나머지 부분에서는 주로 자체 플러그인을 개발합니다.

함정 : 선택기 대신 루프 사용.

DOM 요소를 반복하기 위해 jQuery '.each'메소드에 도달하는 경우 선택기를 사용하여 요소를 대신 사용할 수 있는지 스스로에게 물어보십시오.

jQuery 선택기에 대한 자세한 정보 :
http://docs.jquery.com/Selectors

함정 : Firebug와 같은 도구를 사용하지 않음

Firebug는 실제로 이런 종류의 디버깅을 위해 만들어졌습니다. Javascript를 사용하여 DOM에서 문제를 해결하려면 가시성을 제공하기 위해 Firebug와 같은 훌륭한 도구가 필요합니다.

Firebug에 대한 추가 정보 : http://getfirebug.com/

: 다른 좋은 아이디어는 다형성 팟 캐스트의 에피소드에 (데이브 워드와 jQuery를 비밀) http://polymorphicpodcast.com/shows/jquery/

올바른 컨텍스트에서이 식별자를 사용하는 것에 대한 오해. 예를 들어 :

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   $(".listOfElements").each( function()
   {
      $(this).someMethod( ); // here 'this' is not referring first_element anymore.
   })
});

그리고 여기 당신이 그것을 해결할 수있는 샘플 중 하나가 있습니다 :

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   var $that = this;
   $(".listOfElements").each( function()
   {
      $that.someMethod( ); // here 'that' is referring to first_element still.
   })
});

전체 DOM을 여러 번 검색하지 마십시오. 이것은 실제로 스크립트를 지연시킬 수있는 것입니다.

나쁜:

$(".aclass").this();
$(".aclass").that();
...

좋은:

$(".aclass").this().that();

나쁜:

$("#form .text").this();
$("#form .int").that();
$("#form .choice").method();

좋은:

$("#form")
    .find(".text").this().end()
    .find(".int").that().end()
    .find(".choice").method();

항상 .each ()에서 $ (this)를 의미있는 변수에 캐시하십시오.

이렇게

$(selector).each(function () {
    var eachOf_X_loop = $(this); 
})

Repo Man이 말한 것과 비슷하지만, 그렇지는 않습니다.

ASP.NET Winforms를 개발할 때 종종

$('<%= Label1.ClientID %>');

# 기호를 잊어 버렸습니다. 올바른 형태는

$('#<%= Label1.ClientID %>');

행사

$("selector").html($("another-selector").html());

이벤트를 복제하지 않습니다. 모든 이벤트를 리 바인드해야합니다.

JP 명령에 따라 -clone ()은 true를 전달하면 이벤트를 리 바인드합니다.

동일한 jQuery 객체를 여러 번 만들지 마십시오.

//Avoid
function someFunc(){
   $(this).fadeIn();
   $(this).fadeIn();
}

//Cache the obj
function someFunc(){
   var $this = $(this).fadeIn();
   $this.fadeIn();
}

JavaScript도 마찬가지이지만 jQuery, JavaScript는 절대 CSS를 대체해서는 안됩니다.

또한 JavaScript를 사용하지 않는 사람이 사이트를 사용할 수 있는지 확인하십시오 (오늘날의 관련성이 높지 않지만 항상 완전히 사용 가능한 사이트를 갖는 것이 좋습니다).

너무 많은 DOM 조작. 브라우저가 페이지를 렌더링하고 다시 렌더링하는 방식으로 인해 .html (), .append (), .prepend () 등의 메서드는 훌륭하지만 너무 자주 사용하면 속도가 느려질 수 있습니다. DOM을 여러 번 변경하는 대신 html을 문자열로 작성하여 DOM에 한 번 포함하는 것이 더 좋습니다.

대신에:

var $parent = $('#parent');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $parent.append($div);
}

이 시도:

var $parent = $('#parent');
var iterations = 10;
var html = '';

for (var i = 0; i < iterations; i++){
    html += '<div class="foo-' + i + '"></div>';
}

$parent.append(html);

또는 이것조차도 ($ wrapper는 DOM에 아직 주입되지 않은 새로 생성 된 요소입니다.이 래퍼 div에 노드를 추가해도 속도가 느려지지 않으며 결국 하나의 DOM 조작을 사용하여 $ parent에 $ wrapper를 추가합니다 ) :

var $parent = $('#parent');
var $wrapper = $('<div class="wrapper" />');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $wrapper.append($div);
}

$parent.append($wrapper);

ClientID를 사용하여 ASP.NET 프로젝트에서 컨트롤의 "실제"ID를 가져옵니다.

jQuery('#<%=myLabel.ClientID%>');

또한 SharePoint 내에서 jQuery를 사용하는 경우 jQuery.noConflict ()를 호출해야합니다.

jQuery 객체 대신 ID를 함수에 전달 :

myFunc = function(id) { // wrong!
    var selector = $("#" + id);
    selector.doStuff();
}

myFunc("someId");

랩핑 된 세트를 전달하는 것이 훨씬 더 유연합니다.

myFunc = function(elements) {
    elements.doStuff();
}

myFunc($("#someId")); // or myFunc($(".someClass")); etc.

체인을 과도하게 사용합니다.

이것 좀 봐:

this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true);

설명

문자열 누산기 스타일 사용

+ 연산자를 사용하면 새로운 문자열이 메모리에 생성되고 연결된 값이 할당됩니다. 이 후에 만 ​​결과가 변수에 지정됩니다. 연결 결과에 대한 중간 변수를 피하기 위해 + = 연산자를 사용하여 결과를 직접 지정할 수 있습니다. 느린:

a += 'x' + 'y';

더 빠름 :

a += 'x';
a += 'y';

기본 작업은 함수 호출보다 빠를 수 있습니다

성능 결정 루프 및 함수에서 함수 호출에 대한 대체 기본 오퍼레이션 사용을 고려하십시오. 느린:

var min = Math.min(a, b);
arr.push(val);

더 빠름 :

var min = a < b ? a : b;
arr[arr.length] = val;

JavaScript 성능 모범 사례 에서 자세히 알아보기

사용자가 브라우저에서 html 엔티티를 볼 수있게하려면 'text'대신 'html'을 사용하여 다음과 같은 유니 코드 문자열을 삽입하십시오.

$('p').html("Your Unicode string")

내 두 센트)

일반적으로 jquery를 사용하면 실제로 DOM 요소에 대해 걱정할 필요가 없습니다. 다음과 같이 작성할 수 있습니다.-- $('div.mine').addClass('someClass').bind('click', function(){alert('lalala')})이 코드는 오류없이 실행됩니다.

어떤 경우에는 이것이 유용하지만 어떤 경우에는 전혀 유용하지 않지만 jquery는 비어있는 일치하는 경향이 있다는 사실입니다. 아직,replaceWith 문서에 속하지 않은 요소와 함께 사용하려고하면 오류가 발생합니다. 나는 오히려 반 직관적이라는 것을 알았습니다.

또 다른 함정은 prevAll () 메소드가 반환 한 노드의 순서입니다 $('<div><span class="A"/><span class="B"/><span class="C"/><span class="D"/></div>').find('span:last-child').prevAll(). 실제로 큰 문제는 아니지만이 사실을 명심해야합니다.

예를 들어 20 개의 열이있는 1500 개의 테이블 행과 같은 많은 데이터에서 Ajax를 계획하고 있다면 jQuery를 사용하여 해당 데이터를 HTML에 삽입 할 생각조차하지 않아도됩니다. 일반 JavaScript를 사용하십시오. 느린 컴퓨터에서는 jQuery가 너무 느립니다.

또한 jQuery는 들어오는 HTML에서 스크립트 태그를 구문 분석하고 브라우저 문제를 처리하는 것과 같이 느리게 만드는 작업을 수행합니다. 빠른 삽입 속도를 원하면 일반 JavaScript를 사용하십시오.

작은 프로젝트에서 jQuery를 사용하여 일반 자바 스크립트 몇 줄만으로 완료 할 수 있습니다.

이벤트 바인딩을 이해하지 못합니다. JavaScript와 jQuery는 다르게 작동합니다.

대중적인 수요에 의한 예 :

jQuery에서 :

$("#someLink").click(function(){//do something});

jQuery없이 :

<a id="someLink" href="page.html" onClick="SomeClickFunction(this)">Link</a>
<script type="text/javascript">
SomeClickFunction(item){
    //do something
}
</script>

기본적으로 JavaScript에 필요한 후크는 더 이상 필요하지 않습니다. 즉, 인라인 마크 업 (onClick 등)을 사용하면 개발자가 일반적으로 CSS 목적으로 활용하는 ID 및 클래스를 간단히 사용할 수 있기 때문입니다.