jQuery Fallstricke zu vermeiden [geschlossen]

Ich starte ein Projekt mit jQuery.

Welche Fallstricke / Fehler / Missverständnisse / Missbräuche / Missbräuche hatten Sie in Ihrem jQuery-Projekt?

Sich des Leistungseinbruchs nicht bewusst sein und Selektoren überbeanspruchen, anstatt sie lokalen Variablen zuzuweisen. Beispielsweise:-

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

Eher, als:-

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

Oder noch besser mit Verkettung : -

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

Ich fand dies der aufschlussreiche Moment, als mir klar wurde, wie die Anrufstapel funktionieren.

Bearbeiten: Vorschläge in Kommentare aufgenommen.

Verstehen Sie, wie Sie den Kontext verwenden. Normalerweise durchsucht ein jQuery-Selektor das gesamte Dokument:

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

Sie können die Dinge jedoch beschleunigen, indem Sie in einem Kontext suchen:

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

Verwenden Sie keine bloßen Klassenselektoren wie diese:

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

Dies wird am Ende jedes einzelne Element untersuchen, um festzustellen, ob es eine Klasse von "Schaltflächen" hat.

Stattdessen können Sie helfen, wie:

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

Das habe ich letztes Jahr aus Rebecca Murphys Blog gelernt

Update - Diese Antwort wurde vor über 2 Jahren gegeben und ist für die aktuelle Version von jQuery nicht korrekt . Einer der Kommentare enthält einen Test, um dies zu beweisen. Es gibt auch eine aktualisierte Version des Tests , die die Version von jQuery zum Zeitpunkt dieser Antwort enthält.

Versuchen Sie, anonyme Funktionen aufzuteilen, damit Sie sie wiederverwenden können.

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

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

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

• Vermeiden Sie den Missbrauch von Dokumenten.
• Halten Sie das Dokument nur für die Initialisierung von Code bereit.
• Extrahieren Sie Funktionen immer außerhalb des Dokuments, damit sie wiederverwendet werden können.

Ich habe Hunderte von Codezeilen in der doc ready-Anweisung gesehen. Hässlich, unlesbar und unmöglich zu pflegen.

Wenn Sie die $.ajaxFunktion für Ajax- Anforderungen an den Server verwenden, sollten Sie vermeiden, das completeEreignis zum Verarbeiten von Antwortdaten zu verwenden. Es wird ausgelöst, ob die Anforderung erfolgreich war oder nicht.

Anstatt zu completeverwenden success.

Siehe Ajax-Ereignisse in den Dokumenten.

Animationsereignisse mit Callbacks "verketten".

Angenommen, Sie möchten einen Absatz animieren, der beim Klicken verschwindet. Sie wollten das Element anschließend auch aus dem DOM entfernen. Sie denken vielleicht, Sie können die Methoden einfach verketten:

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

In diesem Beispiel wird .remove () aufgerufen, bevor .fadeOut () abgeschlossen ist, wodurch Ihr allmählicher Fading-Effekt zerstört wird und das Element einfach sofort verschwindet. Wenn Sie einen Befehl erst nach Abschluss des vorherigen Befehls auslösen möchten, verwenden Sie stattdessen die folgenden Rückrufe:

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

Der zweite Parameter von .fadeOut () ist eine anonyme Funktion, die ausgeführt wird, sobald die .fadeOut () -Animation abgeschlossen ist. Dies führt zu einem allmählichen Ausbleichen und einem anschließenden Entfernen des Elements.

Wenn Sie dasselbe Ereignis mehrmals binden (), wird es mehrmals ausgelöst. Normalerweise gehe ich immer unbind('click').bind('click')nur, um in Sicherheit zu sein

Missbrauche Plug-Ins nicht.

Meistens benötigen Sie nur die Bibliothek und möglicherweise die Benutzeroberfläche. Wenn Sie es einfach halten, ist Ihr Code auf lange Sicht wartbar. Nicht alle Plug-Ins werden unterstützt und gewartet, die meisten jedoch nicht. Wenn Sie die Funktionalität mithilfe von Kernelementen nachahmen können, empfehle ich sie dringend.

