Wann sollte man Vanilla JavaScript gegen jQuery verwenden?

Habe ich bemerkt, während die überwachung/versucht, eine Antwort auf gemeinsame jQuery Fragen, dass es bestimmte Praktiken, die mit javascript statt jQuery, die tatsächlich ermöglichen, Sie zu weniger schreiben und tun ... gut die gleiche Menge. Und vielleicht ergeben sich auch performance-Vorteile.

Einem konkreten Beispiel

$(this) vs this

Innen ein click-Ereignis verweisen auf die Objekte geklickt-id

jQuery

$(this).attr("id");

Javascript

this.id;

Gibt es andere gemeinsame Praktiken wie diese? Wo bestimmte Javascript-Operationen erreicht werden könnte, zu erleichtern, ohne dass jQuery in den mix. Oder ist dies ein seltener Fall? (jQuery "Verknüpfung" eigentlich die mehr code)

EDIT : Während ich Schätze die Antworten zum Thema jQuery vs. plain javascript-Leistung, ich bin eigentlich auf der Suche nach viel mehr quantitative Antworten. Während der Verwendung von jQuery Fälle, in denen man tatsächlich besser (Lesbarkeit/Kompaktheit) zu verwenden einfaches javascript statt mit $(). Zusätzlich zu dem Beispiel, das ich gegeben in meiner ursprünglichen Frage.

InformationsquelleAutor der Frage jondavidjohn | 2011-01-10

200
- this.id (wie Sie wissen)
- this.value (bei den meisten input-Typen. nur Themen, die ich kenne, sind DH wenn ein <select> nicht value Eigenschaften auf seinen <option> Elemente, oder radio-Eingänge in Safari.)
- this.className zu setzen oder eine ganze "Klasse" Eigenschaft
- this.selectedIndex gegen eine <select> um den ausgewählten index
- this.options gegen eine <select> um eine Liste der <option> Elemente
- this.text gegen eine <option> zu bekommen, dessen text-Inhalt
- this.rows gegen eine <table> eine Sammlung von <tr> Elemente
- this.cells gegen eine <tr> um seine Zellen (td & th)
- this.parentNode um eine direkte Eltern -
- this.checked um den aktivierten Zustand von einem checkbox Danke @Tim Nach Unten
- this.selected man den ausgewählten Zustand eines option Danke @Tim Nach Unten
- this.disabled zu bekommen, der deaktivierte Zustand eines input Danke @Tim Nach Unten
- this.readOnly um die readOnly-Zustand eines input Danke @Tim Nach Unten
- this.href gegen eine <a> element, um seine href
- this.hostname gegen eine <a> element, um die Domäne seiner href
- this.pathname gegen eine <a> element, um den Pfad Ihrer href
- this.search gegen eine <a> element, um die querystring seiner href
- this.src gegen ein element, wo es ist gültig für eine src
...Ich denke, Sie bekommen die Idee.

Gibt es Zeiten, wenn Leistung entscheidend ist. Wie, wenn Sie die Durchführung etwas, das in einer Schleife viele Male, möchten Sie vielleicht zu Graben jQuery.

~~Im Allgemeinen ersetzen Sie:~~

~~$(el).attr('someName');~~

~~mit:~~

Oben war schlecht formuliert. getAttribute ist kein Ersatz, aber es funktioniert um den Wert eines Attributs vom server gesendet, und der entsprechende setAttribute wird es eingestellt. In einigen Fällen erforderlich.

Den unten stehenden Sätze Art bedeckt. Lesen Sie diese Antwort für eine bessere Behandlung.
```
el.getAttribute('someName');
```
..., um Zugriff auf ein Attribut direkt. Beachten Sie, dass Attribute nicht die gleichen als Eigenschaften (obwohl Sie sich gegenseitig spiegeln manchmal). Natürlich gibt es setAttribute zu.

