Gibt es eine einfache Möglichkeit, JQuery-Code in Javascript umzuwandeln? [geschlossen]

142

Es gibt viele Beispiele dafür, wie man mit jQuery bestimmte Dinge in Javascript / dom erreicht. Die Verwendung von jQuery ist jedoch nicht immer eine Option, die das Verständnis der Beispiele für in jQuery geschriebene Javascript-Lösungen erschweren kann.

Gibt es eine einfache Möglichkeit, jQuery-Code in reguläres Javascript zu konvertieren? Ich denke, ohne auf den jQuery-Quellcode zugreifen oder ihn verstehen zu müssen.

Davidsleeps
quelle
8
Ich war im Grunde nach etwas, das die 1 JQuery-Zeile in 10 Vanille-Javascript-Zeilen konvertierte ... für Fälle, in denen JQuery nicht verfügbar ist ...
Davidsleeps
1
Selbst wenn Sie kein Skript-Tag verwenden können, um jQuery einzuschließen, können Sie der Quelldatei immer eine minimierte Version voranstellen. Ich kann keinen Grund erkennen, warum jQuery nur für eine Art Unternehmenspolitik verfügbar wäre.
CDMckay
23
Ich kann auch eine gute Verwendung dafür sehen. Angenommen, Sie verwenden mit jQuery nur etwa 10-100 Zeilen in Javascript. Es würde Bandbreite sparen, indem Funktionen neu kompiliert und durch die Kernmethoden ersetzt werden und somit nicht alles andere aus jQuery geladen wird.
5
Ich habe die gleiche Frage. Viele antworteten, dass jQuery einfacher ist, aber ein Entwickler, der bereits mit JavaScript vertraut ist, wird Probleme haben, das Symbol / die Abkürzung in jQuery zu verstehen. Mein Grund zu fragen ist, dass das jQuery-Skript, das ich erhalten habe, aus irgendeinem Grund in Blackberry nicht funktioniert. Es ist ein Ajax-Upload-Skript. Also denke ich, ich muss es in Javascript übersetzen :(
1
Ich versuche, einen JS-Kludge in einer vorhandenen App zu erstellen, und alle integrierten JS-Funktionen der App werden unterbrochen, wenn ich jQuery einbeziehe. Es ist eine schlecht geschriebene App (Atlassians JIRA), und ich bin sicher, dass sie schuld sind, aber ich brauche das trotzdem.
Chadoh

Antworten:

41

Der einfachste Weg ist, einfach zu lernen, wie man DOM-Traversing und -Manipulation mit der einfachen DOM-API durchführt (Sie würden dies wahrscheinlich als normales JavaScript bezeichnen).

Dies kann jedoch für einige Dinge schmerzhaft sein. (Deshalb wurden Bibliotheken überhaupt erst erfunden).

Das Googeln nach "Javascript DOM Traversing / Manipulation" sollte Ihnen viele hilfreiche (und einige weniger hilfreiche) Ressourcen bieten.

Die Artikel auf dieser Website sind ziemlich gut: http://www.htmlgoodies.com/primers/jsp/

Und wie Nosredna in den Kommentaren betont: Testen Sie unbedingt in allen Browsern, da jQuery die Inkonsistenzen jetzt nicht mehr für Sie behandelt.

Pim Jäger
quelle
4
Und Sie müssen sicher sein, gegen verschiedene Versionen jedes Browsers zu testen.
Nosredna
1
Wie beeinflusst die Auswahl der Desktop-Workstation die Verwendung von jQuery?
Dan Davies Brackett
5
Ich sympathisiere mit der Politik, für einige Organisationen eine Open-Source-Bibliothek zu verwenden. Am Ende ist die Zeit, die Sie damit verbringen, einfach (und wahrscheinlich fehlerhaft) in einfaches DOM-Traversal umzuschreiben, und JS ist Geldverschwendung für das Unternehmen. Sie können davon ausgehen, dass große Unternehmen, auch sehr konservative, jQuery verwenden: docs.jquery.com/Sites_Using_jQuery : Oracle, Google, Amazon, Dell, Bank of America, Intuit, Salesforce. Dies sind kaum kommunistische Hippie-Unternehmen. Dies sind sehr reale Unternehmen, deren Rechtsabteilungen wahrscheinlich ihre Hausaufgaben gemacht und jQuery akzeptiert haben ...
artlung
2
@davidsleeps - jQuery wird von Microsoft genehmigt ... Es ist in Visual Studio 2008 enthalten, was es technisch zu einem "Microsoft" -Tool macht. Würde sich Ihr Arbeitgeber dadurch besser fühlen?
Robert Harvey
4
Was ist für Ihr Unternehmen der Unterschied zwischen jquery und einer ganzen Reihe von Javascript, die Sie geschrieben haben, um dasselbe zu tun? Es ist nicht so, als würden Sie etwas installieren, in einer neuen Sprache codieren oder irgendwelche Abhängigkeiten hinzufügen. Dies ist ehrlich gesagt das Dümmste, was ich gehört habe und erlaubt Javascript, aber nicht jQuery. jQuery IST JAVASCRIPT!
Micmcg
59

Dadurch gelangen Sie zu 90% dorthin. )

window.$ = document.querySelectorAll.bind(document)

Für Ajax wird die Fetch-API jetzt in der aktuellen Version aller gängigen Browser unterstützt . Für $.ready(), DOMContentLoadedhat in der Nähe von Universal-Unterstützung . Möglicherweise benötigen Sie jQuery nicht. Enthält entsprechende native Methoden für andere gängige jQuery-Funktionen.

