pułapki jQuery, aby uniknąć [zamknięty]

Zaczynam projekt od jQuery.

Jakie pułapki / błędy / nieporozumienia / nadużycia / nadużycia miałeś w swoim projekcie jQuery?

Nieświadomość wydajności i nadużywanie selektorów zamiast przypisywania ich do zmiennych lokalnych. Na przykład:-

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

Zamiast:-

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

Lub jeszcze lepiej z łańcuchem :

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

Uznałem to za oświecający moment, kiedy zdałem sobie sprawę, jak działają stosy połączeń.

Edycja: uwzględniono sugestie w komentarzach.

Dowiedz się, jak korzystać z kontekstu. Zwykle selektor jQuery przeszuka cały dokument:

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

Ale możesz przyspieszyć, wyszukują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 czystych selektorów klas, takich jak to:

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

Spowoduje to, że spojrzymy na każdy element, aby sprawdzić, czy ma on klasę „przycisku”.

Zamiast tego możesz pomóc, na przykład:

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

Nauczyłem się tego w zeszłym roku z bloga Rebecca Murphy

Aktualizacja - Ta odpowiedź została udzielona ponad 2 lata temu i jest niepoprawna dla bieżącej wersji jQuery. Jeden z komentarzy zawiera test, aby to udowodnić. Istnieje również zaktualizowana wersja testu, która zawiera wersję jQuery w momencie odpowiedzi.

Spróbuj podzielić anonimowe funkcje, aby móc ich ponownie użyć.

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

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

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

• Unikaj nadużywania gotowego dokumentu.
• Zachowaj dokument gotowy tylko do inicjalizacji kodu.
• Zawsze wyodrębnij funkcje poza dokumentem gotowe, aby można było ich ponownie użyć.

Widziałem setki wierszy kodu w instrukcji ready doc. Brzydki, nieczytelny i niemożliwy do utrzymania.

Korzystając z $.ajaxfunkcji żądań Ajax do serwera, należy unikać używania completezdarzenia do przetwarzania danych odpowiedzi. Uruchomi się, czy żądanie zakończyło się powodzeniem, czy nie.

Zamiast tego completeużyj success.

Zobacz Wydarzenia Ajax w dokumentacji.

„Łączenie” wydarzeń animacyjnych z wywołaniami zwrotnymi.

Załóżmy, że chcesz animować akapit znikający po kliknięciu. Chciałeś też później usunąć element z DOM. Możesz pomyś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 przed zakończeniem funkcji .fadeOut (), niszcząc efekt stopniowego zanikania i powodując natychmiastowe zniknięcie elementu. Zamiast tego, jeśli chcesz uruchomić polecenie dopiero po zakończeniu poprzedniego, użyj funkcji wywołania zwrotnego:

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

Drugi parametr .fadeOut () to anonimowa funkcja, która uruchomi się po zakończeniu animacji .fadeOut (). To powoduje stopniowe zanikanie, a następnie usunięcie elementu.

Jeśli powiążesz to samo wydarzenie wiele razy, zostanie ono wywołane wiele razy. Zazwyczaj zawsze chodzę unbind('click').bind('click')po prostu dla bezpieczeństwa

Nie nadużywaj wtyczek.

W większości przypadków potrzebujesz tylko biblioteki i być może interfejsu użytkownika. Jeśli uprościsz to, na dłuższą metę będziesz w stanie utrzymać kod. Nie wszystkie wtyczki są obsługiwane i obsługiwane, w rzeczywistości większość nie. Jeśli możesz naśladować funkcjonalność za pomocą podstawowych elementów, zdecydowanie ją polecam.

Wtyczki można łatwo wstawić do kodu, oszczędzając trochę czasu, ale kiedy potrzebujesz czegoś dodatkowego, modyfikowanie ich jest kiepskie, ponieważ tracisz możliwe aktualizacje. Oszczędność czasu na początku stracisz później na zmianie przestarzałych wtyczek.

Wybierz mądrze używane wtyczki. Oprócz biblioteki i interfejsu użytkownika stale używam $ .cookie , $ .form , $ .validate i thickbox . Co do reszty, głównie tworzę własne wtyczki.

Pitfall: Używanie pętli zamiast selektorów.

Jeśli okaże się, że sięgasz po metodę jQuery '.each' w celu iteracji elementów DOM, zastanów się, czy możesz użyć selektora, aby uzyskać elementy zamiast tego.

Więcej informacji na temat selektorów jQuery:
http://docs.jquery.com/Selectors

Pitfall: NIE przy użyciu narzędzia takiego jak Firebug

