jQuery: was ist es "verboten" zu tun in plain Javascript

Question

Eine jQuery Best Practices Frage.

Ich schreibe eine sehr jQuery intensive Webseite. Ich bin neu bei jQuery und bemerke seine Macht, aber da ich mit schwerem Javascript Erfahrung und Wissen komme, ist meine Frage: Was sollte in jQuery und was in einfachem Javascript getan werden.

Zum Beispiel gibt es Callbacks, die ein einfaches DOM-Objekt als Argument senden. Sollte ich das verwenden oder sollte ich es wickeln (wie $(this)).

Ist es wichtig, wenn ich this.x = y oder $ (this) .attr ("x", y).

Answer 1

Wenn Ihre Funktion ein DOM-Objekt empfängt und Sie keine jQuery-Funktionalität für dieses DOM-Objekt benötigen, müssen Sie es nicht in ein jQuery-Objekt konvertieren. Wenn Sie beispielsweise ein Checkbox-Objekt erhalten, können Sie die Eigenschaft checked ohne Verwendung von jQuery untersuchen.

Wenn Sie jedoch von dieser Checkbox zu einem anderen Element navigieren müssen, könnte es sinnvoll sein, es zu konvertieren:

jQuery (wie andere Bibliotheken tun) harmonieren nahtlos mit nativer JS. Wenn Sie zusätzliche Funktionen benötigen, erweitern Sie das betreffende Objekt.

Wie für Ihre letzte Frage: Sie könnten die data Funktion nützlich finden, um nicht standardmäßige DOM-Attribute zu vermeiden. Wenn Ihre Eigenschaft x in Ihrer Frage in der Tat ein gültiges DOM-Attribut ist, können Sie entweder this.x = y oder $(this).attr('x', y) schreiben, IMO spielt es keine Rolle. Wenn jedoch x kein DOM-Attribut ist,

$(this).data('key', value) 

auf diese Weise verwenden, können Sie speichern beliebige Schlüssel-Wert-Paare mit dem DOM-Elemente, wo value ein beliebiger Grundwert oder ein Objekt sein kann.

Answer 2

Ich denke, es ist ein Urteilsspruch. Nutze deinen gesunden Menschenverstand.

Zum Beispiel, wenn Sie 1000 divs auf der Seite haben, würden Sie wahrscheinlich nicht wollen, dass es in $ einzuwickeln (..)

$('div').click(function() { 
    this.id = Random.guid(); // instead of $(this).attr('id', Random.guid()); 
}); 

Wie für andere Aufgaben, wie lange, wie Sie verstehen, was jQuery tut, können Sie nur aus Gründen der Konsistenz dabei bleiben, aber beachten Sie die Performance-Probleme wie im obigen Beispiel.

Wie @colinmarc erwähnt, verwischt jQuery manchmal die Unterscheidung zwischen Elementattributen und Objekteigenschaften, die irreführend und fehlerhaft sein können.

Answer 3

Wenn Sie jQuery verwenden, gibt es immer eine Instanz von jQuery zurück, es sei denn, Sie verwenden eine Funktion wie val();

Der Grund, warum wir $ (this) .value anstelle von this.value verwenden, ist sicherzustellen, dass dies eine Instanz von jQuery ist.

Wenn Sie irgendwo in Ihrem Code eine Variable namens my_link setzen, die ein DOM-Objekt und nicht eine jQuery-Funktion ist .. weiter in Ihrer Anwendung würde my_link.val() zu einem Fehler führen, aber indem Sie $ (my_link) .val() wird Ihnen versichern, dass die Funktion val verfügbar sein wird. as $() gibt eine Instanz von jquery zurück.

Entschuldigung für das Missverständnis in meinem vorherigen Beitrag.

Answer 4

Da jQuery-Objekte reichere Funktionen als JS-DOM-Knoten haben, können Sie, wenn Sie sich am Zaun befinden, genauso gut in jQuery einbinden. JQuery ist so leicht, es gibt nicht viel Grund, keine jQuery-Objekte zu verwenden.

Ist es wichtig, wenn ich dies tue.x = y oder $ (this) .attr ("x", y).

wird die gebürtige leicht schneller sein, aber Sie werden wahrscheinlich mehr Zeit in anderen code-- DOM Traversal oder Gebäude verbringen. In diesem speziellen Beispiel ist Ersteres prägnanter, also würde ich das wählen. Da jQuery so leicht ist, tendiere ich dazu, fließend hin und her zu schalten.

Hier sind andere Richtlinien, die wir wie folgt vor:

• Für Rückrufe, wie ein Click-Handler, Sie werden die API-- in der Regel einen DOM-Knoten folgen müssen. Code, den Sie schreiben, der ähnlich ist, sollte wahrscheinlich auch DOM-Knoten nehmen. Wenn Sie jedoch eine Liste mit Elementen haben, verwenden Sie immer ein jQuery-Objekt.
• Für die meisten Code versuche ich zu sehen, ob Sie den Code als jQuery-Plugin strukturieren können - einige Transformation auf eine Reihe von DOM-Knoten anwenden. Wenn Sie dies tun können, erhalten Sie einige Hinweise aus der Plugin-Architektur.
• Ich benutze jQuery Bind/Trigger-Mechanismus, wie es ziemlich flexibel und Low-Kupplung ist.
• Um Code gerade zu halten, würde ich empfehlen, Namen Präfixierung jQuery Objekte mit einem Dollarzeichen. Zum Beispiel var $this = $(this);. Obwohl es wirklich keine große Sache ist, $ (exzessiv) zu nennen, sieht es schlampig aus, wenn man es zu viel nennt.

Hoffe das hilft.