Sagen, Sie hatte eine situation, wo erhielt eine Seite, wo Sie brauchen, um zu packen Sie alle tags eines bestimmten Typs. Es ist kurz und einfach mit jQuery:
```
$('span').unwrap();  //unwrap all span elements
```
Aber wenn es viele sind, möchten Sie vielleicht, um ein wenig nativen DOM-API:
```
var spans = document.getElementsByTagName('span');

while( spans[0] ) {
    var parent = spans[0].parentNode;
    while( spans[0].firstChild ) {
        parent.insertBefore( spans[0].firstChild, spans[0]);
    }
    parent.removeChild( spans[0] );
}
```
Dieser code ist ziemlich kurz, führt es besser als die jQuery version, und kann leicht in eine wiederverwendbare Funktion, die in Ihre persönliche Bibliothek.

Kann es scheinen, wie ich eine unendliche Schleife, mit der äußeren while weil while(spans[0]) ist, sondern weil wir den Umgang mit einer "live list" es wird aktualisiert, wenn wir die parent.removeChild(span[0]);. Dies ist eine ziemlich praktische Funktion, die wir verpassen, wenn arbeiten mit einem Array (oder ein Array-artiges Objekt) statt.

InformationsquelleAutor der Antwort user113716
58

Die richtige Antwort ist, dass Sie immer nehmen Leistungseinbußen bei der Verwendung von jQuery anstelle von "plain old" native JavaScript. Denn jQuery ist eine JavaScript-Bibliothek. Ist es nicht eine fantastische neue version von JavaScript.

Dem Grund, dass jQuery ist eine leistungsfähige, ist, dass es macht einige Dinge, die sind zu mühsam in eine cross-browser-situation (AJAX ist eines der besten Beispiele) und glättet über die Inkonsistenzen zwischen der Vielzahl der verfügbaren Browser und bietet eine einheitliche API. Es ist auch leicht erleichtert Konzepte wie die Verkettung impliziter iteration, etc., um das arbeiten zu erleichtern, die auf Gruppen von Elementen zusammen.

Learning jQuery ist kein Ersatz für das lernen von JavaScript. Sie sollten haben eine solide Grundlage in die letztere, so dass Sie schätzen, was für die Kenntnis der einstigen macht einfacher für Sie.

-- Herausgegeben umfassen Kommentare --

Als die Kommentare sind schnell darauf hin (und ich Stimme 100%) die oben genannten Anweisungen beziehen sich auf benchmarking-code. Ein 'native' JavaScript-Lösung (vorausgesetzt, es ist gut geschrieben) besser abschneiden werden als ein jQuery-Lösung, die das leistet das gleiche, was in fast jedem Fall (ich würde gerne ein Beispiel sehen sonst). jQuery hat die Entwicklung zu beschleunigen Zeit, die ist ein bedeutender Vorteil, das meine ich nicht verharmlosen. Es erleichtert einfach zu Lesen, leicht zu Folgen code, das ist mehr als einige Entwickler sind in der Lage erzeugen auf Ihrem eigenen.

Meiner Meinung nach dann, die Antwort hängt davon ab, was Sie versuchen zu erreichen. Wenn, wie ich vermutete, basierend auf Ihren Bezug zu performance-Vorteilen profitieren, sind Sie nach der best möglichen Geschwindigkeit aus Ihrer Anwendung, dann mit Hilfe von jQuery führt einen overhead bei jedem Aufruf $(). Wenn du gehst, für eine bessere Lesbarkeit, Konsistenz -, cross-browser-Kompatibilität, etc, dann gibt es sicherlich Gründe, die zu Gunsten jQuery über 'native' JavaScript.

InformationsquelleAutor der Antwort g.d.d.c
35

Gibt es ein framework namens... na was wohl? Vanilla JS. Hoffe du bekommst den Witz... 😀 Es opfert die Lesbarkeit der Codes für die Leistung... der Vergleich zu jQuery Balg können Sie sehen, dass abrufen ein DOM element von ID ist fast 35X schneller. 🙂

Also, wenn Sie wollen Leistung, die Sie würde besser versuchen, Vanilla JS und ziehen Sie Ihre eigenen Schlussfolgerungen. Vielleicht werden Sie nicht erleben, JavaScript hängen die browser-GUI/sperren bis der UI thread während des intensiven code, wie in einem for Schleife.

