C'est en partie pourquoi j'ai beaucoup utilisé les bibliothèques! Il y a dix ans, j'utilisais jQuery, et depuis 2017, j'utilise beaucoup vue.js pour mes petits projets (vous pouvez consulter le petit jeu de sapeur que j'ai créé en guise d'introduction à Vue).
Mais la semaine dernière, pour la première fois depuis longtemps, j'ai écrit du Javascript simple sans bibliothèque, et c'était amusant, j'ai donc voulu en parler un peu!
Expérimenter avec du Javascript brut
J'aime vraiment Vue. Mais la semaine dernière, quand j'ai commencé à développer https://questions.wizardzines.com , j'avais des limitations légèrement différentes que d'habitude - je voulais utiliser le même HTML pour créer un PDF (avec Prince ) et créer une version interactive des questions.
Je ne voyais vraiment pas comment cela était possible avec Vue (parce que Vue veut créer tout le HTML par lui-même) et comme c'était un petit projet, j'ai décidé d'essayer de l'écrire en Javascript simple sans bibliothèques - il suffit d'écrire du HTML / CSS et d'en ajouter un
<script src="js/script.js"> </script>.
Je n'ai pas fait cela depuis un certain temps, et en cours de route, j'ai appris certaines choses qui rendraient le processus plus facile que je ne le pensais lorsque j'ai commencé.
Nous faisons presque tout en ajoutant et en supprimant des classes CSS
J'ai décidé d'implémenter la quasi-totalité de l'interface utilisateur en ajoutant et supprimant simplement des classes CSS et en utilisant des transitions CSS si je veux animer la transition.
Voici un petit exemple où le fait de cliquer sur un bouton
nextpour une question ajoute une classe doneà la div parent.
div.querySelector('.next-question').onclick = function () {
show_next_row();
this.parentElement.parentElement.classList.add('done');
}Cela a plutôt bien fonctionné. Mon CSS est, comme toujours, un peu chaotique mais semble gérable.
Ajouter / supprimer des classes CSS avec .classList
J'ai commencé avec les classes d' édition suit comme:
x.className = 'new list of classes'. C'est un peu compliqué et je me suis demandé s'il y avait une meilleure façon. Et il l'était!
Les classes CSS peuvent être ajoutées comme ceci:
let x = document.querySelector('div');
x.classList.add('hi');
x.classList.remove('hi');element.classList.remove('hi') Est beaucoup plus propre que ma méthode précédente.
Rechercher des éléments à l'aide de document.querySelectorAll
Quand j'ai commencé à apprendre jQuery, je me souviens avoir pensé que si vous avez besoin de trouver facilement quelque chose dans le DOM, vous devez utiliser jQuery (par exemple
$('.class')). Je viens de découvrir cette semaine que vous pouvez simplement écrire à la place document.querySelectorAll('.some-class')et que vous n’avez donc plus besoin de dépendre d’une bibliothèque!
Je suis devenu curieux quand il a été introduit
querySelectorAll. J'ai googlé un peu et il semble que l'API Selectors ait été construite entre 2008 et 2013 - j'ai trouvé un article d'un auteur de jQuery discutant d'une mise en œuvre proposée en 2008, et un article de blog de 2011 qui disait que C'était dans tous les principaux navigateurs de l'époque, donc il n'existait peut-être pas lorsque j'ai commencé à utiliser jQuery, mais il existait certainement depuis un certain temps :)
Installation de .innerHTML
À un endroit, je voulais changer le contenu HTML d'un bouton. La création d'éléments DOM à l'aide est
document.createElementplutôt fastidieuse, j'ai donc essayé de minimiser le travail et de définir à la place la .innerHTMLchaîne HTML pour la bonne:
button.innerHTML = `<i class="icon-lightbulb"></i>I learned something!
<object data="/confetti.svg" width="30" height = "30"> </object>
`;Faire défiler la page avec .scrollIntoView
La dernière chose amusante que j'ai découverte est la suivante
.scrollIntoView. Je voulais passer automatiquement à la question suivante lorsque quelqu'un clique sur le bouton Question suivante. Il s'avère que ce n'est qu'une ligne de code:
row.classList.add('revealed');
row.scrollIntoView({behavior: 'smooth', block: 'center'});Un autre exemple de vanille JS: peekobot
Un autre petit exemple d'une bibliothèque JS simple que j'ai trouvé bien est peekobot , qui est une petite interface de chatbot composée de 100 lignes de JS / CSS.
Comme vous pouvez le voir dans son Javascript , il utilise plusieurs modèles similaires - beaucoup
.classList.add, certains ajoutent des éléments au DOM, certains .querySelectorAll.
De la source peekobot, j'ai découvert l' élément .closest , qui trouve l'ancêtre le plus proche qui correspond à un sélecteur donné. Il semble que ce serait un bon moyen de me débarrasser de certains que
.parentElement.parentElementj'ai écrits dans mon Javascript et qui me semblaient un peu fragiles.
Javascript simple peut faire beaucoup!
J'ai été très surpris de tout ce que j'ai fait avec un simple JS. J'ai fini par écrire environ 50 lignes de JS qui faisaient tout ce que je voulais faire, et un peu plus pour collecter des métriques anonymes sur l'apprentissage des utilisateurs.
Comme d'habitude avec mes postes frontaux, cela ne devrait pas être un conseil sérieux sur le développement frontal. Mon objectif est d'écrire de petits sites Web avec moins de 200 lignes Javascript qui fonctionnent essentiellement. Si vous êtes également dans le monde frontal, j'espère que cela vous aidera un peu!