elm - 如何将大型 Elm 程序划分为更小的组件

Question

我想将程序的 View 和 Update 部分分成单独的源文件，但是，我如何共享 Message 和 Subscriptions 声明？

Answer 1

在拆分模块之前要三思，过早的代码拆分可能对您的项目有害。

这是 example我在 Elm 应用程序中使用的项目结构。

留言

Html.App.map允许我们为子组件标记消息，因此我们可以将其传递给 Components.Counter.Update.update函数，当键盘订阅发出消息时。

module App.View exposing (..)

import Html.App
import Html exposing (text, div, Html)
import App.Model exposing (Model)
import App.Messages exposing (..)
import Components.Counter.View


view : Model -> Html Msg
view model =
    div []
        [ Html.App.map Counter (Components.Counter.View.view model.counter) ]

订阅

要标记来自订阅的消息，我们必须使用 Platform.Sub.map

请查看 src/App/Subscriptions.elm 中的订阅传递示例

module App.Subscriptions exposing (..)

import App.Model exposing (Model)
import App.Messages exposing (..)
import Components.Counter.Subscriptions


subscriptions : Model -> Sub Msg
subscriptions model =
    let
        counterSub =
            Components.Counter.Subscriptions.subscriptions model.counter
    in
        Sub.batch [ Sub.map Counter counterSub ]

文件结构

Main.elm                 -- Entry point, where App is initialized
Utils.elm                -- Utilities
App/
    Messages.elm
    Model.elm
    Subscriptions.elm
    Update.elm
    View.elm
Components/
    StatefulComponent/
        Messages.elm
        Model.elm
        Subscriptions.elm
        Update.elm
        View.elm
    StatefulComponentWithCommands/
        Commands.elm     -- Functions, which return Cmd msg
        Messages.elm
        Model.elm
        Subscriptions.elm
        Update.elm
        View.elm
    StatelessComponent/
        View.elm