Vanilla JS ist eine schnelle, leichte, cross-Plattform-framework für
Gebäude unglaubliche, mächtige JavaScript-Anwendungen.

Auf Ihrer homepage gibt es einige perf-Vergleiche:

InformationsquelleAutor der Antwort
17

Gibt es bereits eine akzeptierte Antwort, aber ich glaube, dass keine Antwort direkt hier eingegeben werden können, umfassend in seiner Liste von native javascript-Methoden/- Attribute, die praktisch garantiert, cross-browser-Unterstützung. Dafür kann ich Sie umleiten quirksmode:

http://www.quirksmode.org/compatibility.html

Es ist vielleicht die umfassendste Liste von dem, was funktioniert und was nicht funktioniert, was browser überall. Achten Sie besonders auf die DOM-Abschnitt. Es ist viel zu Lesen, aber der Punkt ist nicht, um alles zu Lesen, aber verwenden Sie es als Referenz.

Als ich anfing, ernsthaft zu schreiben, web-apps, die ich ausgedruckt die DOM-Tabellen und hängte Sie an die Wand, so dass ich auf einen Blick wissen, was sicher ist zu verwenden und was erfordert hacks. Diese Tage, die ich nur google so etwas wie quirksmode parentNode compatibility wenn ich Zweifel haben.

Wie alles andere, das Urteil ist vor allem eine Frage der Erfahrung. Ich würde nicht wirklich empfehlen, Sie zu Lesen Sie die gesamte Website und merken Sie sich alle Fragen, um herauszufinden, wenn Sie jQuery verwenden und Wann Sie zu verwenden nur JS. Beachtet einfach die Liste. Es ist leicht genug, um zu suchen. Mit der Zeit entwickeln Sie ein Gespür, wenn plain-JS vorzuziehen ist.

PS: PPK (der Autor der Webseite) hat auch ein sehr schönes Buch, dass ich empfehle die Lektüre

InformationsquelleAutor der Antwort slebetman
14

Wann:
1. Sie wissen, dass es eine ungebrochene cross-browser-Unterstützung für das, was Sie tun, und
2. es ist nicht wesentlich mehr code geben, und
3. es ist nicht wesentlich weniger lesbar, und
4. Sie einigermaßen zuversichtlich, dass jQuery nicht wählen werden verschiedene Implementierungen, basierend auf den browser, um eine bessere Leistung erzielen, dann:
JavaScript verwenden. Ansonsten jQuery verwenden (wenn Sie können).

Bearbeiten: Diese Antwort gilt sowohl bei der Auswahl, jQuery-Allgemeine versus verlassen Sie es aus, sowie die Wahl, ob die Verwendung vanilla JS innen jQuery. Die Wahl zwischen attr('id') und .id lehnt sich zugunsten JS, während die Wahl zwischen removeClass('foo') versus .className = .className.replace( new Regexp("(?:^|\\s+)"+foo+"(?:\\s+|$)",'g'), '' ) lehnt sich zugunsten von jQuery.

InformationsquelleAutor der Antwort Phrogz
13

Andere' - Antworten konzentrieren sich auf die umfassende Frage der "jQuery vs. plain JS." Ausgehend von Ihrer OP, ich glaube, Sie waren einfach gespannt, Wann es besser vanilla JS, wenn Sie bereits ausgewählt haben, um jQuery verwenden. Dein Beispiel ist ein perfektes Beispiel, wenn Sie verwenden sollten, vanilla JS:

$(this).attr('id');

Ist sowohl langsamer und (meiner Meinung nach) weniger lesbar als:

this.id.

Es ist langsamer, da Sie die spin-up ein neues JS-Objekt nur zum abrufen der attribute der jQuery-Weg. Nun, wenn du gehst, werden mithilfe von $(this) um andere Operationen auszuführen, dann mit allen Mitteln, Shop, jQuery-Objekt in eine variable und zu betreiben, dass. Aber ich habe in viele Situationen wo ich brauche nur ein Attribut aus einem element (wie id oder src).

