Clever Geek Handbook

Erste Schritte mit Moon.js

Heute werden wir über die nächste JavaScript-Bibliothek für die Entwicklung von Schnittstellen sprechen. Es besteht das Gefühl, dass solche Bibliotheken immer häufiger erscheinen. In diesem Artikel werden wir uns die Moon.js- Bibliothek ansehen und ihre Funktionen aufzeigen , die Sie kennen müssen, um mit ihr arbeiten zu können. Insbesondere werden wir darüber sprechen, wie neue Moon.js-Projekte erstellt werden, wie Schnittstellenelemente erstellt werden und wie Ereignisse behandelt werden. Mit diesem Tutorial sollten Sie Moon.js verwenden können, um Ihre eigenen Anwendungen zu entwickeln.







Moon.js Bibliothek



Moon.js ist eine minimalistische JavaScript-Bibliothek zur Entwicklung schneller und funktionaler Schnittstellen. Es hat eine relativ kleine Größe, die es ermöglicht, auf seiner Basis ziemlich kompakte Anwendungen zu erstellen. Die Bibliothek hat eine sehr hohe Leistung



Moon.js verwendet einen komponentenbasierten Ansatz für das Interface-Design. Vorlagen werden zum Erstellen von Komponenten verwendet. Diese Bibliothek ist Vue.js ziemlich ähnlich.



Die Stärken von Moon.j.



  • Moon.js ist kompakt (verkleinert und komprimiert ca. 2 KB). Dies ist kleiner als die Größe anderer Bibliotheken und Frameworks wie React und Angular.
  • Diese Bibliothek zeichnet sich durch eine hohe Geschwindigkeit beim Rendern von Schnittstellen aus.
  • Moon.js ist eine Bibliothek, die auf funktionalen Entwicklungstechniken basiert. Bei der Arbeit wird ein Ansatz für das Interface-Design verwendet, der auf den sogenannten "Treibern" basiert.


Arbeitsbeginn



Die Moon.js-Bibliothek kann auf zwei Arten in ein Projekt aufgenommen werden. Das erste ist, es von NPM zu installieren. Die zweite Möglichkeit besteht darin, es direkt mit der Seite zu verbinden, auf der es verwendet werden soll.



Wenn Sie die NPM-Version der Bibliothek verwenden möchten, müssen Sie zuerst das Paket moon-cli, das Befehlszeilentool , installieren : 



$ npm i moon-cli -g


In diesem Beispiel ist dieses Tool global installiert. Sie können es aus einem beliebigen Verzeichnis aufrufen.



Um ein auf Moon.js basierendes Projekt zu erstellen, können Sie den folgenden Befehl ausführen: 



$ moon create moon-prj


Dieser Befehl erstellt ein neues Projekt in einem Ordner moon-prj. Nach Abschluss der Projekterstellung steht Ihnen die Grundlage für die zukünftige Anwendung zur Verfügung.



Die zweite Option für die Verwendung von Moon.js besteht darin, es mit der Seite zu verbinden, auf der Sie es verwenden möchten. Die Bibliothek verfügt über ein Modul moon-browser, mit dem Sie ihre Funktionen direkt auf der Seite verwenden können, mit der sie verbunden ist.



Um die Bibliothek mit der Seite zu verbinden, müssen die folgenden zwei Tags in die Seite aufgenommen werden: 



<script src="https://unpkg.com/moon"></script>
<script src="https://unpkg.com/moon-browser"></script>


Wie Sie sehen können, werden die entsprechenden Skripte vom unpkg CDN geladen. Das erste Tag importiert die Hauptbibliothek. Der zweite ist die Bibliothek moon-browser. Sie ist dafür verantwortlich, die Moon.js-Vorlagen zu kompilieren, damit sie für die Anzeige durch den Browser geeignet sind.



Um die Moon.js-Syntax auf der Seite verwenden zu können, müssen Sie sie in das Tag aufnehmen <script>, ohne zu vergessen, dass das Attribut typeals festgelegt wird text/moon. 



<!--      -->
<script src="./main-script.js" type="text/moon"></script>
<!--    ,    -->
<script type="text/moon">
    ...
</script>


Verbinden der Moon.js-App mit der Seite



Moon.js stellt wie andere Bibliotheken und Frameworks, die zum Erstellen von Anwendungen für einzelne Seiten verwendet werden, eine Verbindung zu einem bestimmten Seitenelement her. Normalerweise spielt ein Element die Rolle eines Containers für eine Moon.js-Anwendung <div>: 



