pułapki jQuery, których należy unikać [zamknięte]

Zrozumieć, jak używać kontekstu. Zwykle selektor jQuery przeszukuje cały dokument:

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

Ale możesz przyspieszyć wszystko, szukając w kontekście:

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

Nie używaj nagich selektorów klas, w ten sposób:

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

To skończy się patrząc na każdy element, aby zobaczyć, czy ma klasę "button".

Zamiast tego możesz pomóc, jak:

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

Nauczyłam się tego w zeszłym roku z Rebecca Murphy ' s blog

Update - ta odpowiedź została udzielona ponad 2 lata temu i nie jest poprawna dla bieżącej wersji jQuery. Jeden z komentarzy zawiera test, który to udowodni. Istnieje również zaktualizowana wersja testu , która zawiera wersję jQuery w momencie udzielenia tej odpowiedzi.

Spróbuj rozdzielić funkcje anonimowe, aby móc je ponownie wykorzystać.

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

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

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

• unikaj nadużywania dokumentu ready.
• trzymaj dokument gotowy tylko do inicjalizacji kodu.
• zawsze wyodrębnia funkcje poza Doc ready, aby mogły być ponownie użyte.

Widziałem setki linii kodu wewnątrz instrukcji Doc ready. Brzydki, nieczytelny i niemożliwy do utrzymania.

Podczas korzystania z funkcji $.ajax dla żądań Ajax do serwera należy unikać używania zdarzenia complete do przetwarzania danych odpowiedzi. Zostanie uruchomiony niezależnie od tego, czy prośba się powiodła, czy nie.

Zamiast complete, Użyj success.

Zobacz zdarzenia Ajax W dokumentach.

"Łączenie" animacji-zdarzeń z wywołaniami zwrotnymi.

Załóżmy, że chcesz animować znikający akapit po kliknięciu go. Chciałeś również usunąć element z DOM później. Możesz myśleć, że możesz po prostu połączyć metody:

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

W tym przykładzie, .funkcja remove() zostanie wywołana wcześniej .fadeout() zakończył się, niszcząc efekt stopniowego zanikania i po prostu sprawiając, że element zniknie natychmiast. Zamiast tego, gdy chcesz wystrzelić polecenie dopiero po zakończeniu poprzedniego, użyj funkcji zwrotnej:

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

Drugi parametr .fadeOut () jest funkcją anonimową, która zostanie uruchomiona poanimacja fadeOut() została zakończona. Powoduje to stopniowe blaknięcie, a następnie usunięcie elementu.

Nie nadużywaj wtyczek.

W większości przypadków potrzebujesz tylko biblioteki i być może interfejsu użytkownika. Jeśli zachowasz prostotę, Twój kod będzie możliwy do utrzymania na dłuższą metę. Nie wszystkie wtyczki są obsługiwane i utrzymywane, w rzeczywistości większość nie jest. Jeśli możesz naśladować funkcjonalność za pomocą podstawowych elementów, zdecydowanie polecam.

Plug-iny są łatwe do wstawienia w kodzie, oszczędzają trochę czasu, ale kiedy będziesz potrzebował czegoś dodatkowego, nie jest dobrym pomysłem, aby je zmodyfikować, ponieważ tracisz możliwe aktualizacje. Czas, który zaoszczędzisz na początku, stracisz później po zmianie przestarzałych wtyczek.

Wybierz Wtyczki, których używasz mądrze. Oprócz biblioteki i interfejsu użytkownika stale używam $.cookie , $.formularz, $.validate and thickbox. Dla reszty głównie rozwijam własne wtyczki.

Jeśli bind() to samo zdarzenie zostanie wywołane wielokrotnie . Zwykle zawsze idę unbind('click').bind('click') tylko dla bezpieczeństwa

Pułapka: używanie pętli zamiast selektorów.

Jeśli znajdziesz się sięgając po jQuery '.każdy ' metoda do iteracji nad elementami DOM, zadać sobie pytanie, czy można użyć selektora, aby uzyskać elementy zamiast.

Więcej informacji o selektorach jQuery:
http://docs.jquery.com/Selectors

Pułapka: nie używać narzędzia takiego jak Firebug

Firebug został praktycznie stworzony do tego rodzaju debugowania. Jeśli masz zamiar błaznować w DOM z Javascript, potrzebujesz dobrego narzędzia, takiego jak Firebug, aby dać ci widoczność.

Więcej informacji o Firebug: http://getfirebug.com/

Inne świetne pomysły są w tym odcinku podcastu polimorficznego: (jQuery Secrets with Dave Ward) http://polymorphicpodcast.com/shows/jquery/

Niezrozumienie używania tego identyfikatora we właściwym kontekście. Na przykład:

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

I tutaj jeden z próbek, jak można go rozwiązać:

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

Unikaj kilkukrotnego przeszukiwania całego DOM. To jest coś, co naprawdę może opóźnić twój scenariusz.

Zły:

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

Dobry:

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

Zły:

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

Dobry:

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

Zawsze buforuj $(this) do znaczącej zmiennej szczególnie weach ()

Like this

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

Podobne do tego, co powiedział Repo Man, ale nie do końca.

