elm具体实现过程_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程序：

创建一个空的

，Elm程序完全接管该节点，并将其交给Elm.Main.init启动程序。

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登报和订阅了。