Share
Programmiersprachen sind sehr genau das; Sprachen. Eine gute Programmiersprache zu beherrschen, sei es HTML, CSS, JavaScript oder etwas anderes, hat alle Herausforderungen, eine neue gesprochene Sprache zu lernen.
Wie bei gesprochenen Sprachen hat auch jede Programmiersprache eine eigene „Grammatik“. strenge Regeln und Eigenheiten, die oft schwer zu erlernen sind und sich erst über Jahre hinweg in vollem Umfang entfalten.
uilang ist eine neue, einfache JavaScript-basierte Sprache, die von Benjamin De Cock entwickelt wurde. Webdesigner können UI-Klickinteraktionen mithilfe von Regeln erstellen, die direkt aus der englischen Sprache stammen. Dies bedeutet eine intuitivere und sanftere Lernkurve für Anfänger, die sich mit der Verwendung von JavaScript beschäftigen möchten, und eine schnellere Methode der UI-Klickinteraktion für ältere Benutzer.
Der Kern von uilang ist die Möglichkeit, Klassennamen zu einem bestimmten Element hinzuzufügen, zu entfernen oder umzuschalten. Dies können nur drei Aktionen sein, aber in Kombination mit CSS werden alle möglichen Aktionen ausgeführt, beispielsweise das Ausblenden von Benachrichtigungs- und Modalboxen, das Animieren von Schaltern, das Anzeigen von Dropdown-Menüs für das Navigationsmenü sowie das Einblenden von Tabs und Akkordeon-Systemen.
Angenommen, Sie haben die folgende Benachrichtigungsbox:
Die Gesamtbox trägt die ID #Benachrichtigung, und der Button hat die Klasse .verbergen. CSS ist auch auf der Seite unter der Klasse enthalten .versteckt Wenn diese Option dem Feld hinzugefügt wird, wird die Deckkraft auf null gesetzt, wodurch die Benachrichtigung ausgeblendet oder verworfen wird.
Der zum Erstellen dieser Box verwendete Code lautet:
Sie haben 3 ungelesene Nachrichten.
Verwenden Sie direktes JavaScript, wenn Sie die Klasse hinzufügen möchten .versteckt Wenn Sie auf die Schaltfläche klicken, benötigen Sie Folgendes:
Accentsconagua
document.addEventListener ('DOMContentLoaded', function () [] .forEach.call (document.querySelectorAll ('. hide'), Funktion (el) el.addEventListener ('click', Funktion (e) if (e.) .target.nodeName.toLowerCase () == 'a') e.preventDefault (); document.getElementById ('notification'). classList.add ('hidden'););););Wenn Sie nicht mit JavaScript vertraut sind, kann diese Menge an Code ziemlich überwältigend sein. Selbst wenn Sie vertraut sind, kann die Produktion recht zeitaufwändig sein.
Wenn Sie anstelle von rohem JavaScript uilang verwenden, schreiben Sie eine Anweisungsaussage wie folgt:
Klick auf ".hide" fügt die Klasse "versteckt" bei "#notification" hinzu Wie Sie sehen, ist dieser Code viel besser lesbar, unabhängig davon, wie viel Erfahrung Sie haben. Durch seinen Klartext ist es leicht verständlich und schnell zu implementieren.
Werfen wir einen Blick darauf, wie Uilang funktioniert.
Der erste Schritt bei der Verwendung von uilang ist das Herunterladen der kleinen JS-Datei, die diese Funktion unterstützt. Sie können es über die Herunterladen Link bei uilang.com.
Laden Sie die Datei nach dem Herunterladen in Ihre HTML-Seite mit:
Sie können jetzt uilang mit jedem Element auf Ihrer Seite verwenden.
Wählen Sie zunächst das Zielelement aus, z. B. eine Schaltfläche, die Sie anzeigen möchten, wenn Sie darauf klicken, wenn Personen darauf klicken. Dann legen Sie eine Aktion fest, die einen Klassennamen hinzufügt, entfernt oder umschaltet, und Sie bestimmen, auf welches Element diese Aktion angewendet werden soll.
Stellen Sie sicher, dass Sie alle uilang-Befehle einschließen Klicken Sie auf wie so:
Klicken Sie auf Fügen Sie als Nächstes die Klasse oder ID des Elements hinzu, das Sie als Ziel festlegen möchten, um Klicks zu finden, die in Sprechmarken eingeschlossen sind:
Klicken Sie auf ".diese Schaltfläche". An dieser Stelle können Sie auch festlegen, dass mehrere Zielelemente für Klicks verfolgt werden, indem Sie ein Komma und eine zweite Klasse oder ID hinzufügen:
Klicken Sie auf ".Diese Schaltfläche, #Diese Schaltfläche". Sie haben nun die Wahl zwischen drei Aktionen zur Auswahl. fügt Klasse hinzu, entfernt die Klasse oder schaltet die Klasse um.
Fügen Sie die gewünschte Aktion ein, gefolgt von dem Klassennamen, den Sie hinzufügen / entfernen / umschalten möchten:
Durch Klicken auf ".thisbutton, #thatbutton" wird die Klasse "popsup" hinzugefügt. Fügen Sie schließlich das Wort hinzu auf gefolgt von der Klasse oder ID (innerhalb von Sprachmarken) des zu ändernden Elements, d. h. dem Element, zu dem Sie eine Klasse hinzufügen / entfernen / umschalten möchten:
Durch Klicken auf ".thisbutton, fügt #thatbutton" die Klasse "popsup" zu "#message" hinzu. Sie können auch mehrere Zeilen verwenden und mehr als eine Klickaktion gleichzeitig definieren:
Klicken Sie auf ".thisbutton, fügt #thatbutton" die Klasse "popsup" bei "#message" hinzu, klicken Sie auf ".otherbutton" und fügen Sie die Klasse "goaway" bei "#message" hinzu. Wenn das Element, für das Sie Klicks verfolgen möchten, auch das Element ist, zu dem Sie Klassen hinzufügen, entfernen oder umschalten möchten, können Sie das Schlüsselwort verwenden Ziel Anstatt den Bezeichner ein zweites Mal zu schreiben, wie folgt:
Klicken auf ".animation" schaltet die Klasse "play_anim" auf "target" Damit ist unsere schnelle Demonstration von Uilang gerade abgeschlossen. Der beste Weg, um herauszufinden, worum es geht, ist, zu uilang.com zu gehen und dort mit den Live-Demos herumzuspielen.
Außerdem wird ein Transpiler bereitgestellt, mit dem Sie einige uilang-Befehle einfügen können, um zu sehen, was als Folge von JavaScript erzeugt wird: transpiler.uilang.com.
Benjamin, der Entwickler, hat auch einen Artikel zu Medium veröffentlicht, der die Philosophie hinter uilang und sein Ziel, den Übergang zum Erlernen von JavaScript für andere zu erleichtern, detaillierter beschreibt als für ihn.
Wenn Sie sich nur mit JavaScript beschäftigen und nach einer intuitiveren Methode suchen, um die ersten Hürden zu überwinden, oder wenn Sie nur nach einer rationalisierten Methode für die Handhabung von Klickinteraktionen suchen, testen Sie uilang in Ihrem nächsten Projekt.
