Sollte ich JQuery aufgeben?

Vorwort

Früher war ich ein großer Fan von jQuery und um ehrlich zu sein habe ich jQuery gelernt, bevor ich JavaScript gelernt habe. Ich verrate also gewissermaßen jQuery, indem ich das hier schreibe.

Ich weiß, dass es unzählige Artikel darüber gibt, warum Sie jQuery nicht verwenden sollten, aber ich wollte einfach meine persönlichen Erfahrungen teilen.

Was soll verwendet werden, wenn nicht jQuery?

Mit der Entwicklung des Internets werden ständig neue Technologien vorangetrieben, während die alten auf der Strecke bleiben. Genauso wie manche Programmiersprachen einst ruhmreich waren, jetzt aber verschwunden sind. Ich denke, jQuery ist keine Ausnahme. Es ist Zeit, sich davon zu verabschieden, obwohl es uns einst ein wunderbares Programmiererlebnis beschert hat.

Warum auf jQuery verzichten? Wegen Vue! Wenn Sie meine vorherigen Artikel gelesen haben, sollten Sie erraten können, dass ich ein Fan von Vue.js bin. Vue.js bietet viele Tools und ich wage zu behaupten, dass es viel praktischer ist als jQuery.

DOM und Ereignisse

Sehen wir uns ein Beispiel für ein Klickereignis an.

Bitte beachten Sie, dass ich die Initialisierung des Frameworks ausgelassen habe.

Ein Vue SFC (keine Panik, es bedeutet Single File Component):

<Vorlage>
    <button @click="handleClick">Klick mich, drück stärker</button>
</Vorlage>

<Skript>
    Standard exportieren {
        Methoden: {
            handleKlick() {
                alert('Mein Freund, du hast auf die Schaltfläche geklickt');
            }
        }
    }   
</Skript>

So schreiben Sie es mit jQuery:

<button id="myButton">Klicken Sie darauf</button>

<Skript>
    $('button#myButton').klick({
        alert('Dieses Mal mit jQuery');
    });
</Skript>

Sie denken vielleicht, dass Vue.js über mehr Code verfügt, und damit haben Sie Recht, aber Sie liegen auch falsch! Vue.js hat keinen weiteren Code. Tatsächlich ist der Teil außer handleClick() { ... } nur die Struktur des Frameworks, die mit anderen Verhaltensweisen geteilt wird. Ich finde, Vue.js sieht sauberer aus und der Code ist besser lesbar.

Sie fragen sich vielleicht immer noch, warum Sie immer noch Vue.js verwenden? Ist das nicht der Fall, wenn der Topf den Kessel schwarz nennt? Wenn Sie die Möglichkeit haben, nutzen Sie sie nicht! Sie können dies tatsächlich mit einfachem JavaScript tun:

<button id="myButton">Komm und klick mich</button>

<Skript>
    document.getElementById('myButton').addEventListener('click', function() {
       alert('Grüße von nativem js'); 
    });
</Skript>

Sie sehen also, dass jQuery den Code hinter unserem Rücken einfach in natives JavaScript übersetzt und vorgibt, etwas Besonderes zu sein.

Die Auswahl der DOM-Elemente kann problemlos mit nativem JavaScript erfolgen:

document.getElementById('meinButton'); // jQuery => $('#meinButton');
document.getElementsByClassName('a'); // jQuery => $('.a');
// jQuery => $('.parent .a');

AJAX-Anfragen

Die wohl häufigste Verwendung von jQuery ist AJAX.
Wir alle wissen, dass jQuery $.ajax() bereitstellt, und wir können auch die spezifischen $.post() und $.get() verwenden. Diese APIs können Ihnen beim Senden von AJAX-Anfragen, beim Abrufen von Ergebnissen und mehr helfen.

Es gibt zwei Methoden, die Sie in nativem JavaScript verwenden können, nämlich XMLHttpRequest und fetch.

XMLHttpRequest ist ebenfalls ein alter Klassiker und nicht ganz dasselbe wie fetch.

Fetch ist neuer und wird häufiger verwendet als XMLHttpRequest und basiert auf Versprechen.

Fetch sendet standardmäßig keine Cookies und lehnt nicht ab, wenn der HTTP-Statuscode einen Fehlercode wie 404 oder 500 zurückgibt. Daher wird .catch() grundsätzlich nicht ausgeführt, aber response.ok wird „false“.

Ich werde sie hier nicht im Detail vergleichen.

Sehen wir uns zwei weitere Codeteile an.

Hier ist die jQuery:

$.ajax({
  Methode: "POST",
  URL: "http://localhost/api",
  Daten: {Name: "Adnan", Land: "Iran"}
}).fertig(Antwort => console.log(Antwort))
  .fail(() => console.log('Fehler'));

Der Beispielcode stammt aus der offiziellen jQuery-Dokumentation

Hier ist der Abruf:

bringen(
    „http://localhost/api“,
    {
        Methode: 'POST'
        Text: { Name: "Adnan", Land: "Iran" }
    }
  ).dann(Antwort => console.log(Antwort));

Beide Codeteile machen dasselbe, aber fetch gehört zu keiner Bibliothek.

Beachten Sie, dass fetch auch in Verbindung mit async/await verwendet werden kann, wie unten gezeigt:

asynchrone Funktion getData() {
    let Antwort = warte auf Abruf ('http://localhost/api' {
        Methode: 'POST'
        Text: { Name: "Adnan", Land: "Iran" }
    });
    Antwort zurückgeben;
}

Benutze ich selbst fecth? Eigentlich nicht, da ich dem aus mehreren Gründen nicht so recht vertraue. Ich verwende also eine Bibliothek namens Axios, die ebenfalls auf Versprechen basiert und sehr zuverlässig ist.

Der obige Code wird mit Axios wie folgt geschrieben:

axios({
    Methode: 'POST',
    URL: „http://localhost/api“,
    Daten: {Name: "Adnan", Land: "Iran"}
}).dann(Antwort => Konsole.log(Antwort))
  .catch(err => console.log(err));

Axios kann auch in Verbindung mit async/await verwendet werden:

asynchrone Funktion getData() {
    let Antwort = warte auf axios.post('http://localhost/api' {
        Name: "Adnan",
        Land: "Iran"
    });
    Antwort zurückgeben;
}

Zusammenfassen

Ich verwende jQuery nicht mehr, obwohl ich es früher geliebt habe und das Erste, was ich nach der Initialisierung eines Projekts getan habe, die Installation von jQuery war.

Ich glaube, dass wir jQuery nicht mehr brauchen, da andere Bibliotheken und Frameworks Aufgaben tatsächlich bequemer und präziser erledigen können als jQuery.

Zwar gibt es eine Vielzahl von Plugins auf Basis von jQuery, grundsätzlich gibt es aber entsprechende Alternativen zu Vue.js- bzw. React.js-Komponenten.

Oben finden Sie Einzelheiten dazu, ob Sie JQuery aufgeben sollten oder nicht. Weitere Informationen zu JQuery finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!