Plug-Ins lassen sich leicht in Ihren Code einfügen, sparen Zeit, aber wenn Sie etwas extra benötigen, ist es eine schlechte Idee, sie zu ändern, da Sie die möglichen Updates verlieren. Die Zeit, die Sie zu Beginn sparen, verlieren Sie später beim Ändern veralteter Plug-Ins.

Wählen Sie die Plug-Ins mit Bedacht aus. Abgesehen von Bibliothek und Benutzeroberfläche verwende ich ständig $ .cookie , $ .form , $ .validate und Thickbox . Im Übrigen entwickle ich meistens meine eigenen Plugins.

Fallstricke: Verwenden von Schleifen anstelle von Selektoren.

Wenn Sie nach der jQuery-Methode '.each' greifen, um über DOM-Elemente zu iterieren, fragen Sie sich, ob Sie stattdessen einen Selektor verwenden können, um die Elemente abzurufen.

Weitere Informationen zu jQuery-Selektoren:
http://docs.jquery.com/Selectors

Fallstricke: NICHT mit einem Tool wie Firebug

Firebug wurde praktisch für diese Art des Debuggens entwickelt. Wenn Sie mit Javascript im DOM herumspielen wollen, benötigen Sie ein gutes Tool wie Firebug, um sichtbar zu werden.

Weitere Informationen zu Firebug: http://getfirebug.com/

Weitere großartige Ideen finden Sie in dieser Episode des polymorphen Podcasts: (jQuery Secrets mit Dave Ward) http://polymorphicpodcast.com/shows/jquery/

Missverständnis der Verwendung dieser Kennung im richtigen Kontext. Zum Beispiel:

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

Und hier eines der Beispiele, wie Sie es lösen können:

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

Vermeiden Sie es, das gesamte DOM mehrmals zu durchsuchen. Dies kann Ihr Skript wirklich verzögern.

Schlecht:

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

Gut:

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

Schlecht:

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

Gut:

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

Speichern Sie $ (this) immer in einer aussagekräftigen Variablen, insbesondere in einer .each ()

So was

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

Ähnlich wie Repo Man, aber nicht ganz.

Bei der Entwicklung von ASP.NET-Winforms mache ich das oft

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

das # Zeichen vergessen. Die richtige Form ist

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

Veranstaltungen

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

Klont keines der Ereignisse - Sie müssen alle neu binden.

Gemäß JP beginnen - clone () die Ereignisse neu, wenn Sie true übergeben.

Vermeiden Sie die mehrfache Erstellung derselben jQuery-Objekte

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

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

Ich sage dies auch für JavaScript, aber jQuery, JavaScript sollte NIEMALS CSS ersetzen.

Stellen Sie außerdem sicher, dass die Site für jemanden mit deaktiviertem JavaScript verwendbar ist (heute nicht mehr so ​​relevant wie früher, aber immer schön, eine vollständig nutzbare Site zu haben).

Zu viele DOM-Manipulationen vornehmen. Obwohl die Methoden .html (), .append (), .prepend () usw. aufgrund der Art und Weise, wie Browser Seiten rendern und neu rendern, großartig sind, führt eine zu häufige Verwendung zu Verlangsamungen. Oft ist es besser, das HTML als Zeichenfolge zu erstellen und es einmal in das DOM aufzunehmen, als das DOM mehrmals zu ändern.

Anstatt:

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

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

Versuche dies:

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

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

$parent.append(html);

Oder auch dies ($ wrapper ist ein neu erstelltes Element, das noch nicht in das DOM eingefügt wurde. Das Anhängen von Knoten an dieses Wrapper-Div führt nicht zu Verlangsamungen, und am Ende hängen wir $ wrapper mit nur einer DOM-Manipulation an $ parent an ):

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

