0

0

Elm架构_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-21 08:48:56

|

1866人浏览过

|

来源于php中文网

原创

elm是一个能够编译成javascript的函数语言,它可以像react那样作为一个工具用来创建网站或网站应用,elm 非常简单 易用和优质。

Elm作为函数语言有以下特点:

1.没有运行时的错误,没有null. 没有undefined is not a function.

2.错误信息友好,能够帮助你更快速加入功能。

3.良好架构的代码意味着你的应用代码以良好的构架增长。

立即学习前端免费学习笔记(深入)”;

4.对所有Elm包自动执行语义版本。.

下面以一个计数器为案例:

import Html exposing (Html, button, div, text)import Html.App as Htmlimport Html.Events exposing (onClick)main =  Html.beginnerProgram { model = 0, view = view, update = update }type Msg = Increment | Decrementupdate msg model =  case msg of    Increment ->      model + 1    Decrement ->      model - 1view model =  div []    [ button [ onClick Decrement ] [ text "-" ]    , div [] [ text (toString model) ]    , button [ onClick Increment ] [ text "+" ]    ]

注意update和 view是完全解耦的,你可以以声明方式描述你的HTML,而Elm会负责与DOM打交道。

Elm是一个针对无限嵌套组件的简单模式,它非常模块化,易于代码重用和测试,能够帮助你方便创建复杂的Web应用。

每个Elm程序逻辑被划分为三个清晰部分:

来福FM
来福FM

来福 - 你的私人AI电台

下载

Model — 你的应用状态

Update — 更新状态的方式

View — 将状态作为HTML显示的方式

Elm架构是一种简单架构Web应用的模式,类似Redux一样声明,这也是它越来越流行的原因。

这个模式非常可靠,可以下面伪代码说明,每次使用只要填空细节就可以:

import Html exposing (..)-- MODELtype alias Model = { ... }-- UPDATEtype Msg = Reset | ...update : Msg -> Model -> Modelupdate msg model =  case msg of    Reset -> ...    ...-- VIEWview : Model -> Html Msgview model =  ...

更详细说明见: http://guide.elm-lang.org/architecture/index.html

Elm 0.17发布以后,引入了消息订阅通过Websocket获得后台状态,只需要两行代码就可以实现和后端服务器交互:

WebSocket.send "ws://echo.websocket.org" input

WebSocket.listen "ws://echo.websocket.org" NewMessage

第一句是向服务器发出数据,第二句是监听服务器的数据,数据内容在NewMessage,NewMessage内容会自动喂给update。

而如果使用Javascript实现这段通讯,将会是非常麻烦,你需要创建一个新的web socket!然后打开一个连接,但是还不能忘记加入对错误的监听,以便连接失败能够重新再连接,并且定义在没有连接时不要发消息(这属于运行错误),你还需要对消息队列化然后再发送,然后确定websocket能被使用并且关闭等等,这些都是涉及大量细节,而声明式编程就应该如上面两行代码直接声明使用,去除了大量技术细节。

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

6

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

13

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

31

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

18

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

10

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

44

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

5

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PostgreSQL 教程
PostgreSQL 教程

共48课时 | 7.1万人学习

Django 教程
Django 教程

共28课时 | 3.1万人学习

React 教程
React 教程

共58课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号