elm調用javascript的flags方式

.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登報和訂閱了。

你一個div，你能用CSS繪制一個正三角形、正方形、正五邊形、正六邊形、正七邊形、正八邊形嗎？

今天我們來玩一個有趣的CSS實驗，想象下，只用一個div，你能用CSS繪制一個正三角形、正方形、正五邊形、正六邊形、正七邊形、正八邊形嗎？今天筆者帶著大家一起動手實踐下這個有趣的聯系，由于正多邊形用到不少三角函數計算，為了方便計算，這里正多邊形統一設定為100px，為啥只做到正八邊形？因為就一個div最多只能做到正八邊形。

正三角形

正三角形不需要用到偽元素，只需要設定div本身的邊框寬度即可產生，先來看一下正三角形的邊長與中線，若邊長為100px，則中線四舍五入就是87px ( 100 x sin(60)=87 )。

因此我們要將div的長寬都設為0，接著把底部border的寬度設為87px，左右的border寬度設為50px (顏色設為透明transparent )，就可以做出一個漂亮的三角形。

width:0;
height:0;
border-width:0 50px 87px ;
border-style:solid;
border-color:transparent transparent #095;

正方形

正方形應該是最簡單的，只要設定長寬設定為同樣數值就可以了，不過其實還有另外兩種方法，第一種你可以把長寬設為0，把上下左右的border設為50px也可以，第二種則是高度設為0，寬度設為100px，然后某個邊寬也設為100，都是可以的。

.a{
width:100px;
height:100px;
background:#c00;
}
.b{
width:0;
height:0;
border-width:50px;
border-style:solid;
border-color:#095;
}
.c{
width:100px;
height:0;
border-width:0 0 100px;
border-style:solid;
border-color:#069;
}

正五邊形

正五邊形就需要進入基本的三角函數領域了，其實知道了原理還是蠻簡單的。讓我們先把正五邊形分解，用原本的div作為上方的三角形，然后用一個偽元素制作下方的梯形，因為正五邊形每邊的夾角為108度，所以可以藉由三角函數計算出上方三角形的高度為59px ( 100 x cos(54) )，寬度為192px ( 100 x sin(54) x 2 )，下方梯形的高度為95px ( 100 x sin(72) )，長邊的寬度跟上面的三角形一樣都是192px。

了解原理之后，就可以利用偽元素來搭配制作啰！

.a{
 position:relative;
 width:0;
 height:0;
 border-width:0 81px 59px;
 border-style:solid;
 border-color:transparent transparent #069;
}
.a:before{
 position:absolute;
 content:"";
 top:59px;
 left:-81px;
 width:100px;
 height:0;
 background:none;
 border-width:95px 31px 0;
 border-style:solid; 
 border-color:#069 transparent transparent;
 }

正六邊形

正六邊形的每個夾角是120度，如果以純CSS的方向來看的話，就是把正五邊形上面的三角形改變一下，就可以做出正六邊形，也就是變成上下兩個梯形的組合而已，梯形的長邊為200px ( 100 x cos(60) x 2 + 100 )，梯形的高度為87px ( 100 x sin(60) )。

所以只要把正五邊形的CSS稍作修改就可以做出正六邊形了。

.a{
 position:relative;
 width:100px;
 height:0;
 border-width:0 50px 87px;
 border-style:solid;
 border-color:transparent transparent #f80;
}
.a:before{
 position:absolute;
 content:"";
 top:87px;
 left:-50px;
 width:100px;
 height:0;
 background:none;
 border-width:87px 50px 0;
 border-style:solid; 
 border-color:#f80 transparent transparent;
 }

正七邊形

正七邊形開始就必須再使用after 這個偽元素了，因為正七邊形必須要拆解為三個區塊，分別是用原本的div 作為上面的三角形，一個偽元素作為中間的梯形，然后另一個偽元素作為底部的梯形，正七邊形的夾角比較特殊不是整數，而是128又4/7 度，大概取到小數第二位是128.57，所以計算起來結果就如下圖所示，重點就是必須要清楚地知道長寬是多少。

有了長寬之后，就開始用CSS來寫啰！

.a{
 position:relative;
 width:0;
 height:0;
 border-width:0 90px 43px;
 border-style:solid;
 border-color:transparent transparent #09c;
}
.a:before{
 position:absolute;
 content:"";
 top:140px;
 left:-112px;
 width:100px;
 height:0;
 border-width:78px 62px 0;
 border-style:solid; 
 border-color:#09c transparent transparent;
 }
 .a:after{
 position:absolute;
 content:"";
 top:43px;
 left:-112px;
 width:180px;
 height:0;
 border-width:0 22px 97px;
 background:none;
 border-style:solid;
 border-color:transparent transparent #09c;
 }

正八邊形

正八邊形其實就是把正七邊形上面的三角形變成梯形，然后中間的梯形變成矩形就搞定了，正八邊形的夾角為135 度，計算出來的各個區域長寬如下圖。

同樣的了解原理，CSS做起來就簡單多啰！

.a{
 position:relative;
 width:100px;
 height:0;
 border-width:0 71px 71px;
 border-style:solid;
 border-color:transparent transparent #f69;
}
.a:before{
 position:absolute;
 content:"";
 top:171px;
 left:-71px;
 width:100px;
 height:0;
 border-width:71px 71px 0;
 border-style:solid; 
 border-color: #f69 transparent transparent;
 }
 .a:after{
 position:absolute;
 content:"";
 top:71px;
 left:-71px;
 width:242px;
 height:0;
 border-width:0 0 100px;
 background:none;
 border-style:solid;
 border-color:transparent transparent #f69;
 }

加點料：動起來！

