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

Question

我想将程序的视图和更新部分分离为单独的源文件，但是，如何共享消息和订阅声明？

Answer 1

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

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

消息

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

Answer 2

Elm程序可逐步拆分为多个文件，如下所示：

• 将消息声明和相关类型提取到Messages.elm

  1. 在import Messages exposing (..)中添加Main.elm。
  2. 编译并测试。

• 将模型声明和初始化提取到Models.elm。

  1. 在import Messages exposing (..)。
  中添加Models.elm
  2. 在import Models exposing (..)
  中添加Main.elm
  3. 编译并测试

• 将view函数提取到View.elm。

  1. 在import Messages exposing (..)。
  中添加View.elm
  2. 在import Models exposing (..)
  中添加View.elm
  3. 在import View exposing (..)
  中添加Main.elm
  4. 编译并测试

结束时，Main.elm仍然拥有订阅和更新部分。它们可以被类似地提取出来。

请参阅github.com/sporto/elm-tutorial-app/tree/master/src上的示例，以及elm-tutorial.org/en/05-resources/01-intro.html处的相应教程。