锐客网

  1. 首页 > 睿知 > >

elm模型案例 elm模型的基本原则( 二 )

生活知识经验知识


上述代码中 。咱们处理了 。房间由开门转为关门时模型的更新代码：
DisplayingRoom Closed alarmState 其中alarmState是内含了毒药陷阱触发或没有被触发两种状态的变量 。确保门由开转关时 。毒药陷阱的状态可以原封不动地转移到新的模型上 。
_ -> Failure "问题 。观测不到！" 这就是一个兜底代码 。确保无法获取监测状态时返回一个消息通知 。这种考虑周全的机制 。也是elm编译运行不出错的优势 。
第二步 。让咱们添加门关时的更新逻辑 。较为复杂 。打开门时 。里面涉及到锁的状态、毒药陷阱的状态 。
在门关的前提下 。如果接到开门的消息 。那么要检测毒药陷阱的状态 。触发或没有触发 。因为毒药陷阱的状态 。关系到猫的死活 。如果毒药陷阱一直不被触发 。猫仍然存活 。但这些在未打开房门的情况下 。咱们是无法监测而至的 。现在添加门关情况下的代码 。
Closed ->casemsg ofOpen ->case alarmState ofArmed ->DisplayingRoom Opened Triggered_ ->DisplayingRoom Opened alarmStateLock ->DisplayingRoom Locked alarmStateArm ->DisplayingRoom Closed ArmedDisarm ->DisplayingRoom Closed Disarmed_ -> Failure "问题 。观测不到！" 第三步 。让咱们添加门锁住情况下的更新代码：
Locked ->case msg ofUnlock ->DisplayingRoom Closed alarmStateArm -> DisplayingRoom Locked ArmedDisarm -> DisplayingRoom Locked Disarmed_ -> Failure "问题 。观测不到！" 好了 。咱们代码中最重要的引擎 。update更新函数完成了 。下一步是把更新后的模型通过UI视图显示出来 。这对于elm来探讨轻而易举 。因为它本身就是为了构建前端而生 。

elm模型案例 elm模型的基本原则

文章插图
6.构建前端界面elm有一个html库 。它使咱们可以在elm中编写HTML代码：
import Html exposing (..) 现在通过来引入这个库 。为简单起见 。这里只是把房间的状态用文字在html界面中展示出来：
首先建立一个failure情况下的显示函数：
failure message =div [][ p [] [ "问题 。观测不到！" ] ] 然后把各种状态组合用文字展示出来 。这里要注意的是 。遵从房间规则 。门关时的状态要有两个可能的消息 。但是门开时只要一条消息即可 。最后UI界面代码如下：
View: Model -> Html Msgview model =Case model ofFailure message =div []p [] [ "问题 。观测不到！" ] ]DispalyingRoom doorState alarmState=div [][case doorState ofOpened ->Div [][ p [] [ "门开-> 关门！" ] ]Closed =Div [][ p [] [ "门关-> 开门！" ] ]Locked =Div [][ p [] [ "门锁-> 开锁！" ] ]],div [][ case alarmState ofArmed ->Div [][ p [] [ "毒药陷阱被触发-> 开门！" ] ]disArmed ->Div [][ p [] [ "毒药陷阱没有触发-> 毒药陷阱被触发！" ] ]Triggered ->Div [][ p [] [ "拔掉保护安全险丝-> 毒药陷阱被触发/毒药陷阱没有触发！" ] ]] 为简单起见 。这里只用文字显示作为HTML的内容 。但elm的HTML库还有许多强大的功能 。可以与react的JSX比美 。下回咱们再尝试构建更绚丽的图象或动作漫画显示房间状态 。
7.连接代码模型、更新、界面代码已经写好 。剩下的是把这几部分连接起来 。咱们需要ELM的主核心Browser模块里面的沙箱sandbox：
Import Browser exposing (..) 沙箱允许您创建使用elm架构的应用软件程序 。但不会与”外部世界”对话（即任何外部的API或javaScript 。如果需要与外部世界对话可以用Browser.element或其它） 。建立沙箱前咱们还要声明一下房间的初始状态 。假说为门已经关闭、猫已经放入、毒药陷阱的保护安全险丝已经拔开 。
initialModel : ModelinitialModel = DisplayingRoom Closed Armedmain : Program () Model Msgmain = Browser.sandbox{ init = initialModel, view = view, update = update} 8.运行驶路程序
在终端中运行命令：
Elm make src/main.elm Elm make 是elm的编译器命令 。它把main.elm编译成一个html文件 。可以用浏览网址软件打个这个html文件 。让咱们作为观察者 。通过开门、关门的点击操作来模拟这个薛定谔的猫的实验 。
【elm模型案例 elm模型的基本原则】（备注：本周写的文章学习了尼莫的《我希望有的榆木示例》思路 。三体状态不容易描述 。用javascript写估计一大堆代码 。elm容易读些 。薛定谔的猫实验因为涉及到不确定性 。应该还要引入随机发生器 。有期间再长久以来改进 。)

推荐阅读


上一篇：有什么工作适合女性在家兼职的呀？

下一篇：有什么适合宝妈做的兼职可以推荐？