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檔案，該檔案可以執行想要的任何操作！例如：
<!DOCTYPE HTML><html><head>
<meta charset="UTF-8">
<title>Main</title>
<script src="main.js"></script></head><body>
<div id="elm"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById('elm')
});
</script></body></html>
首先載入編譯的Elm程式碼：
<script src="main.js"></script>
其次，在<body>文件中，執行一段JavaScript程式碼來初始化Elm程式：
<div id="elm"></div><script>var app = Elm.Main.init({node: document.getElementById('elm')
});</script>
建立一個空的<div>，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登報和訂閱了.
相關內容
- 用HTML、CSS和JavaScript寫移動應用，有哪些值得推薦的框架、工具或者庫？
- 前端學了HTML css javascript，下一步應該學什麼？
- 程式語言中，c#、Python、JavaScript哪一個更接近c語言？
- JavaScript、CSS、SQL和HTML到底算程式語言嗎？
- 學習前端，需要對javacript深刻學習嗎？還是隻要會在html中使用javascript就行？
- web前端中html，css和JavaScript這三個的關係是怎麼樣的？
- javaScript這種程式語言的前景如何，能像C語言或者java成為主流嗎？
- 零基礎的如何學好HTML+CSS+JavaScript？如何堅持學習？
- 如果我瞭解HTML、CSS和JavaScript，我可以建立什麼有趣的東西？
- javascript如何獲取function的形參？