Elm Language
एल्म वास्तुकला
खोज…
परिचय
आपके एप्लिकेशन को बनाने के लिए अनुशंसित तरीका 'एल्म आर्किटेक्चर' है।
सबसे सरल प्रोग्राम में एक model रिकॉर्ड होता है जिसमें सभी डेटा संग्रहीत किया जा सकता है जिसे अपडेट किया जा सकता है, एक यूनियन प्रकार Msg जो आपके प्रोग्राम को उस डेटा को अपडेट करने के तरीकों को परिभाषित करता है, एक फ़ंक्शन update जो मॉडल और एक Msg लेता है और एक नया मॉडल देता है, और एक फ़ंक्शन view जो एक मॉडल लेता है और HTML आपके पृष्ठ को प्रदर्शित करेगा लौटाता है। जब भी कोई फ़ंक्शन Msg देता है, एल्म रनटाइम इसका उपयोग पेज को अपडेट करने के लिए करता है।
शुरुआती कार्यक्रम
Html में सीखने के उद्देश्यों के लिए ज्यादातर beginnerProgram है।
beginnerProgram सब्सक्रिप्शन संभालने या कमांड चलाने में सक्षम नहीं है।
यह केवल DOM ईवेंट से उपयोगकर्ता इनपुट को संभालने में सक्षम है।
इसे केवल राज्य परिवर्तनों को संभालने के लिए model और एक update फ़ंक्शन को प्रस्तुत करने के लिए एक view आवश्यकता होती है।
उदाहरण
beginnerProgram इस न्यूनतम उदाहरण पर विचार करें।
इस उदाहरण में model में एकल Int मान शामिल हैं।
update फ़ंक्शन की केवल एक शाखा होती है, जो model में संग्रहीत Int को Int ।
view मॉडल प्रस्तुत करता है और DOM ईवेंट पर क्लिक करता है।
देखें कि कैसे इनिशियलाइज़ में निर्माण करें और निर्माण करें
import Html exposing (Html, button, text)
import Html exposing (beginnerProgram)
import Html.Events exposing (onClick)
main : Program Never
main =
beginnerProgram { model = 0, view = view, update = update }
-- UPDATE
type Msg
= Increment
update : Msg -> Int -> Int
update msg model =
case msg of
Increment ->
model + 1
-- VIEW
view : Int -> Html Msg
view model =
button [ onClick Increment ] [ text ("Increment: " ++ (toString model)) ]
कार्यक्रम
program एक अच्छी पिक है, जब आपके आवेदन को आरंभीकरण के लिए किसी बाहरी डेटा की आवश्यकता नहीं होती है।
यह सब्सक्रिप्शन और कमांड को संभालने में सक्षम है, जो I / O को संभालने के लिए अधिक अवसर प्रदान करता है, जैसे कि HTTP संचार या जावास्क्रिप्ट के साथ इंटरोप।
प्रारंभिक अवस्था को मॉडल के साथ स्टार्ट-अप कमांड वापस करने की आवश्यकता होती है।
program आरंभ में model , view और update के साथ, subscriptions प्रदान करने की आवश्यकता होगी।
प्रकार देखें परिभाषा:
program :
{ init : ( model, Cmd msg )
, update : msg -> model -> ( model, Cmd msg )
, subscriptions : model -> Sub msg
, view : model -> Html msg
}
-> Program Never
उदाहरण
वर्णन करने का सबसे सरल तरीका, आप सदस्यता का उपयोग कैसे कर सकते हैं, जावास्क्रिप्ट के साथ एक सरल पोर्ट संचार सेटअप करना है।
देखें कि HTML में इनिशियलाइज़ कैसे करें और कैसे बनाएं / एम्बेड करें
port module Main exposing (..)
import Html exposing (Html, text)
import Html exposing (program)
main : Program Never
main =
program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
port input : (Int -> msg) -> Sub msg
-- MODEL
type alias Model =
Int
init : ( Model, Cmd msg )
init =
( 0, Cmd.none )
-- UPDATE
type Msg = Incoming Int
update : Msg -> Model -> ( Model, Cmd msg )
update msg model =
case msg of
Incoming x ->
( x, Cmd.none )
-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions model =
input Incoming
-- VIEW
view : Model -> Html msg
view model =
text (toString model)
<!DOCTYPE html>
<html>
<head>
<script src='elm.js'></script>
</head>
<body>
<div id='app'></div>
<script>var app = Elm.Main.embed(document.getElementById('app'));</script>
<button onclick='app.ports.input.send(1);'>send</button>
</body>
</html>
झंडे के साथ कार्यक्रम
programWithFlags program से केवल एक अंतर है।
यह जावास्क्रिप्ट से डेटा को स्वीकार कर सकता है:
var root = document.body;
var user = { id: 1, name: "Bob" };
var app = Elm.Main.embed( root, user );
जावास्क्रिप्ट से पारित डेटा को फ्लैग कहा जाता है।
इस उदाहरण में हम उपयोगकर्ता की जानकारी के साथ एक जावास्क्रिप्ट ऑब्जेक्ट एल्म के लिए भेज रहे हैं, यह झंडे के लिए एक प्रकार का उपनाम निर्दिष्ट करने के लिए एक अच्छा अभ्यास है।
type alias Flags =
{ id: Int
, name: String
}
झंडे को init फ़ंक्शन में पारित किया जाता है, प्रारंभिक स्थिति उत्पन्न करता है:
init : Flags -> ( Model, Cmd Msg )
init flags =
let
{ id, name } =
flags
in
( Model id name, Cmd.none )
आप इसके प्रकार के हस्ताक्षर से अंतर देख सकते हैं:
programWithFlags :
{ init : flags -> ( model, Cmd msg ) -- init now accepts flags
, update : msg -> model -> ( model, Cmd msg )
, subscriptions : model -> Sub msg
, view : model -> Html msg
}
-> Program flags
आरंभीकरण कोड लगभग समान दिखता है, क्योंकि यह केवल init फ़ंक्शन है जो अलग है।
main =
programWithFlags
{ init = init
, update = update
, view = view
, subscriptions = subscriptions
}
एक तरह से माता-पिता-बाल संचार
उदाहरण घटक संरचना और एक तरफ़ा संदेश माता-पिता से बच्चों को पारित करना दर्शाता है।
घटक रचना Html.App.map साथ संदेश टैगिंग पर निर्भर करती है
0.18.0 HTML.App HTML में ढह गया था
घटक रचना Html.map साथ संदेश टैगिंग पर निर्भर करती है
उदाहरण
देखें कि इनिशियलाइज़ेशन में कैसे निर्माण करें और निर्माण करें
module Main exposing (..)
import Html exposing (text, div, button, Html)
import Html.Events exposing (onClick)
import Html.App exposing (beginnerProgram)
main =
beginnerProgram
{ view = view
, model = init
, update = update
}
{- In v0.18.0 HTML.App was collapsed into HTML
Use Html.map instead of Html.App.map
-}
view : Model -> Html Msg
view model =
div []
[ Html.App.map FirstCounterMsg (counterView model.firstCounter)
, Html.App.map SecondCounterMsg (counterView model.secondCounter)
, button [ onClick ResetAll ] [ text "Reset counters" ]
]
type alias Model =
{ firstCounter : CounterModel
, secondCounter : CounterModel
}
init : Model
init =
{ firstCounter = 0
, secondCounter = 0
}
type Msg
= FirstCounterMsg CounterMsg
| SecondCounterMsg CounterMsg
| ResetAll
update : Msg -> Model -> Model
update msg model =
case msg of
FirstCounterMsg childMsg ->
{ model | firstCounter = counterUpdate childMsg model.firstCounter }
SecondCounterMsg childMsg ->
{ model | secondCounter = counterUpdate childMsg model.secondCounter }
ResetAll ->
{ model
| firstCounter = counterUpdate Reset model.firstCounter
, secondCounter = counterUpdate Reset model.secondCounter
}
type alias CounterModel =
Int
counterView : CounterModel -> Html CounterMsg
counterView model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, text (toString model)
, button [ onClick Increment ] [ text "+" ]
]
type CounterMsg
= Increment
| Decrement
| Reset
counterUpdate : CounterMsg -> CounterModel -> CounterModel
counterUpdate msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
Reset ->
0
Html.App.map के साथ टैगिंग संदेश
घटक अपने स्वयं के संदेशों को परिभाषित करते हैं, उत्सर्जित DOM इवेंट्स के बाद भेजे जाते हैं, जैसे। CounterMsg जनक-बच्चे संचार से
type CounterMsg
= Increment
| Decrement
| Reset
इस घटक का दृश्य CounterMsg प्रकार के संदेश भेजेगा, इसलिए दृश्य प्रकार हस्ताक्षर Html CounterMsg ।
मूल घटक के दृश्य के अंदर counterView का पुन: उपयोग करने में सक्षम होने के लिए, हमें माता-पिता के Msg माध्यम से प्रत्येक CounterMsg संदेश को पास करना होगा।
इस तकनीक को संदेश टैगिंग कहा जाता है।
माता-पिता घटक को बाल संदेशों को पारित करने के लिए संदेशों को परिभाषित करना चाहिए:
type Msg
= FirstCounterMsg CounterMsg
| SecondCounterMsg CounterMsg
| ResetAll
FirstCounterMsg Increment एक टैग किया गया संदेश है।
टैग किए गए संदेश भेजने के लिए counterView प्राप्त करने के लिए, हमें Html.App.map फ़ंक्शन का उपयोग करना चाहिए:
Html.map FirstCounterMsg (counterView model.firstCounter)
HTML.App पैकेज समाप्त हो गया है में HTML में पैकेज v0.18.0
टैग किए गए संदेश भेजने के लिए counterView प्राप्त करने के लिए, हमें Html.map फ़ंक्शन का उपयोग करना चाहिए:
Html.map FirstCounterMsg (counterView model.firstCounter)
यह प्रकार हस्ताक्षर Html CounterMsg -> Html Msg इसलिए माता-पिता के दृश्य के अंदर काउंटर का उपयोग करना संभव है और माता-पिता के अपडेट फ़ंक्शन के साथ राज्य अपडेट को संभालना संभव है।