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小时内与您取得联系。

整合营销服务商