Ich habe noch nie als professioneller Front-End-Entwickler gearbeitet, und obwohl ich seit 15 Jahren HTML / CSS / JS für kleine Nebenprojekte schreibe, waren alle Projekte recht klein. Es kommt vor, dass ich zwischen diesen Projekten jahrelang nicht in Javascript geschrieben habe und oft nicht sicher bin, ob ich alles richtig mache.

Dies ist teilweise der Grund, warum ich oft Bibliotheken benutzt habe! Vor zehn Jahren habe ich jQuery verwendet und seit 2017 verwende ich vue.js häufig für meine kleinen Projekte (Sie können sich das kleine Sapper-Spiel ansehen, das ich als Einführung in Vue erstellt habe).

Aber letzte Woche habe ich zum ersten Mal seit langer Zeit einfaches Javascript ohne Bibliothek geschrieben, und es hat Spaß gemacht, also wollte ich ein wenig darüber sprechen!

Experimentieren mit einfachem Javascript

Ich mag Vue wirklich. Aber letzte Woche, als ich mit der Entwicklung von https://questions.wizardzines.com begann , hatte ich etwas andere Einschränkungen als gewöhnlich - ich wollte denselben HTML-Code verwenden, um eine PDF-Datei (mit Prince ) und eine interaktive Version zu erstellen Fragen.

Ich habe wirklich nicht gesehen, wie dies mit Vue möglich ist (weil Vue den gesamten HTML-Code selbst erstellen möchte), und da es sich um ein kleines Projekt handelt, habe ich beschlossen, es in einfachem Javascript ohne Bibliotheken zu schreiben - schreiben Sie einfach etwas HTML / CSS und fügen Sie eines hinzu <script src="js/script.js"> </script>.

Ich habe das eine Weile nicht getan und dabei ein paar Dinge gelernt, die den Prozess einfacher machen würden, als ich dachte, als ich anfing.

Machen Sie fast alles und fügen Sie CSS-Klassen hinzu und entfernen Sie sie

Ich habe beschlossen, fast die gesamte Benutzeroberfläche zu implementieren, indem ich einfach CSS-Klassen hinzufügte und entfernte und CSS-Übergänge verwendete, wenn ich den Übergang animieren möchte.

Hier ist ein kleines Beispiel, in dem durch Klicken auf eine Schaltfläche nextfür eine Frage donedem übergeordneten div eine Klasse hinzugefügt wird.

div.querySelector('.next-question').onclick = function () {
    show_next_row();
    this.parentElement.parentElement.classList.add('done');
}

Es hat ziemlich gut funktioniert. Mein CSS ist wie immer etwas chaotisch, scheint aber überschaubar.

Hinzufügen / Entfernen von CSS-Klassen mit .classList

Ich habe mit der Bearbeitung der Klassen wie folgt begonnen : x.className = 'new list of classes'. Es ist allerdings etwas chaotisch und ich habe mich gefragt, ob es einen besseren Weg gibt. Und er war!

CSS-Klassen können folgendermaßen hinzugefügt werden:

let x = document.querySelector('div');
x.classList.add('hi');
x.classList.remove('hi');

element.classList.remove('hi') Ist viel sauberer als meine vorherige Methode.

Suchen Sie Elemente mit document.querySelectorAll

Als ich anfing, jQuery zu lernen, erinnere ich mich, dass ich (zum Beispiel $('.class')) jQuery verwenden muss, wenn Sie etwas im DOM leicht finden müssen . Ich habe diese Woche gerade gelernt, dass man stattdessen einfach schreiben document.querySelectorAll('.some-class')kann und sich dann nicht auf eine Bibliothek verlassen muss!

Ich war neugierig, als ich vorgestellt wurde querySelectorAll. Ich habe ein bisschen gegoogelt und es sieht so aus, als ob die Selectors-API irgendwann zwischen 2008 und 2013 erstellt wurde. Ich habe eine Nachricht des Autors von jQuery gefunden , in der die vorgeschlagene Implementierung im Jahr 2008 besprochen wurde , und einen Blog-Beitrag aus dem Jahr 2011, der dies besagt Es war in allen gängigen Browsern der Zeit vorhanden, daher gab es es möglicherweise nicht, als ich anfing, jQuery zu verwenden, aber es existierte definitiv schon seit einiger Zeit :)

.InnerHTML installieren

An einer Stelle wollte ich den HTML-Inhalt einer Schaltfläche ändern. Das Erstellen von DOM-Elementen mit ist document.createElementziemlich mühsam, daher habe ich versucht, die Arbeit auf ein Minimum zu beschränken und stattdessen die .innerHTMLbenötigte HTML-Zeile festzulegen:

  button.innerHTML = `<i class="icon-lightbulb"></i>I learned something!
    <object data="/confetti.svg" width="30" height = "30"> </object>
    `;

Scrollen der Seite mit .scrollIntoView

Das letzte lustige, was ich herausgefunden habe, ist das hier .scrollIntoView. Ich wollte automatisch zur nächsten Frage scrollen, wenn jemand auf die Schaltfläche "Nächste Frage" klickt. Es stellt sich heraus, dass dies nur eine Codezeile ist:

row.classList.add('revealed');
row.scrollIntoView({behavior: 'smooth', block: 'center'});

Ein weiteres Beispiel für Vanille-JS: Peekobot

Ein weiteres kleines Beispiel für eine einfache JS-Bibliothek, die ich als gut empfunden habe , ist Peekobot , eine kleine Chatbot- Oberfläche, die aus 100 Zeilen JS / CSS besteht.

Wie Sie seinem Javascript entnehmen können , verwendet er mehrere ähnliche Muster - viele .classList.add, einige fügen dem DOM Elemente hinzu, andere .querySelectorAll.

Aus der Peekobot-Quelle habe ich das .closest- Element kennengelernt , das den nächsten Vorfahren findet, der einem bestimmten Selektor entspricht. Es sieht so aus, als wäre es eine gute Möglichkeit, einige .parentElement.parentElementDinge loszuwerden, die ich in meinem Javascript geschrieben habe und die ein wenig fragil wirkten.

Einfaches Javascript kann viel!

Ich war sehr überrascht, wie viel Arbeit mit einfachem JS erledigt werden kann. Am Ende schrieb ich ungefähr 50 Zeilen JS, die alles taten, was ich tun wollte, und ein bisschen mehr, um einige anonyme Metriken über das Lernen von Benutzern zu sammeln.

Wie bei meinen Front-End-Posts üblich, sollte dies kein ernsthafter Ratschlag für die Front-End-Entwicklung sein. Mein Ziel ist es, kleine Websites mit weniger als 200 Javascript-Zeilen zu schreiben, die im Grunde funktionieren. Wenn Sie auch in der Frontend-Welt sind, hoffe ich, dass dies ein wenig hilft!

Ein einfaches Javascript kann viel bewirken