Rails5 a un gem jQuery installé depuis le début, et il est disponible par défaut sauf si vous le supprimez. Quand j'ai commencé à apprendre Rails, je me suis habitué à utiliser jQuery plutôt que le simple JavaScript (ci-après «vanilla»), donc cette fois j'ai osé trouver un moyen de ne pas utiliser jQuery pour réapprendre la vanille.
Ruby 2.5.7 Rails 5.2.4
Quand j'ai recommencé à écrire du code à la vanille, j'en étais assez accro. Si je pouvais l'écrire dans jQuery, ce serait bien, mais ce n'était pas agréable de le laisser tel quel, alors j'ai décidé de faire face un peu.
J'ai essayé de vérifier le journal de la console avec un événement de clic comme point de départ.
Dans jQuery, $ (function () {processing}); comme indiqué ci-dessous
Il faut écrire. (La raison sera décrite plus tard.)
application.js
// jQuery
$(function() {
$("Nom du sélecteur").on('Cliquez sur', function() {
console.log('Il a été cliqué.');
});
});
La fonction immédiate de Vanilla sans jQuery s'écrit comme suit.
application.js
//vanille
(function() {
document.getElementById("Nom du sélecteur").addEventListener('click', function() {
console.log('Il a été cliqué.');
});
}());
Les deux codes ci-dessus ont le même traitement, mais la vanille a une erreur pour une raison quelconque et n'est pas sortie dans le journal de la console. .. ..
J'avais l'habitude de passer à jQuery ici, mais je voulais vraiment le résoudre, alors j'ai proposé cette recherche.
Il était caché dans $ (function () {});. (Pas caché.)
$ (function () {}); est abrégé, et la forme originale est la suivante.
application.js
$(document).ready(function {
//En traitement
});
La méthode prête est une méthode dans laquelle le traitement interne est effectué lorsque le chargement du code HTML est terminé.
En d'autres termes, en écrivant tout le traitement js dans $ (function () {processing});, vous pouvez effectuer le traitement sans penser à rien.
En vanilla, il faut écrire ceci "en attente de chargement html" sans utiliser jQuery.
DOMContentLoaded
Dans la vanille, en spécifiant DOMContentLoaded dans le cas de la méthode addEventListener, vous pouvez faire la même chose que la méthode ready de jQuery, et le code sera comme suit.
application.js
window.addEventListener('DOMContentLoaded', function() {
//En traitement
});
Revenons maintenant au code qui comparait le premier jQuery à vanilla.
application.js
// jQery
$(function() {
$("Nom du sélecteur").on('click', function() {
console.log('Il a été cliqué.');
});
});
Si vous écrivez ce jQuery sans l'omettre
application.js
// jQery
$(document).ready(function() {
$("Nom du sélecteur").on('Cliquez sur', function() {
console.log('Il a été cliqué.');
});
});
Ce sera comme ça.
Ensuite, regardons la vanille.
application.js
//vanille
(function() {
document.getElementById("Nom du sélecteur").addEventListener('click', function() {
console.log('Il a été cliqué.');
});
}());
C'est une fonction immédiate, mais en fait, cela peut également fonctionner de cette manière.
Normalement, dans Rails, la balise de chargement d'un fichier js externe est souvent écrite à l'intérieur de la balise head. Cependant, si vous lisez le fichier js dans la tête, la fonction js sera activée avant de prendre l'élément dans le corps, donc une erreur se produira. Il s'agit donc d'une méthode pour écrire la balise de lecture du fichier js externe à la fin de la balise body.
erb:application.html.erb
<head>
...
<%#= javascript_include_tag 'application' %>
...
<head>
<body>
...
<%= javascript_include_tag 'application' %>
</body>
En faisant cela, le fichier js commencera à se charger lorsque le corps aura terminé le chargement, vous pouvez donc également charger des éléments. Cependant, comme tous les autres fichiers externes, services, paramètres de chargement d'API, etc. sont écrits dans la balise head, je voudrais unifier le chargement des fichiers js externes dans la tête si possible.
Comme je l'ai mentionné précédemment, voici comment utiliser l'événement DOMContentLoaded de la méthode addEventListener. Il est nécessaire de réécrire uniquement le fichier js en laissant la balise de lecture du fichier externe js dans la tête.
application.js
//vanille
window.addEventListener('DOMContentLoaded', function() {
document.getElementById("Nom du sélecteur").addEventListener('click', function() {
console.log('Il a été cliqué.');
});
});
Maintenant que le HTML est chargé et que la fonction est exécutée, cela fonctionne correctement.
À propos, l'événement DOMContentLoaded attend seulement que le HTML termine le chargement, il n'inclut donc pas le chargement de fichiers css ou image. Si vous avez une opération image ou css, vous pouvez utiliser l'événement load de la méthode addEventListener pour déclencher la fonction une fois le chargement terminé.
Jusqu'à présent, je vous ai dit comment écrire à la vanille, mais je pense personnellement que jQuery peut être utilisé tant qu'il est compatible avec jQuery. En fait, j'ai écrit vanilla et j'ai découvert à quel point il est facile d'écrire avec jQuery ... lol Cela peut être déduit du fait qu'il est également installé en standard dans Rails.
Si vous avez des questions, des différences d'interprétation ou si vous pensez que quelque chose ne va pas avec la méthode de description, nous vous serions reconnaissants de bien vouloir le signaler dans les commentaires.
Merci d'avoir lu jusqu'au bout.
Raison de l'utilisation des fonctions immédiates en JavaScript [JQuery] $ (function () {...}) "signification et calendrier d'exécution" Différence entre l'événement DOMContentLoaded et l'événement de chargement [Timing]
Recommended Posts