Verwenden der ClientID, um die "echte" ID des Steuerelements in ASP.NET-Projekten abzurufen.

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

Wenn Sie jQuery in SharePoint verwenden, müssen Sie außerdem jQuery.noConflict () aufrufen.

Übergeben von IDs anstelle von jQuery-Objekten an Funktionen:

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

myFunc("someId");

Das Übergeben eines verpackten Sets ist weitaus flexibler:

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

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

Übermäßiger Gebrauch der Verkettung.

Sieh dir das an:

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

Erläuterung

Verwenden Sie Strings im Akkumulatorstil

Mit dem Operator + wird eine neue Zeichenfolge im Speicher erstellt und der verkettete Wert zugewiesen. Erst danach wird das Ergebnis einer Variablen zugeordnet. Um die Zwischenvariable für das Verkettungsergebnis zu vermeiden, können Sie das Ergebnis mit dem Operator + = direkt zuweisen. Langsam:

a += 'x' + 'y';

Schneller:

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

Primitive Operationen können schneller sein als Funktionsaufrufe

Erwägen Sie die Verwendung einer alternativen primitiven Operation über Funktionsaufrufe in leistungskritischen Schleifen und Funktionen. Langsam:

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

Schneller:

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

Weitere Informationen finden Sie unter Best Practices für die JavaScript-Leistung

Wenn Benutzer HTML-Entitäten in ihrem Browser sehen sollen, verwenden Sie 'html' anstelle von 'text', um eine Unicode-Zeichenfolge einzufügen, z.

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

meine zwei Cent)

Wenn Sie mit jquery arbeiten, müssen Sie sich normalerweise nicht ständig um die tatsächlichen DOM-Elemente kümmern. Sie können so etwas schreiben -$('div.mine').addClass('someClass').bind('click', function(){alert('lalala')}) - und dieser Code wird ohne Fehler ausgeführt.

In einigen Fällen ist dies nützlich, in einigen Fällen - überhaupt nicht, aber es ist eine Tatsache, dass jquery dazu neigt, leer-Streichhölzer-freundlich zu sein. Noch,replaceWith wird jedoch ein Fehler wenn versucht wird, ihn mit einem Element zu verwenden, das nicht zum Dokument gehört. Ich finde es eher kontraintuitiv.

Eine weitere Gefahr ist meiner Meinung nach die Reihenfolge der Knoten, die von der prevAll () -Methode zurückgegeben werden $('<div><span class="A"/><span class="B"/><span class="C"/><span class="D"/></div>').find('span:last-child').prevAll(). Eigentlich keine große Sache, aber wir sollten diese Tatsache berücksichtigen.

Wenn Sie Ajax in vielen Daten planen, z. B. 1500 Zeilen einer Tabelle mit 20 Spalten, sollten Sie nicht einmal daran denken, diese Daten mit jQuery in Ihren HTML-Code einzufügen. Verwenden Sie einfaches JavaScript. jQuery ist auf langsameren Computern zu langsam.

Außerdem erledigt jQuery die Hälfte der Zeit Dinge, die dazu führen, dass es langsamer wird, z. B. den Versuch, Skript-Tags im eingehenden HTML-Code zu analysieren und sich mit Browser-Macken zu befassen. Wenn Sie eine schnelle Einfügegeschwindigkeit wünschen, bleiben Sie bei einfachem JavaScript.

Verwenden von jQuery in einem kleinen Projekt, das mit nur wenigen Zeilen gewöhnlichem JavaScript abgeschlossen werden kann.

Ereignisbindung nicht verstehen. JavaScript und jQuery funktionieren unterschiedlich.

Auf vielfachen Wunsch ein Beispiel:

In jQuery:

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

Ohne jQuery:

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

Grundsätzlich sind die für JavaScript erforderlichen Hooks nicht mehr erforderlich. Verwenden Sie also Inline-Markups (onClick usw.), da Sie einfach die IDs und Klassen verwenden können, die ein Entwickler normalerweise für CSS-Zwecke nutzen würde.