Gibt es andere gemeinsame Praktiken
wie das? Wo bestimmte Javascript
Operationen durchgeführt werden konnten
leichter, ohne dass jQuery in
den mix. Oder ist dies ein seltener Fall? (von einem
jQuery - "Verknüpfung" eigentlich erfordern
mehr code)

Ich denke, der häufigste Fall ist die, die Sie beschreiben in Ihrem Beitrag; die Leute einwickeln $(this) in ein jQuery-Objekt unnötig. Ich sehe diese Häufig mit id und value (statt $(this).val()).

Edit: Hier's einen Artikel, der erklärt warum Verwendung von jQuery in der attr() Fall langsamer ist. Geständnis: gestohlen von der Marke wiki, aber ich denke, es ist erwähnenswert, der für die Frage.

Bearbeiten wieder: Angesichts der Lesbarkeit/performance-Implikationen von nur Zugriff auf die Attribute direkt, würde ich sagen, eine gute Faustregel ist wohl, zu versuchen, zu verwenden this.<attributename> wenn möglich. Es gibt wohl einige Fälle, in denen dies nicht funktioniert, da der browser Inkonsistenzen, aber es ist wahrscheinlich besser, zu versuchen, diese zuerst und fallen zurück auf jQuery und wenn es nicht funktioniert.

InformationsquelleAutor der Antwort Andrew Whitaker
9

Wenn Sie sind meist besorgt über die Leistung, Ihre Haupt-Beispiel trifft den Nagel auf den Kopf. Aufrufen jQuery unnötig oder Redundant ist, IMHO, der zweite Hauptursache für die langsame performance (die ersten arm-DOM-traversal).

Es ist nicht wirklich ein Beispiel für das, was Sie suchen, aber ich sehe das so oft, dass es trägt zu erwähnen: Eine der besten Möglichkeiten zur Beschleunigung der Leistung Ihres jQuery scripts, cache jQuery-Objekte und/oder die Verwendung Verkettung:
```
//poor
$(this).animate({'opacity':'0'}, function() { $(this).remove(); });

//excellent
var element = $(this);
element.animate({'opacity':'0'}, function() { element.remove(); });

//poor
$('.something').load('url');
$('.something').show();

//excellent
var something = $('#container').children('p.something');
something.load('url').show();
```
InformationsquelleAutor der Antwort Stephen
7

Habe ich gefunden, es gibt sicherlich überschneidungen zwischen JS und JQ. Der code, den Sie gezeigt haben, ist ein gutes Beispiel. Ehrlich gesagt, ist der beste Grund für die Verwendung von JQ über JS wird einfach der browser-Kompatibilität. Ich lehnen sich immer wieder gegen JQ, auch wenn ich etwas erreichen in JS.

InformationsquelleAutor der Antwort Dutchie432
5

Dies ist meine persönliche Ansicht, aber wie jQuery ist JavaScript jedenfalls denke ich, dass es theoretisch nicht besser sind als vanilla-JS je.

Aber praktisch kann es besser als von hand geschriebene JS, wie man ' s hand-written code möglicherweise nicht so effizient, wie jQuery.

Bottom-line - für kleinere Sachen, die ich eher auf Vanille JS, JS-intensive Projekte, die ich gerne nutze jQuery und das Rad nicht neu erfinden - es ist auch produktiver.

InformationsquelleAutor der Antwort CodeVirtuoso
3

Ist die erste Antwort die live-Liste Eigenschaften von this als ein DOM-element ist ziemlich komplett.

Finden Sie möglicherweise auch interessant zu wissen, einige andere.

In diesem Dokument :
- this.forms um eine HTMLCollection für das aktuelle Dokument Formulare,
- this.anchors um eine HTMLCollection alle HTMLAnchorElements mit name gesetzt,
- this.links um eine HTMLCollection alle HTMLAnchorElements mit href gesetzt,
- this.images um eine HTMLCollection alle HTMLImageElements
- und das gleiche mit dem veralteten applets als this.applets
Beim arbeiten mit document.formsdocument.forms[formNameOrId] bekommt die so benannt oder identifiziert bilden.