<div id="root"></div>


Ein ähnliches Element, das das Stammelement der Moon.js-Anwendung ist, wird in den Code der Datei eingefügt, die index.htmlden Einstiegspunkt für das Projekt darstellt.



Ein Treiber wird verwendet, um eine Moon.js-Anwendung mit diesem Element zu verbinden view(im Folgenden werden die Treiber ausführlicher beschrieben): 



Moon.use({
    view: Moon.view.driver("#root")
})


Dieses Konstrukt teilt der Bibliothek mit, dass die Anwendung mit dem Bezeichner mit dem Element verbunden werden soll root. Bei Bedarf können Sie mithilfe der Browser-API, die für die Arbeit mit dem DOM entwickelt wurde, ein ähnliches Element wie die Bibliothek angeben: 



Moon.use({
    view: Moon.view.driver(document.getElementById("root"))
})


Lassen Sie uns nun darüber sprechen, wie die Datenmanipulation in Moon.js organisiert ist und wie mithilfe dieser Bibliothek Schnittstellenelemente erstellt werden.



Syntax zur Beschreibung von Schnittstellenelementen



Zur Beschreibung der Moon.js-Schnittstellen wird die Programmiersprache Moon View Language (MVL) verwendet, die speziell zur Lösung dieses Problems entwickelt wurde. Es ähnelt JSX. Diese Sprache wird verwendet, um Elemente zu beschreiben und ihre Beziehungen anzupassen. Hier ist ein Beispiel: 



<script type="text/moon">
    function aView(data) {
        return (
            <div>Hi from Moon</div>
        )
    }
</script>


Es ist leicht zu erkennen, dass dieses Stück Moon.js, das für die Elementbildung verantwortlich ist, Syntaxstrukturen <div>verwendet, die HTML ähneln. Diese Strukturen werden jedoch im JavaScript-Code verwendet. Der Browser kann solchen JavaScript-Code nicht ausführen, ist jedoch nicht erforderlich, da Moon.js solche Konstrukte in gewöhnliches JavaScript kompiliert.



Mit Daten arbeiten



Moon.js verwendet das Konzept der Treiber, um die visuelle Darstellung von Elementen zu steuern und mit Daten zu arbeiten. Hier werden wir uns den Treiber ansehen, mit dem wir mit Daten arbeiten können, und im nächsten Abschnitt werden wir über den Treiber für die Arbeit mit Schnittstellenelementen sprechen.



Ein Datentreiber ist dafür verantwortlich, Anwendungsdaten zu speichern und die Verwendung von Daten dort zu ermöglichen, wo sie benötigt werden. Mit anderen Worten, dieser Treiber speichert den globalen Status der Anwendung.



Sie können die Anfangsdaten für die Moon.js-Anwendung mithilfe der API festlegen Moon.use: 



Moon.use({
    data: Moon.data.driver
})


Sie können neue Daten in Status schreiben, indem Sie sie von den entsprechenden Funktionen zurückgeben: 



Moon.run(({ data }) => {
    console.log(data) // undefined
    return {
        data: "Nnamdi"
    }
})


Die API Moon.runist für den Start der Anwendung verantwortlich. Der an diese API übergebene Rückruf erhält als Argument einen Verweis auf die globalen Daten data. Da zum Zeitpunkt des Aufrufs dieser Funktion noch datanichts darin enthalten ist, wird der Befehl console.logaus diesem Beispiel ausgegeben undefined.



Wir geben ein Objekt aus dem Rückruf zurück, das eine Eigenschaft datamit einem Wert hat Nnamdi. Dieses Objekt stellt einen neuen Status der Anwendung dar, dessen Daten von allen anderen aufrufenden Funktionen verwendet werden können data.



Wir haben den Mechanismus für die Arbeit mit Daten in Moon.js untersucht. Lassen Sie uns nun genauer über die Arbeit mit Schnittstellenelementen sprechen.



Arbeiten mit Schnittstellenelementen



Moon.js verfügt über einen Treiber viewzum Erstellen und Mounten von Elementen im DOM.



Wir haben bereits das unten wiederholte Code-Snippet untersucht, in dem das <div>Basiselement Moon.js mit dem Element verbunden ist: 



Moon.use({
    view: Moon.view.driver("#root")
})


Hier wird das Element montiert. Funktionen können jetzt Elemente zurückgeben, die alte Elemente ersetzen können. Sie können in Form von Objekten dargestellt werden, die eine Eigenschaft enthalten, viewin die die entsprechenden Daten geschrieben sind. Die Bibliothek nimmt den Eigenschaftswert viewaus dem von der Funktion zurückgegebenen Objekt und schreibt ihn in das Element, das mit dem Bezeichner mit dem Element verbunden ist root.



