html调用js文件函数_函数式编程中的战斗机(三)--elm调用javascript的flags方式
1.javascript的生态圈
编程语言种类众多,除了极少数用作娱乐的语言外,绝大多数编程语言都是图灵完备。虽然各有千秋,但是基本语法都相通。衡量一种编程语言的历史评价和成就,除了功能强大、表达简洁外,更重要的是使用范围,开发人群以及社区活跃度,即该种语言的生态圈。
最典型的例子如javascript,10日内创造出来的,动态类型、多范式、被誉为“玩具语言”。但时至今日,Javascript是世界上使用最广,开发者人数最多的编程语言。
每一个浏览器都有javascript的编译器,前后端可以开发。虽然1000个javascript程序员,可以编出1000种不同水平的代码。虽然被批评为先天发育不良,代码臃肿等种种名号。但是javascript就是长期占据编程语言榜的前几名,曾经问鼎,至今屹立不倒。
原因是javascript强大无比的生态圈,NPM上数百万个库,层出不穷的强大框架,Java比不上python也比不上。庞大的生态圈让javascript构建了令人敬畏的护城墙,在城池之内,各种框架和库能相互引用,利用前人的轮子构建强大具有生产力的产品。
著名的如vue的模版,react的组件,three.js的3D,乃至最新的tensorflow.js人工智能等。
2.elm语言与javascript生态圈的关系
elm虽然是一种独立的语言,但是他应用于生产力的方法,却是编译成为javascript语言投入前端,因此elm语言也属于javascript生态圈范围之内。elm语言能轻松地与javascript交互数据和信息。但是elm语言与java/conjure、python/c等交互方式又有所不同,它以javascript之间的调用、沟通与交互,就如同一对恋爱中又不点破那层窗纸的情侣一般。若即若离,心有灵犀,互有好感却始终保持距离。
3、elm与javscript语言间交互的方式
这里要讲一下语言间交互的方式,所谓交互,就是兼容,或者直接调用对方的库或函数,如java/conjure、python/c、haskell/c等。语言间的交互一般有如下两种方式,一,向下兼容,如C++是C的超集。typescript是javascript的超集等,子集可以直接在超集中运行、编译。二、调用对方的库和函数。
但是elm语言却是第三种方式,通过flags户口本方式和port登报方式进行。
elm和javascript两者不能直接饮用,也不能直接调用对方的库和函数,javascript生态圈如同一片广阔的国土,elm却是当中一块世外桃源般的王国。王国周围有着强大坚不可摧的城墙,无门无窗,与外界通信的唯一渠道就是户口本和登报。
民众要通讯,可以查看户口本、也可以报纸上登报。注意这里的通讯与HTTP的get、post不一样,http马上可以收到回复,通讯是双向的,elm的flags和port。却是一种单向通信,可以理解为向外传播信息,只有在外界javascript世界订阅报纸的人才能看到。反之,elm王国里的人想了解外界的信息,也必须通过订阅来实现。
4.elm语言与javascript交互的方式之一户口本(flags)
4.1 flags户口本的机制实现。
flags,类似于出生证或户口本,每个elm公民在王国初始化的时候都会有这样一个flags,出生时自然有,无需订阅,可以直接查阅。
4.2 前期准备初始化
初始化Elm程序
elm make src/Main.elm
会产生一个index.html文件,可以直接打开。如果要进入JavaScript交互操作,则要生成js文件:
elm make src/Main.elm --output=main.js
产生一个名为 main的js文件。因此,一旦有了main.js就可以编写自己的HTML文件,该文件可以执行想要的任何操作!例如:
Main
首先加载编译的Elm代码:
其次,在
文档中,运行一段JavaScript代码来初始化Elm程序:
创建一个空的
4.3 尝试用flags户口本方式调用javascript
如果想调用javascript当前时间,可以在HTML的script代码中加上 flags: Date.now(),flags就是户口本的标志,而Date.now()是纯粹javascript的功能函数。
var app = Elm.Main.init({
node: document.getElementById('elm'),
flags: Date.now()
});
4.4 在elm语言中处理flags传来的数据信息
elm语言中的Browser.element函数提供了一种处理户口本的方法init:
element :
{ init : flags -> ( model, Cmd msg )
, update : msg -> model -> ( model, Cmd msg )
, subscriptions : model -> Subs msg
, view : model -> Html msg
}
-> Program flags model msg
其中init有一个名为的参数flags,对应着外界javascript初始化时的flags: Date.now()
。可以编写如下init函数:
init : Int -> ( Model, Cmd Msg )
init currentTime =
--处理传入Int的功能函数。
这实现了Elm代码直接访问从JavaScript传入的户口本数据信息并实现处理。
5 小结
本文摘要讨论了elm语言与javascript语言间交互和调用的方法和特点,并用代码实现了交互调用的第一种方式flags(户口本)方式。需要注意的是:户口本方式只适用于程序刚开始初始化时固定下来的静态数据信息传递,如果在程序运行过程中则要运用到第二种方式port登报和订阅了.
html调用js文件函数_函数式编程中的战斗机(三)--elm调用javascript的flags方式相关推荐
- elm具体实现过程_函数式编程中的战斗机(二)---elm语言MUV设计模式应用实例...
1 elm语言设计模式的特点 1.1 面向对象设计模式的特点 每种编程语言都有其独特的语法和优缺点,从而导致与众不同的设计模式和固定架构.面向对象编程因其竭力接近和模拟现实世界的多态和继承,导致面向对 ...
- [js] 纯函数和函数式编程有什么关系?
[js] 纯函数和函数式编程有什么关系? 函数式编程是一种编程思想,纯函数是这种思想的基本要实现函数式编程,我们所封装的方法应该是抽象的,应该是和外部状态无关系的,也就需要是纯函数的,这样才能保证抽象 ...
- 函数式编程中的战斗机--elm编写实例(薛定鄂的猫
函数式编程中的战斗机--elm编写实例(薛定鄂的猫) 1.初始设置 2.薛定谔的猫 3.定义规则 4.建立模型 5.建立更新模型的逻辑 6.构建前端界面 7.连接代码 8.运行程序 1.初始设置 今天 ...
- 函数式编程中的战斗机(二) --运用elm语言MUV设计模式做一个简单的应用实例
@函数式编程中的战斗机(二) -运用elm语言MUV设计模式做一个简单的应用实例 1 elm语言设计模式的特点 1.1 面向对象设计模式的特点 每种编程语言都有其独特的语法和优缺点,从而导致与众不同的 ...
- go 调用其他文件函数_一文读懂Go中软件包概念
Go编程语言的软件包管理和部署的完整概述 如果您熟悉Java或NodeJS之类的语言,那么您可能非常熟悉软件包. 包不过是带有一些代码文件的目录,该目录从单个引用点公开了不同的变量(功能). 让我解释 ...
- go 调用其他文件函数_一篇文章让你了解Go语言中方法Methods的使用内幕
概述 Go语言中的方法只不过是一个带有接收器的函数.接收器是某个特定类型(如struct)的实例,或是任何其他自定义类型的实例.所以基本上,当你把函数附加到类型上时,该函数就成为这个类型的一个方法.方 ...
- go 调用其他文件函数_【C# 调用 Go 语言】0x1 Hello Golang
C# 和 Golang 都不是世界上最好的语言.在不同的业务场景下,C# 和 Golang 各有所长.如果要编写一个网络程序,显然 Golang 更擅长,而如果要编写一个桌面 GUI 程序,那么 C# ...
- onclick如何调用含参函数_在 golang 中如何调用私有函数(绑定隐藏的标识符)
名字在 golang 中的重要性和在其他任何一种语言是一样的.他们甚至含有语义的作用:在一个包的外部某个名字的可见性是由这个名字首字母是否是大写来决定的. 有时为了更好的组织代码或者在其他包使用某些隐 ...
- python函数式编程什么意思_函数式编程中“部分函数”到底是什么意思?
答案说明了一切,我将在每种语言中添加一个示例:def add(x,y): return x+y f = add(1) print(f(3)) f = add(1) TypeError: add() m ...
- 函数式编程中的组合子
函数式编程是一个比较大的话题,里面的知识体系非常的丰富,在这里我并不想讲的特别的详细.为了应对实际中的应用,我们讲一下函数式编程中最为实用的应用方式--组合子.组合子本身是一种高阶函数,他的特点就是将 ...
最新文章
- Linux下基于socket多线程并发通信的实现
- pandas内容像日期的数据如何变成真DataTime,并赋予时间类似的操作
- 【五校联考3day2】A
- 算法系列之赫夫曼编码实战一【数据压缩、数据解压】
- php统计凌晨6点,凌晨是哪一段时间,0:00-6:00(午夜到天亮前)
- 数据结构——二叉树的递归算法
- 在asp.net中调用process.start执行程序
- 编程体系结构(03):Java集合容器
- 检测电脑硬件的软件_慎用优化软件 不然I7也会卡
- TensorFlow2.0:误差计算
- struts 标签导入
- 集合类接口和类层次关系图
- matlab显示图像频谱
- 方法2:U盘,WEPE辅助安装系统
- spring三级缓存
- 制作svg格式矢量图
- 几个例子理解博弈论与纳什均衡
- 常见机器学习算法适合使用的业务场景汇总(1)
- 项目运行时报错出现:因为在此系统上禁止运行脚本有关详细信息,请参阅 https。该如何解决
- Linux基础——防火墙(一)
热门文章
- 积累的VC编程小技巧之工具条和状态条
- 小菜鸟一步步打造图书馆外挂之十六:手动启动入口的实现
- mybatis-plus 自定义QueryWrapper(一)实现查询函数
- Spring Cloud Sleuth链路跟踪之使用RabbitMQ异步收集链路跟踪信息(学习总结)
- 微信小程序事件绑定无效
- 安装keepalived高可用(双实例)
- LNMP环境下搭建wordpress
- MySQL 安装 [mysql-5.6.37]
- Ubuntu 16.04错误:The update information is outdated this may be caused by network...的问题解决...
- 虚拟机 linux 设置IP 常用命令