In Rails5 ist von Anfang an ein jQuery-Juwel installiert, das standardmäßig verfügbar ist, sofern Sie es nicht entfernen. Als ich anfing, Rails zu lernen, gewöhnte ich mich daran, jQuery anstelle von einfachem JavaScript (im Folgenden "Vanille") zu verwenden. Dieses Mal wagte ich es, einen Weg zu finden, jQuery nicht zu verwenden, um Vanille wieder zu lernen.
Ruby 2.5.7 Rails 5.2.4
Als ich wieder anfing, Code in Vanille zu schreiben, war ich ziemlich süchtig danach. Wenn ich es in jQuery schreiben könnte, wäre es bis dahin in Ordnung, aber es war unangenehm, es so zu lassen, wie es war, also beschloss ich, es ein wenig anzugehen.
Ich habe versucht, das Konsolenprotokoll mit einem Klickereignis als Ausgangspunkt zu überprüfen.
In jQuery $ (function () {process}); wie unten gezeigt
Es ist notwendig zu schreiben. (Der Grund wird später beschrieben.)
application.js
// jQuery
$(function() {
$("Name des Selektors").on('klicken', function() {
console.log('Es wurde angeklickt.');
});
});
Vanillas unmittelbare Funktion ohne jQuery ist wie folgt geschrieben.
application.js
//Vanille
(function() {
document.getElementById("Name des Selektors").addEventListener('click', function() {
console.log('Es wurde angeklickt.');
});
}());
Die beiden oben genannten Codes haben dieselbe Verarbeitung, aber aus irgendeinem Grund weist die Vanille einen Fehler auf und wird nicht im Konsolenprotokoll ausgegeben. .. ..
Früher habe ich hier zu jQuery gewechselt, aber ich wollte es unbedingt lösen, also habe ich mir diese Suche ausgedacht.
Es wurde in $ (function () {}); versteckt. (Nicht versteckt.) $ (function () {});` wird abgekürzt und die ursprüngliche Form lautet wie folgt.
application.js
$(document).ready(function {
//wird bearbeitet
});
Die ready-Methode ist eine Methode, die die interne Verarbeitung ausführt, wenn der HTML-Code vollständig geladen ist.
Mit anderen Worten, indem Sie die gesamte js-Verarbeitung in $ (function () {process}); schreiben, können Sie die Verarbeitung ausführen, ohne an irgendetwas zu denken.
In Vanille ist es notwendig, dieses "Warten auf das Laden von HTML" zu schreiben, ohne jQuery zu verwenden.
DOMContentLoaded In Vanilla können Sie durch Angabe von "DOMContentLoaded" im Fall der addEventListener-Methode dasselbe tun wie mit der ready-Methode von jQuery. Der Code lautet wie folgt.
application.js
window.addEventListener('DOMContentLoaded', function() {
//wird bearbeitet
});
Schauen wir uns nun den Code an, der die erste jQuery mit Vanille verglichen hat.
application.js
// jQery
$(function() {
$("Name des Selektors").on('click', function() {
console.log('Es wurde angeklickt.');
});
});
Wenn Sie diese jQuery schreiben, ohne sie wegzulassen
application.js
// jQery
$(document).ready(function() {
$("Name des Selektors").on('klicken', function() {
console.log('Es wurde angeklickt.');
});
});
Es wird so sein.
Als nächstes schauen wir uns Vanille an.
application.js
//Vanille
(function() {
document.getElementById("Name des Selektors").addEventListener('click', function() {
console.log('Es wurde angeklickt.');
});
}());
Dies ist eine unmittelbare Funktion, kann aber auch auf diese Weise funktionieren.
Normalerweise wird in Rails das Lade-Tag einer externen JS-Datei häufig in das Head-Tag geschrieben. Wenn Sie jedoch die js-Datei im Kopf lesen, wird die js-Funktion aktiviert, bevor Sie das Element in den Body aufnehmen, sodass ein Fehler auftritt. Es ist also eine Methode, das Lese-Tag der externen js-Datei am Ende des Body-Tags zu schreiben.
erb:application.html.erb
<head>
...
<%#= javascript_include_tag 'application' %>
...
<head>
<body>
...
<%= javascript_include_tag 'application' %>
</body>
Auf diese Weise wird die js-Datei geladen, wenn der Body fertig geladen ist, sodass Sie auch Elemente laden können. Da jedoch alle anderen externen Dateien, Dienste, API-Ladeeinstellungen usw. im head-Tag geschrieben sind, möchte ich das Laden externer js-Dateien im head nach Möglichkeit vereinheitlichen.
Wie bereits erwähnt, wird auf diese Weise das Ereignis DOMContentLoaded der Methode addEventListener verwendet. Es ist erforderlich, nur die js-Datei neu zu schreiben, während das Lese-Tag für die externe js-Datei im Kopf verbleibt.
application.js
//Vanille
window.addEventListener('DOMContentLoaded', function() {
document.getElementById("Name des Selektors").addEventListener('click', function() {
console.log('Es wurde angeklickt.');
});
});
Nachdem der HTML-Code geladen und die Funktion ausgeführt wurde, funktioniert er einwandfrei.
Das DOMContentLoaded-Ereignis wartet übrigens nur darauf, dass der HTML-Code vollständig geladen wird, sodass das Laden von CSS- oder Bilddateien nicht enthalten ist. Wenn Sie einen Image- oder CSS-Vorgang haben, können Sie das Ladeereignis der addEventListener-Methode verwenden, um die Funktion nach Abschluss des Ladevorgangs auszulösen.
Bisher habe ich Ihnen gesagt, wie man in Vanille schreibt, aber ich persönlich denke, dass jQuery verwendet werden kann, solange es mit jQuery kompatibel ist. Ich habe tatsächlich Vanille geschrieben und herausgefunden, wie einfach es ist, mit jQuery zu schreiben ... lol Dies lässt sich aus der Tatsache ableiten, dass es auch standardmäßig in Rails installiert ist.
Wenn Sie Fragen haben, unterschiedliche Interpretationen haben oder wenn Sie der Meinung sind, dass etwas mit der Beschreibungsmethode nicht stimmt, würden wir uns freuen, wenn Sie in den Kommentaren darauf hinweisen könnten.
Vielen Dank für das Lesen bis zum Ende.
Grund für die Verwendung von Sofortfunktionen in JavaScript [JQuery] $ (function () {...}) "Bedeutung und Zeitpunkt der Ausführung" Unterschied zwischen DOMContentLoaded-Ereignis und Ladeereignis [Timing]
Recommended Posts