피해야 할 jQuery 함정

피해야 할 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 */ });

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

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

$('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 를 참조하십시오 .

---

콜백이있는 "채 이닝"애니메이션 이벤트.

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

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

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

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

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

---

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

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

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

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

---

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

---

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

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

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

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

Firebug was practically made for this kind of debugging. If you're going to be mucking about in the DOM with Javascript, you need a good tool like Firebug to give you visibility.

More information on Firebug: http://getfirebug.com/

Other great ideas are in this episode of the Polymorphic Podcast: (jQuery Secrets with Dave Ward) http://polymorphicpodcast.com/shows/jquery/

---

Misunderstanding of using this identifier in the right context. For instance:

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

And here one of the samples how you can solve it:

$( "#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.
   })
});

---

Avoid searching through the entire DOM several times. This is something that really can delay your script.

Bad:

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

Good:

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

Bad:

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

Good:

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

---

Always cache $(this) to a meaningful variable especially in a .each()

Like this

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

---

Similar to what Repo Man said, but not quite.

When developing ASP.NET winforms, I often do

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

forgetting the # sign. The correct form is

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

---

Events

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

doesn't clone any of the events - you have to rebind them all.

As per JP's comment - clone() does rebind the events if you pass true.

---

Avoid multiple creation of the same jQuery objects

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

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

---

I say this for JavaScript as well, but jQuery, JavaScript should NEVER replace CSS.

Also, make sure the site is usable for someone with JavaScript turned off (not as relevant today as back in the day, but always nice to have a fully usable site).

---

Making too many DOM manipulations. While the .html(), .append(), .prepend(), etc. methods are great, due to the way browsers render and re-render pages, using them too often will cause slowdowns. It's often better to create the html as a string, and to include it into the DOM once, rather than changing the DOM multiple times.

Instead of:

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

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

Try this:

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

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

$parent.append(html);

Or even this ($wrapper is a newly created element that hasn't been injected to the DOM yet. Appending nodes to this wrapper div does not cause slowdowns, and at the end we append $wrapper to $parent, using only one DOM manipulation):

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);

---

Using ClientID to get the "real" id of the control in ASP.NET projects.

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

Also, if you are using jQuery inside SharePoint you must call jQuery.noConflict().

---

Passing IDs instead of jQuery objects to functions:

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

myFunc("someId");

Passing a wrapped set is far more flexible:

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

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

---

Excessive use of chaining.

See this:

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

Explanation

---

Use strings accumulator-style

Using + operator a new string is created in memory and the concatenated value is assigned to it. Only after this the result is assigned to a variable. To avoid the intermediate variable for concatenation result, you can directly assign the result using += operator. Slow:

a += 'x' + 'y';

Faster:

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

Primitive operations can be faster than function calls

Consider using alternative primitive operation over function calls in performance critical loops and functions. Slow:

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

Faster:

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

Read More at JavaScript Performance Best Practices

---

If you want users to see html entities in their browser, use 'html' instead of 'text' to inject a Unicode string, like:

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

---

my two cents)

Usually, working with jquery means you don't have to worry about DOM elements actual all the time. You can write something like this - $('div.mine').addClass('someClass').bind('click', function(){alert('lalala')}) - and this code will execute without throwing any errors.

In some cases this is useful, in some cases - not at all, but it is a fact that jquery tends to be, well, empty-matches-friendly. Yet, replaceWith will throw an error if one tries to use it with an element which doesn't belong to the document. I find it rather counter-intuitive.

Another pitfall is, in my opinion, the order of nodes returned by prevAll() method - $('<div><span class="A"/><span class="B"/><span class="C"/><span class="D"/></div>').find('span:last-child').prevAll(). Not a big deal, actually, but we should keep in mind this fact.

---

If you plan to Ajax in lots of data, like say, 1500 rows of a table with 20 columns, then don't even think of using jQuery to insert that data into your HTML. Use plain JavaScript. jQuery will be too slow on slower machines.

Also, half the time jQuery will do things that will cause it to be slower, like trying to parse script tags in the incoming HTML, and deal with browser quirks. If you want fast insertion speed, stick with plain JavaScript.

---

Using jQuery in a small project that can be completed with just a couple of lines of ordinary JavaScript.

---

Not understanding event binding. JavaScript and jQuery work differently.

By popular demand, an example:

In jQuery:

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

Without jQuery:

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

Basically the hooks required for JavaScript are no longer necessary. I.e. use inline markup (onClick, etc) because you can simply use the ID's and classes that a developer would normally leverage for CSS purposes.

참고URL : https://stackoverflow.com/questions/1229259/jquery-pitfalls-to-avoid