Przy rozwijaniu ASP.NET winforms, często robię

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

Zapominając o znaku#. Prawidłowa forma to

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

Wydarzenia

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

Nie sklonuje żadnego z wydarzeń - musisz je wszystkie zrewindować.

zgodnie z Komunikatem JPt - clone() rebinduje zdarzenia, jeśli podasz true.

Unikaj wielokrotnego tworzenia tych samych obiektów jQuery

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

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

Mówię to również dla JavaScript, ale Jquery, JavaScript nigdy nie powinien zastępować CSS.

Upewnij się również, że strona jest użyteczna dla kogoś z wyłączonym JavaScript (nie tak istotne dzisiaj jak kiedyś, ale zawsze miło mieć w pełni użyteczną stronę).

Zbyt wiele manipulacji DOM. Podczas gdy ... html (),append (),prepend (), itd. metody są świetne, ze względu na sposób renderowania i ponownego renderowania stron przez przeglądarki, zbyt częste ich używanie spowoduje spowolnienie. Często lepiej jest utworzyć html jako ciąg znaków i dołączyć go do DOM raz, zamiast zmieniać DOM wiele razy.

Zamiast:

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

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

Spróbuj tego:

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

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

$parent.append(html);

Lub nawet to ($wrapper jest nowo utworzonym elementem, który nie został jeszcze wstrzyknięty do DOM. Dołączanie węzłów do tego wrappera div nie powoduje spowolnienia, a na końcu dodajemy $wrapper do $parent, używając tylko jednej manipulacji DOM):

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

Użycie ClientID do uzyskania "prawdziwego" id kontrolki w ASP.NET projekty.

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

Ponadto, jeśli używasz jQuery wewnątrz SharePoint musisz wywołać jQuery.noConflict ().

Przekazywanie identyfikatorów zamiast obiektów jQuery do funkcji:

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

myFunc("someId");

Podanie owiniętego zestawu jest o wiele bardziej elastyczne:

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

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

Nadmierne używanie łańcuchów.

Zobacz to:

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

Explanation

Użyj strun w stylu

Za pomocą operatora + w pamięci tworzony jest nowy łańcuch znaków i przypisywana jest do niego skonkatenowana wartość. Dopiero potem wynik zostanie przypisany do zmiennej. Aby uniknąć zmiennej pośredniej dla wyniku konkatenacji, można bezpośrednio przypisać wynik za pomocą operatora+=. Powoli:

a += 'x' + 'y';

Szybciej:

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

Prymitywne operacje mogą być szybsze niż wywołania funkcji

Rozważ użycie alternatywnej operacji prymitywnej nad wywołaniami funkcji w wydajności krytycznych pętli i funkcji. Powoli:

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

Szybciej:

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

Czytaj więcej w najlepsze praktyki wydajności JavaScript

Jeśli chcesz, aby użytkownicy widzieli encje html w swojej przeglądarce, użyj 'html' zamiast 'text', aby wstrzyknąć ciąg Unicode, na przykład:

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

Moje dwa grosze)

Zwykle praca z jquery oznacza, że nie musisz się martwić o elementy DOM cały czas. Możesz napisać coś takiego - $('div.mine').addClass('someClass').bind('click', function(){alert('lalala')}) - i ten kod uruchomi się bez rzucania żadnych błędów.

W niektórych przypadkach jest to przydatne , w niektórych - wcale nie, ale faktem jest, że jquery wydaje się być, cóż, przyjazne dla pustych dopasowań. Jednak replaceWith wyrzuci błąd, jeśli ktoś spróbuje użyć go z elementem, który nie należy do dokumentu. Uważam, że to raczej intuicyjne.

Kolejną pułapką jest, moim zdaniem, kolejność węzłów zwracanych metodą prevAll () - $('<div><span class="A"/><span class="B"/><span class="C"/><span class="D"/></div>').find('span:last-child').prevAll(). Właściwie to nic wielkiego, ale powinniśmy o tym pamiętać.

Jeśli planujesz Ajax w wielu danych, jak powiedzmy, 1500 wierszy tabeli z 20 kolumnami, to nawet nie myśl o użyciu jQuery do wstawiania tych danych do HTML. Użyj zwykłego JavaScript. jQuery będzie zbyt wolne na wolniejszych maszynach.

Ponadto, przez połowę czasu jQuery robi rzeczy, które powodują, że jest wolniejszy, jak próba analizy znaczników skryptu w przychodzącym HTML i radzenie sobie z dziwactwami przeglądarki. Jeśli chcesz szybko wstawiać, trzymaj się zwykłego JavaScript.

Używanie jQuery w małym projekcie, który można ukończyć za pomocą kilku linijek zwykłego JavaScript.

Brak zrozumienia wiązania zdarzeń. JavaScript i jQuery działają inaczej.

By popular demand, an example:

W jQuery:

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

Bez jQuery:

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

Zasadniczo Hooki wymagane dla JavaScript nie są już potrzebne. Używaj znaczników inline (onClick, itp.), ponieważ możesz po prostu użyć identyfikatorów i klas, które programista normalnie wykorzystałby do celów CSS.