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 可以在里面输入她的猜测,还会有一段文字,说明框里的文字是不是回文。 每当文本框里的文字发生变化时,这段文字都会更新。
Model和Msg类型,并编写init函数应用的Model需要保存要检查的字符串,这个字段应该叫content。
应用需要一个Msg来表示文本框里的文字发生了变化。
它的变体应该叫Change。
init函数应该返回一个初始的Model值,其中content字段为空。
update函数应该接收Msg和Model两个参数,并返回一个新的Model。
这个Msg会携带用户输入的一些文字,新的Model应该包含这些文字。
Elm 要求 view 函数必须返回 Html msg 类型,这意味着 view 函数需要返回单个元素,而不是一个元素数组。
在这个根元素里,应该有一个input元素(也就是文本框),还有一个带text内容的div,用来说明input里的文字是不是回文。
这段文字应该是“This is a palindrome”或者“Not a palindrome”。
main函数应该调用Browser.sandbox,并传入一个包含init、update和view函数的记录参数。
为了让这个练习能在 Exercism 在线编辑器上运行,我们在代码里使用了一个假的Browser.sandbox。
这不会影响你为解决这个练习所写的代码。