Moon.js verwendet das Konzept des virtuellen DOM und einen leistungsstarken Algorithmus zum Vergleichen alter und neuer Schnittstellenversionen. Auf diese Weise kann die Bibliothek entscheiden, wann das DOM aktualisiert werden soll und welche Teile des DOM aktualisiert werden müssen. 



function handleClick() {
    return {};
}
Moon.run(() => ({
    view: <button @click=handleClick>Click Me!</button>
}));


Hier gibt der übergebene Rückruf Moon.rundie Schaltfläche an das DOM aus. Dies liegt daran, dass die Funktion ein Objekt mit einer Eigenschaft zurückgibt view. Der dieser Eigenschaft zugewiesene Wert wird in das DOM übernommen.



Die Schaltfläche verfügt über einen Ereignishandler click, der durch eine Funktion dargestellt wird handleClick. Diese Funktion gibt ein leeres Objekt zurück. Durch den Aufruf wird das DOM nicht geändert.



Elemente erstellen



Moon.js bietet dem Entwickler eine Vielzahl von Hilfsfunktionen zum Erstellen von Schnittstellenelementen. Als Ergebnis stellt sich heraus, dass Elemente nicht mit der Beschreibungssprache der Moon.js-Schnittstelle erstellt werden können, sondern mit den entsprechenden Funktionen: 



const { div, text, node, p } = Moon.view.m


Moon.js exportiert Funktionen, deren Namen mit den Namen der von ihnen erstellten Elemente übereinstimmen. Mit dieser Funktion divkönnen Sie also Elemente erstellen <div>. Die Funktion texterstellt Textknoten. Mit dieser Funktion nodekönnen Sie benutzerdefinierte Elemente erstellen. Die Funktion perstellt Elemente <p>. Wie Sie sehen können, geben die Namen dieser Funktionen deutlich ihren Zweck an.



Erstellen wir ein Element <div>: 



const Div = div({});


Sie können Elementen Attribute zuweisen, indem Sie ein Objekt mit Eigenschaften an die entsprechende Funktion übergeben: 



const Div = div({
    class: "DivClass"
});


Hier haben wir das Element beschrieben <div>, in dessen Attribut classder Wert geschrieben werden soll DivClass.



So erstellen Sie ein Textelement: 



const Text = text({ data: "A text node" });


Die Eigenschaft des dataan die Funktion übergebenen Objekts textenthält den Text für das Element.



Erstellen wir ein benutzerdefiniertes Element: 



const CustomEl = node("custom-el");


Um diesem Element ein Attribut zuzuweisen, haben Sie folgende Möglichkeiten: 



CustomEl({ "attr": "attr-value"})


Entwicklungen



Sie können Ereignishandler an Elemente anhängen, indem Sie ein Konstrukt verwenden, das ein Symbol verwendet @: 



function handleClick() {
    return {};
}
Moon.run(() => ({
    view: <button @click=handleClick>Click Me!</button>
}));


Infolgedessen wird auf der Seite eine Schaltfläche mit Text angezeigt, auf die Click Megeklickt wird, auf die die Funktion aufgerufen wird handleClick.



Komponenten



In Moon.js sind Funktionen Komponenten. Dies bedeutet, dass Funktionen in der Beschreibung der Schnittstellenelemente erwähnt werden können. Was die Funktion zurückgibt, wird in das Element aufgenommen.



Angenommen, wir haben eine Funktion wie diese: 



function aView({ data }) {
    return <div>A View</div>
}


Diese Funktion aViewgibt ein Element zurück, das gerendert werden kann: 



Moon.run(() => {
    view: <div><aView /></div>
})


Der Funktionsname wird in diesem Beispiel als Elementname verwendet. Als Ergebnis der Ausführung dieses Codes stellt sich heraus, dass das, was die Funktion zurückgibt, im Tag platziert wird <div>. Wenn sich all dies im DOM befindet, wird Folgendes angezeigt: 



<div>
    <div>A View</div>
</div>


Entwicklung von Anwendungen basierend auf Moon.js



Um alles zusammenzustellen, worüber wir gerade gesprochen haben, erstellen wir eine einfache TODO-Anwendung in Moon.js. Hier verwenden wir das entsprechende Beispiel , das von den Entwicklern von Moon.js erstellt wurde.



