Sprechen Sie über Elm .
Elm ist eine funktionale Programmiersprache für die Frontend-Entwicklung. Die Syntax ähnelt Haskell, ist jedoch erheblich vereinfacht und spezialisiert. Elm-Quellcode wird in natives JavaScript kompiliert. Kompiliertes JavaScript enthält Anwendungscode, der den DOM-Teilbaum steuert.
Ulme. Bequem und umständlich. Zusammensetzung
Ulme. Bequem und umständlich. Json.Encoder und Json.Decoder
Ulme. Bequem und umständlich. HTTP, Aufgabe
Das Hauptelement in der Architektur der Elm-Sprache ist die Anwendung. Im Allgemeinen enthält jede Anwendung:
- Staat oder Modell. Daten, die den aktuellen Status der Anwendung beschreiben;
- Viele gültige Nachrichten. Nachrichten werden gesendet, wenn Ereignisse auftreten (z. B. wenn auf eine Schaltfläche geklickt wird) und an die Aktualisierungsfunktion gesendet.
- Eine Ansichtsfunktion, die basierend auf dem Status einen neuen DOM-Baum generiert.
- Die Aktualisierungsfunktion, die ein Modell und eine Nachricht aufnimmt und ein neues Modell und die erforderlichen Effekte zurückgibt.
- Abonnementfunktion, Abonnement für Ereignisbenachrichtigungen. Im Kern der Sprache gibt es Abonnements für den Timer, WebSocket und mehr.
Tippen
Alles muss getippt werden. Infolgedessen Überprüfung der statischen Codekonsistenz. Wenn kompiliert, sollte es funktionieren. Aber es wird funktionieren, wie Sie es erwarten oder nicht - keine Garantien. Dies vereinfacht das Refactoring erheblich.
Modell
Das Modell ist ein benutzerdefinierter Typ. Benutzerdefinierte Typen werden erstellt aus:
- Typ Aliase zur Beschreibung von Strukturen;
- Union Types zur Beschreibung gültiger Typzuordnungen;
- Grundtypen Int, String und andere.
Mit Union-Typen können Sie markierte Typen deklarieren. Nehmen Sie zum Beispiel eine Beschreibung des Benutzertyps:
type User = Anonymous | User String
Der deklarierte Typ enthält Informationen über den Benutzertyp und seine Daten, sofern dieser autorisiert ist. Ansonsten ist der Benutzer anonym.
Die Grenze
Die Grenze zwischen Elm-Laufzeit und der externen Umgebung durch Decoder. Decoder (Json.Decode) ist eine Funktion, die JSON akzeptiert und einen Elm-Typ zurückgibt. Während der Ausführung von Json.Decode.decodeString oder Json.Decode.decodeValue werden die Struktur der Eingabedaten und der Typ überprüft.
Der Decoder gibt einen Ergebnistyp zurück , der bei Erfolg Daten oder einen Fehler enthält.
Anzeigen
Eine Ansicht ist eine Statusfunktion, die Informationen zum Generieren eines DOM-Baums zurückgibt. Ein Beispiel:
view : Model -> Html.Html Msg view model = case model.user of Anonymous -> Html.div [] [ Html.text “Anonymous” ] User name -> Html.div [] [ Html.text (“Welcome ” ++ name) ]
Funktionen werden zum Generieren von DOM-Knoten verwendet. In Kampfprojekten ist Ansicht eine Zusammensetzung von Funktionen einer allgemeineren Ordnung. Zum Beispiel:
view : Model -> Html.Html Msg view model = case model.user of Anonymous -> anonymousView User name -> userView name
anonymView und userView sind Benutzerfunktionen, die kleine Teile der Benutzeroberfläche generieren.
Mutationen (Update)
Alle Ereignisse (Benutzeraktionen, Netzwerk usw.) generieren Nachrichten, die an die während der Initialisierung registrierte Funktion übermittelt werden. Standardmäßig heißt diese Funktion update. Die Funktion nimmt ein Ereignis und ein Modell und gibt ein neues Modell und neue Befehle zurück. Befehle werden zur Laufzeit von Elm ausgeführt und können auch Ereignisse generieren.
Beispiel: Inkrementieren einer Variablen beim Drücken einer Taste:
update : Model -> Msg -> (Model, Cmd Msg) update model msg = case msg of OnClick -> ({model | clicked = model.clicked + 1}, Cmd.none)
Abonnieren
Das Abonnieren von Ereignissen erfolgt beim Start der Anwendung und wird bei jedem Modellwechsel erneut aufgerufen.
Wenn ein Ereignis eintritt, werden sie an die Aktualisierungsfunktion übergeben.
Zum Beispiel ein Abonnement für einen Timer mit einem Zeitraum von 10 Sekunden. Bei Erreichen von 10 Sekunden wird eine Tick-Nachricht generiert und an die Update-Funktion gesendet:
subscribe : Model -> Sub Msg subscribe model = Time.every 10 Tick
Quellen