Firebug został praktycznie stworzony do tego rodzaju debugowania. Jeśli masz zamiar bawić się w DOM za pomocą Javascript, potrzebujesz dobrego narzędzia, takiego jak Firebug, aby zapewnić Ci widoczność.

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

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

Nieporozumienie dotyczące 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.
   })
});

A tutaj jedna z próbek, jak możesz to 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 przeszukiwania całego DOM kilka razy. Jest to coś, co naprawdę może opóźnić twój skrypt.

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 w .each ()

Lubię to

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

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

Podczas tworzenia formularzy Win ASP.NET często to robię

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

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

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

Wydarzenia

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

nie klonuje żadnego z wydarzeń - musisz je ponownie powiązać.

Zgodnie z komendą JP - clone () ponownie wiąże zdarzenia, jeśli przejdziesz 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 powinna zastępować CSS.

Upewnij się także, że witryna nadaje się dla osób, które mają wyłączoną obsługę JavaScript (dziś nie jest tak aktualna jak w przeszłości, ale zawsze miło jest mieć w pełni użyteczną stronę).

Robienie zbyt wielu manipulacji DOM. Chociaż metody .html (), .append (), .prepend () itd. Są świetne, ze względu na sposób, w jaki przeglądarki renderują i renderują strony, ich zbyt częste używanie spowoduje spowolnienie. Często lepiej jest utworzyć HTML jako ciąg znaków i dołączyć go do DOM jeden raz, zamiast wielokrotnie zmieniać DOM.

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 to nowo utworzony element, który nie został jeszcze wstrzyknięty do DOM. Dołączanie węzłów do tego div div otoki 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 „rzeczywistego” identyfikatora kontroli w projektach ASP.NET.

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

Ponadto, jeśli używasz jQuery w 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");

Przekazywanie zapakowanego zestawu jest znacznie bardziej elastyczne:

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

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

Nadmierne stosowanie łańcuchów.

Zobacz:

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

Wyjaśnienie

Używaj strun w stylu akumulatorowym

Za pomocą operatora + tworzony jest nowy ciąg w pamięci i przypisywana mu jest połączona wartość. Dopiero potem wynik jest przypisywany do zmiennej. Aby uniknąć zmiennej pośredniej dla wyniku konkatenacji, możesz bezpośrednio przypisać wynik za pomocą operatora + =. Powolny:

a += 'x' + 'y';

Szybciej:

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

Operacje pierwotne mogą być szybsze niż wywołania funkcji

Rozważ zastosowanie alternatywnej operacji pierwotnej nad wywołaniami funkcji w pętlach i funkcjach krytycznych pod względem wydajności. Powolny:

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

Szybciej:

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

Przeczytaj więcej na temat najlepszych praktyk dotyczących 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 znaków Unicode, na przykład:

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

moje dwa centy)

Zazwyczaj praca z jquery oznacza, że ​​nie musisz martwić się o elementy DOM przez cały czas. Możesz napisać coś takiego - $('div.mine').addClass('someClass').bind('click', function(){alert('lalala')})- a ten kod zostanie wykonany bez zgłaszania błędów.

W niektórych przypadkach jest to przydatne, w niektórych przypadkach - wcale, ale faktem jest, że jquery jest zazwyczaj przyjazna dla pustych dopasowań. Jeszcze,replaceWith błąd, jeśli spróbuje się go użyć z elementem, który nie należy do dokumentu. Uważam to za raczej sprzeczne z intuicją.

Inną pułapką jest, moim zdaniem, kolejność węzłów zwróconych 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 pamiętać o tym fakcie.

Jeśli planujesz Ajax z dużą ilością danych, na przykład 1500 wierszy tabeli z 20 kolumnami, to nawet nie myśl o użyciu jQuery do wstawienia tych danych do kodu HTML. Użyj zwykłego JavaScript. jQuery będzie działał zbyt wolno na wolniejszych komputerach.

Ponadto, połowę czasu jQuery zrobi rzeczy, które spowodują, że będzie wolniejszy, jak na przykład parsowanie tagów skryptowych w przychodzącym HTML i radzenie sobie z dziwactwami przeglądarki. Jeśli chcesz szybko wstawiać, trzymaj się zwykłego JavaScript.

Korzystanie z jQuery w małym projekcie, który można ukończyć za pomocą zaledwie kilku wierszy zwykłego JavaScript.

Niezrozumienie wiążącego zdarzenia. JavaScript i jQuery działają inaczej.

Według popularnego zapotrzebowania przykład:

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 haki wymagane dla JavaScript nie są już potrzebne. Korzystam z wbudowanych znaczników (onClick itp.), Ponieważ możesz po prostu użyć identyfikatorów i klas, które programista zwykle wykorzystuje do celów CSS.