Zepto bietet ähnliche Funktionen, wiegt jedoch 10K mit Reißverschluss. Es gibt benutzerdefinierte Ajax-Builds für jQuery und Zepto sowie einige Micro-Frameworks , aber jQuery / Zepto bieten solide Unterstützung und 10 KB sind auf einem 56K-Modem nur ~ 1 Sekunde.

Indolering
quelle
22

Ich habe gerade dieses beeindruckende Tutorial über die Konvertierung von JQuery in Javascript von Jeffrey Way am 19. Januar 2012 gefunden *Copyright © 2014 Envato* :

http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/

Ob es uns gefällt oder nicht, immer mehr Entwickler werden zuerst über jQuery in die Welt von JavaScript eingeführt. In vielerlei Hinsicht sind diese Neuankömmlinge die Glücklichen. Sie haben Zugriff auf eine Vielzahl neuer JavaScript-APIs, die den Prozess der DOM-Durchquerung (für die viele Leute auf jQuery angewiesen sind) erheblich vereinfachen. Leider wissen sie nichts über diese APIs!

In diesem Artikel übernehmen wir eine Reihe gängiger jQuery-Aufgaben und konvertieren sie in modernes und älteres JavaScript.

Ich habe es in einem Kommentar an OP vorgeschlagen, und nach seinem Vorschlag veröffentliche ich, dass es eine Antwort gibt, auf die sich jeder beziehen kann.

Auch Jeffrey Way, der über seine Inspiration erwähnt wurde, scheint eine gute Grundlage für das Verständnis zu sein: http://sharedfil.es/js-48hIfQE4XK.html

Hat einen Teaser, dieses Dokument Vergleich von jQuery mit Javascript:

$(document).ready(function() {
  // code…
});

document.addEventListener("DOMContentLoaded", function() {
  // code…
});

$("a").click(function() {
  // code…
})

[].forEach.call(document.querySelectorAll("a"), function(el) {
  el.addEventListener("click", function() {
    // code…
  });
});

Sie sollten einen Blick darauf werfen.

Milche Patern
quelle
12

Ich weiß, dass dies ein alter Thread ist, aber es gibt eine ausgezeichnete Ressource, die das native Javascript zeigt, das jquery entspricht. Es enthält sogar ES6-Beispiele. Dies ist der umfassendste, den ich aus den anderen Artikeln zu diesem Thema herausgefunden habe.

jQuery an Vanilla JS

Dan
quelle
6

Gibt es eine einfache Möglichkeit, jQuery-Code in reguläres Javascript zu konvertieren?

Nein, besonders wenn:

Es ist schwierig, die Beispiele für in jQuery [geschriebene] Javascript-Lösungen zu verstehen.

JQuery und alle Frameworks erleichtern das Verständnis des Codes. Wenn das schwer zu verstehen ist, wird Vanille-Javascript Folter sein :)

Ryan Florence
quelle
15
andere haben aktuelle Antworten
ftrotter
2
Obwohl JQuery den Code (normalerweise) prägnanter macht, ist es fraglich, ob es ihn tatsächlich einfacher macht . jQuery kann es schwieriger machen, Code mental zu analysieren. Zum Beispiel <input onclick="myfunction(this)">mit myfunction(field){ field.value = "3"; }macht mehr Sinn für mich , als <input id='thing'>mit(function ($) { $(thing).click({ $(thing).val("3");});})()
liljoshu
6

Ich sehe einen Grund, der nicht mit dem ursprünglichen Beitrag zusammenhängt, jQuery-Code automatisch in Standard-JavaScript zu kompilieren:

16k - oder was auch immer die komprimierte, minimierte jQuery-Bibliothek ist - ist möglicherweise zu viel für Ihre Website, die für einen mobilen Browser vorgesehen ist. Das w3c empfiehlt, dass alle HTTP-Anforderungen für mobile Websites maximal 20.000 betragen sollten.

w3c Spezifikationen für Handy

Ich genieße es also, in meiner schönen, knappen, verketteten jQuery zu programmieren. Aber jetzt muss ich für mobile optimieren. Sollte ich wirklich zurückgehen und die schwierige und mühsame Arbeit erledigen, alle Hilfsfunktionen, die ich in der jQuery-Bibliothek verwendet habe, neu zu schreiben? Oder gibt es eine praktische App, die mir beim Neukompilieren hilft?

Das wäre sehr süß. Leider glaube ich nicht, dass so etwas existiert.


quelle
6

Wenn Sie Javascript lernen möchten, schauen Sie sich diese Douglas Crockford-Videos an. Sie sind sehr gut.

  1. Die Programmiersprache Javascript: Verlauf, Sprache, erweiterte Funktionen, Plattformen, Standards, Stil [ Folien herunterladen ]
  2. Theorie des DOM [ Folien herunterladen ]
  3. Erweitertes Javascript: Vererbung, Module, Debugging, Effizienz, JSON [ Folien herunterladen ]
Bobobobo
quelle
2
Ein wenig abseits des Themas, aber Crockfords Gespräche sind im Allgemeinen erstaunlich.
Indolering
1

Jeremy Keiths Buch " DOM Scripting " ist eine großartige Einführung in die Arbeit mit Javascript und dem DOM. Ich kann es nur empfehlen, ob Sie jQuery verwenden möchten oder nicht. Es ist gut zu wissen, was darunter los ist.

Dylanfm
quelle