Wenn diese form :
- this[inputNameOrId] zu bekommen, die so benannt oder identifiziert Feld
Wenn Sie diese Formular-Feld:
- this.type um das Feld Typ
Beim lernen von jQuery-Selektoren, die wir oft überspringen Sie lernen, bereits vorhandene HTML-Elemente Eigenschaften, die sind so schnell zugänglich.

InformationsquelleAutor der Antwort lib3d
1

$(this) ist anders zu this :

Mithilfe $(this) Sie sichergestellt, dass die jQuery-Prototyp wird an das Objekt.

InformationsquelleAutor der Antwort John Green
1

Wie üblich, ich komme zu spät zu dieser party.

War es nicht, die zusätzliche Funktionalität, das machte mich entscheiden, um jQuery verwenden, so attraktiv wie das war. Nach dem alles nichts hält dich davon ab, Sie Ihre eigenen Funktionen schreiben.

War es die Tatsache, dass es waren so viele tricks zu lernen, wenn geändert wird, die DOM-um Speicherverluste zu vermeiden (ich bin über Sie reden IE). Zu einer zentralen Ressource, die verwaltet werden alle diese Art von Fragen für mich, geschrieben von Menschen, die waren viel besser JS-Coder, als ich jemals sein werde, das war sein ständig überprüft, überarbeitet und getestet wurde Gott senden.

Ich denke, diese Art fällt unter die cross-browser-support/Abstraktion argument.

Und natürlich jQuery schließt nicht aus, dass die Verwendung von geraden JS, wenn Sie es benötigt. Ich hatte immer das Gefühl die beiden schien zu funktionieren nahtlos zusammen.

Natürlich, wenn Ihr browser wird nicht unterstützt von jQuery oder Sie unterstützen eine low-end-Umgebung (älteren Handy?) dann eine große .js-Datei könnte ein problem sein. Denken Sie daran, wenn jQuery verwendet werden, um winzige?

Aber normalerweise den Unterschied in der Leistung ist nicht eine Frage der Sorge. Es muss nur schnell genug sein. Mit Gigahertz-CPU-Zyklen verschwendet, jede Sekunde, ich bin mehr besorgt, mit der Leistung von meinem Coder, der nur die Entwicklung, Ressourcen, die nicht doppelte Leistung alle 18 Monate.

Wie gesagt, ich bin derzeit auf der Suche in Fragen der Zugänglichkeit und offenbar .innerHTML ist ein bisschen ein Nein. jQuery hängt natürlich .innerHTML, so jetzt bin ich auf der Suche für ein framework, das hängt von der etwas mühsame Methoden, die zulässig sind. Und ich kann mir vorstellen, ein solcher Rahmen wird langsamer ausgeführt als jQuery, aber solange es funktioniert gut genug, ich werde glücklich sein.

InformationsquelleAutor der Antwort Swanny
1

Hier ist eine nicht-technische Antwort - viele Arbeitsplätze können nicht zulassen, dass bestimmte Bibliotheken, wie jQuery.

In der Tat, In der Tat, sind bei Google nicht zulässig jQuery in jeder der code (noch nicht Reagieren, weil es im Besitz von Facebook), die Sie möglicherweise nicht bekannt, bis der interviewer sagt "Sorry, aber man kann jQuery verwenden, ist es nicht auf der genehmigten Liste bei XYZ Corporation". Vanille JavaScript funktioniert absolut überall, zu jeder Zeit, und wird Ihnen nie dieses problem. Wenn du dich auf eine Bibliothek ja, erhalten Sie die Geschwindigkeit und Leichtigkeit, aber Sie verlieren die Universalität.

Auch, zu sprechen, zu interviewen, der andere Nachteil ist, dass, wenn Sie sagen, Sie brauchen, um eine Bibliothek zu lösen ein JavaScript-problem während einer code-quiz, es kommt ganz wie Sie verstehe eigentlich nicht das problem, die sieht ein bisschen schlecht. In der Erwägung, dass, wenn Sie es lösen können in raw-vanilla-JavaScript-es zeigt, dass Sie tatsächlich verstehen und lösen kann jedes Teil unabhängig von dem problem, Sie werfen vor dir.

InformationsquelleAutor der Antwort Jack Connor

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.