Ich möchte Sie daran erinnern, dass es empfohlen wird, beim Beherrschen neuer Bibliotheken und Frameworks mit ihrer Hilfe kleine Anwendungen zu erstellen. Auf diese Weise können Sie das Lernen beschleunigen und die Funktionen der untersuchten Tools besser verstehen. Zuerst sprechen wir über ihre Grundlagen, aber im Laufe der Zeit kommt ein Verständnis für komplexere Mechanismen.



So sieht die Seite dieser Anwendung aus.





Anwendungsseite



Die Seite enthält einen Titel, ein Feld, eine Schaltfläche und eine Aufgabenliste, die aufgefüllt werden können, indem Sie ihre Beschreibungen in das Feld eingeben und auf die Schaltfläche klicken.



Beginnen wir mit der Erstellung einer Dateiindex.html. Hier verbinden wir Moon.js direkt mit der Seite: 



<html>
<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/moon"></script>
<script src="https://unpkg.com/moon-browser"></script>
<!--  ,    -->
<script type="text/moon">
    function viewTodos({data, view}) {
        return (
            <div>
                <input type="text" value=data.todo @input=updateTodo/>
                <button @click=createTodo>Create</button>
                <ul children=(data.todos.map(todo =>
                    <li>{todo}</li>
                ))/>
            </div>
        )
    }
    function updateTodo({ data, view }) {
        const dataNew = { ...data, todo: view.target.value };
        return {
            data: dataNew,
            view: <viewTodos data=dataNew/>
        }
    }
    function createTodo({ data }) {
        const dataNew = {
            todo: "",
            todos: [...data.todos, data.todo]
        };
        return {
            data: dataNew,
            view: <viewTodos data=dataNew/>
        }
    }
    <!--   data  view -->
    Moon.use({
        data: Moon.data.driver,
        view: Moon.view.driver("#root")
    })
    <!--   -->
    Moon.run(() => {
        data: [],
        view: <viewTodos data=[]>
    })
</script>
</html>


Die Funktion viewTodoszeigt die Elemente an, die erforderlich sind, um Informationen zu neuen Fällen einzugeben und in einer Liste anzuzeigen. Ihre Argumente sind dataund view.



Die Funktion createTodoerstellt einen neuen Fall und gibt ihn in der Eigenschaft des zurückgegebenen dataObjekts zurück.



Die Funktion updateTodoschreibt einen neuen Fall in den Anwendungsstatus.



Achten Sie auf die Event - Handler @clickund @inputdas ist in der Funktion viewTodos. Das Ereignis @inputwird ausgelöst, wenn Sie in das entsprechende Feld Text eingeben, der den Fall beschreibt. Wenn dieses Ereignis verarbeitet wird, wird eine Funktion aufgerufen updateTodo. StreitviewIn dieser Funktion wird das aufgetretene Ereignis dargestellt. Damit greifen wir auf das DOM zu und erhalten die in das Feld eingegebenen Daten. Diese Daten werden dann als Eigenschaft in den Status eingegeben todo.



Das Ereignis @clickwird nach dem Klicken auf die Schaltfläche aufgerufen. Es zeichnet eine neue Aufgabenliste auf. Die Funktion wird verwendet, um dieses Problem zu lösen createTodo. Diese Funktion greift auf die Eigenschaft state zu todound schreibt neue Daten in die Eigenschaft. Anschließend todosgibt sie in der Eigenschaft des zurückgegebenen viewObjekts das Element zurück, <viewTodos>das durch die entsprechende Funktion dargestellt wird, in dessen Attribut datader Wert geschrieben wird dataNew.



Dadurch wird viewTodosdas DOM neu gerendert und aktualisiert. Der auf der Seite angezeigten Aufgabenliste wird ein neuer Fall hinzugefügt.



Führen Sie diese App in Ihrem Browser aus und experimentieren Sie damit.



Ergebnis



Wir haben die Grundlagen von Moon.js behandelt. Wir haben nämlich darüber gesprochen, dass Sie die Bibliothek verwenden können, indem Sie sie von NPM installieren und direkt mit den Seiten verbinden. Als nächstes diskutierten wir die internen Mechanismen der Bibliothek: Arbeiten mit Daten, Behandeln von Ereignissen, Entwickeln von Komponenten.



Moon.js scheint eine schöne Bibliothek zu sein. Und auch wenn ich nicht über seine anderen Vorteile sprechen möchte, ich mag es wegen seiner kompakten Größe.



Hast du Moon.js benutzt?









More articles:


All Articles