以上就是純粹利用CSS做出來的單一div的正多邊形變換，是不是很好玩，一個div能做出來這么多形狀，是不是很過癮，不過癮的話，我們加點料來點動畫，其實加上動畫效果，就可以做出像下面范例這個樣子的變換動畫啰！不過下面的范例筆者再最外層另外用一個div進行包裹，避免因為大小的變換造成銜接處的不自然，大家可以參考看看喔！

css部分

 body{
 margin:100px;
 }
 .s{
 position:absolute;
 -webkit-animation:s 5s infinite linear alternate;
 }
 .a{
 position:relative;
 width:0;
 height:0;
 border-width:0 50px 87px ;
 border-style:solid;
 border-color:transparent transparent #095;
 -webkit-animation:a 5s infinite linear alternate;
 }
 .a:before,.a:after{
 position:absolute;
 content:"";
 border-width:0;
 border-style:solid;
 }
 .a:before{
 -webkit-animation:ab 5s infinite linear alternate;
 }
 .a:after{
 -webkit-animation:af 5s infinite linear alternate;
 }
 @-webkit-keyframes a{
 0%,5%{
 width:0;
 height:0;
 border-width:0 50px 87px ;
 border-color:transparent transparent #095;
 }
 23%{
 width:0;
 height:0;
 border-width:0 50px 0 ;
 border-color:transparent transparent #c00;
 }
 42%{
 width:0;
 height:0;
 border-width:0 81px 59px;
 border-color:transparent transparent #069;
 }
 61%{
 width:100px;
 height:0;
 border-width:0 50px 87px;
 border-color:transparent transparent #f80;
 }
 80%{
 width:0;
 height:0;
 border-width:0 90px 43px;
 border-color:transparent transparent #09c;
 }
 95%,100%{
 width:100px;
 height:0;
 border-width:0 71px 71px;
 border-color:transparent transparent #f69;
 }
 }
 @-webkit-keyframes ab{
 0%,5%{
 top:87px;
 left:-50px;
 width:100px;
 height:0;
 background:#095;
 border-width:0;
 border-color:#095 transparent transparent;
 }
 22.99%{
 top:0;
 left:-50px;
 width:100px;
 height:100px;
 background:#c00;
 border-width:0;
 border-color:#c00 transparent transparent;
 }
 23%{
 top:0;
 left:-50px;
 width:100px;
 height:0;
 background:none;
 border-width:100px 0 0;
 border-color:#c00 transparent transparent;
 }
 42%{
 top:59px;
 left:-81px;
 width:100px;
 height:0;
 background:none;
 border-width:95px 31px 0;
 border-color:#069 transparent transparent;
 }
 61%{
 top:87px;
 left:-50px;
 width:100px;
 height:0;
 border-width:87px 50px 0;
 border-color:#f80 transparent transparent;
 }
 80%{
 top:140px;
 left:-112px;
 width:100px;
 height:0;
 border-width:78px 62px 0;
 border-color:#09c transparent transparent;
 }
 95%,100%{
 top:171px;
 left:-71px;
 width:100px;
 height:0;
 border-width:71px 71px 0;
 border-color: #f69 transparent transparent;
 }
 }
 @-webkit-keyframes af{
 0%,61%{
 top:87px;
 left:-50px;
 width:200px;
 height:0;
 border-width:0;
 background:none;
 border-color:transparent transparent #f80;
 }
 80%{
 top:43px;
 left:-112px;
 width:180px;
 height:0;
 border-width:0 22px 99px;
 background:none;
 border-style:solid;
 border-color:transparent transparent #09c;
 }
 95%,100%{
 top:71px;
 left:-71px;
 width:242px;
 height:0;
 border-width:0 0 100px;
 background:none;
 border-style:solid;
 border-color:transparent transparent #f69;
 }
 }
 @-webkit-keyframes s{
 0%,5%{
 -webkit-transform:translateX(0) translateY(0) scale(1);
 }
 23%{
 -webkit-transform:translateX(-15px) translateY(-10px) scale(.9);
 }
 42%{
 -webkit-transform:translateX(-50px) translateY(-20px) scale(.8);
 }
 61%{
 -webkit-transform:translateX(-70px) translateY(-25px) scale(.7);
 }
 80%{
 -webkit-transform:translateX(-80px) translateY(-25px) scale(.6);
 }
 95%,100%{
 -webkit-transform:translateX(-100px) translateY(-25px) scale(.5);
 }
 }

html部分

<div class="s">
 <div class="a"></div>
</div>

小節

今天的內容就到這里，我們的確用一個div，再結合三角函數的相關知識，一口氣繪制完了正三角形、正方形、正五邊形、正六邊形、正七邊形、正八邊形，是不是很有趣呢。你不妨按照上述示例，親自動手試試哦。

無法在瀏覽器中通過查看源文檔的方式來查看 PHP 的源代碼 - 您只能看到 PHP 文件的

輸出，即純粹的 HTML。這是因為在結果返回瀏覽器之前，腳本就已經在服務器執行了。

基本的 PHP 語法

PHP 的腳本塊以 <?php 開始，以 ?> 結束。您可以把 PHP 的腳本塊放置在文檔中的任何位

置。

當然，在支持簡寫的服務器上，您可以使用 <? 和 ?> 來開始和結束腳本塊。

不過，為了達到最好的兼容性，我們推薦您使用標準形式 (<?php)，而不是簡寫形式。

<?php

PHP 文件通常會包含 HTML 標簽，就像一個 HTML 文件，以及一些 PHP 腳本代碼。

在下面，我們提供了一段簡單的 PHP 腳本，它可以向瀏覽器輸出文本 "Hello World"：

<html>

<body>

<?php

echo "Hello World";

</body>

</html>

在線咨詢

上一篇：SSh項目-采用AJAX加JSON所做的一個分頁效果
下一篇：10個純CSS3制作的面包屑導航

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商