轨道
/
Elm
Elm
/
练习
/
保拉的回文
保拉的回文

保拉的回文

学习练习

简介

网页应用

Elm 是一门令人愉悦的语言,适合构建可靠的网页应用。它有友好的错误提示、出色的性能、很小的资源体积,而且没有运行时异常。

Elm 中最著名、被借鉴最多的部分,大概就是 The Elm Architecture。它是一个用来组织网页应用的简单模式,所有 Elm 网页应用都是这样写出来的。

核心思想是,你的代码围绕这几样东西构建:表示应用状态的 Model、更新模型的 update,以及查看模型的 view。

Model 保存应用的状态,也就是应用需要的所有数据。设想一个简单的应用,它有一个文本框,还有一行显示该文本反转结果的文字,那么模型大概如下所示。你也可以在 Elm 指南 中看到这个示例。

type alias Model =
  { text : String
  }

update 是一个函数,当发生变化时(比如用户点击按钮),它会被调用并接收一个 Msg。它接收 Msg 和当前的 Model,并返回一个新的 Model。

type Msg
  = TextChanged String

update : Msg -> Model -> Model
update msg model =
  case msg of
    TextChanged newText ->
      { model | text = newText }

view 是一个函数,它返回要在浏览器中展示给用户的 HTML。它接收当前的 Model,并返回一个 Html Msg(Elm 用来表示 HTML 的类型)。

view : Model -> Html Msg
view model =
  Html.div []
    [ Html.input
      [ Html.Attributes.placeholder "Text to reverse"
      , Html.Attributes.value model.text
      , Html.Events.onInput TextChanged
      ]
      []
    , Html.div [] [ Html.text (String.reverse model.text) ]
    ]

说明

你的朋友 Paula 正在努力提高自己解填字游戏线索的水平。她读到过,有些线索表明答案是回文。 回文是指正着读和倒着读都一样的单词或句子。

她请你帮她写一个非常简单的网站,用来检查一个字符串是不是回文,这样她就能验证自己的猜测。

你决定用一个 Elm [sandbox][browser-sandox] 应用来实现。

这个应用会有一个文本框,Paula 可以在里面输入她的猜测,还会有一段文字,说明框里的文字是不是回文。 每当文本框里的文字发生变化时,这段文字都会更新。

1. 为应用定义Model和Msg类型,并编写init函数

应用的Model需要保存要检查的字符串,这个字段应该叫content。

应用需要一个Msg来表示文本框里的文字发生了变化。 它的变体应该叫Change。

init函数应该返回一个初始的Model值,其中content字段为空。

2. 编写 update 函数

update函数应该接收Msg和Model两个参数,并返回一个新的Model。 这个Msg会携带用户输入的一些文字,新的Model应该包含这些文字。

3. 编写 view 函数

Elm 要求 view 函数必须返回 Html msg 类型,这意味着 view 函数需要返回单个元素,而不是一个元素数组。

在这个根元素里,应该有一个input元素(也就是文本框),还有一个带text内容的div,用来说明input里的文字是不是回文。

这段文字应该是“This is a palindrome”或者“Not a palindrome”。

4. 编写 main 函数

main函数应该调用Browser.sandbox,并传入一个包含init、update和view函数的记录参数。 为了让这个练习能在 Exercism 在线编辑器上运行,我们在代码里使用了一个假的Browser.sandbox。 这不会影响你为解决这个练习所写的代码。

通过 GitHub 编辑 链接将在新窗口或新标签页中打开
Elm Exercism

准备好开始 保拉的回文 了吗?

注册 Exercism,借助 28 个概念110 个练习 和真人导师指导,学习并掌握 Elm,全部免费。