如何将我的 Elm 视图代码分解为单独的文件？答案

【问题标题】：How do I break up my Elm view code into separate files?如何将我的 Elm 视图代码分解为单独的文件？
【发布时间】：2017-11-27 22:42:34
【问题描述】：

到目前为止，我所有的视图代码仍在我的主文件Main.elm 中。在该文件中，它的分解相对较好，视图的不同部分被适当地分解了。

我的问题：我真的很想把它分成单独的文件，例如： - Views/Header.elm - Views/InfoPage.elm - Views/Footer.elm - 等等

但我真的不清楚如何做到这一点。当然，我可以制作不同的文件并导入/导出我需要的功能。非常简单的视图（例如页脚）并不难，但我很快遇到了更复杂的问题views ~~其中大部分包含应用程序逻辑，即调用更新函数~~。当然，如果我随后将Msgs 导入到我的单独视图文件中，那么我会得到一个循环依赖。抱歉，如果这是一个幼稚的问题，但我该如何解决呢？我只是希望能够在不同的文件中有不同的页面部分，这样导航比永久滚动要容易得多。

我搜索并阅读了一些关于重构 Elm 应用程序的帖子 (for example)，但没有专门针对视图代码。谁能给我一些指示？如果不考虑它使用的应用程序逻辑，就不可能分解视图代码吗？（如果该应用程序逻辑也在其他地方使用呢？）我非常感谢这里的一些帮助。

【问题讨论】：

Richard Feldman 在 Elm Europe 2017 上的演讲 youtu.be/DoA4Txr4GUs 介绍了一些使视图可重用的方法。基本上你可以通过 Msg 来查看函数，这样他们就不需要在单独的文件中导入 Msg。
谢谢@ShuheiKagawa。我确实看过那个演讲，但仍然没有真正理解。我想我得再看一遍。即使类型可用，您是否仍然需要在不同的文件中导入Msg？
不，你不需要导入Msg。如果您将消息作为以小写字母开头的类型参数传递，那么您可以创建一个可以处理任何消息类型的函数。例如，myButton : msg -> Html msg 和 myButton msg = button [ onClick msg ] [ text "Hi" ] 可以与任何具体的 msg 类型一起使用，因为 onClick 本身可以与任何 msg 类型一起使用。你可以在一个单独的文件中使用它，比如myButton OneOfYourMsgConstructor。

标签： refactoring elm

【解决方案1】：

你可以按如下方式组织你的依赖：

      Model.elm (includes Model and Msg)
          ^        ^
          |        |
      View.elm  Update.elm
          ^        ^
          |        |
           Main.elm

您说您“遇到了更复杂视图的问题，其中大多数包含应用程序逻辑，即调用更新函数。”但视图不应包含应用程序逻辑，也不应调用更新函数。视图只需要声明Msg使用什么构造函数来处理各种事件，视图和更新就完全解耦了。

【讨论】：

嗨@la-yumba，谢谢。我写帖子时没有使用正确的术语——我的视图代码没有（也没有）包含对update的调用，而是使用Msgs，正如你所写的。我最终安排它有点类似于你上面显示的，虽然我的Main.elm 也导入了Model，目前我的Msg 联合类型生活在Update.elm。