整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
.javascript的生態(tài)圈
編程語(yǔ)言種類(lèi)眾多，除了極少數(shù)用作娛樂(lè)的語(yǔ)言外，絕大多數(shù)編程語(yǔ)言都是圖靈完備。雖然各有千秋，但是基本語(yǔ)法都相通。衡量一種編程語(yǔ)言的歷史評(píng)價(jià)和成就，除了功能強(qiáng)大、表達(dá)簡(jiǎn)潔外，更重要的是使用范圍，開(kāi)發(fā)人群以及社區(qū)活躍度，即該種語(yǔ)言的生態(tài)圈。
最典型的例子如javascript，10日內(nèi)創(chuàng)造出來(lái)的，動(dòng)態(tài)類(lèi)型、多范式、被譽(yù)為“玩具語(yǔ)言”。但時(shí)至今日，Javascript是世界上使用最廣，開(kāi)發(fā)者人數(shù)最多的編程語(yǔ)言。
每一個(gè)瀏覽器都有javascript的編譯器，前后端可以開(kāi)發(fā)。雖然1000個(gè)javascript程序員，可以編出1000種不同水平的代碼。雖然被批評(píng)為先天發(fā)育不良，代碼臃腫等種種名號(hào)。但是javascript就是長(zhǎng)期占據(jù)編程語(yǔ)言榜的前幾名，曾經(jīng)問(wèn)鼎，至今屹立不倒。
原因是javascript強(qiáng)大無(wú)比的生態(tài)圈，NPM上數(shù)百萬(wàn)個(gè)庫(kù)，層出不窮的強(qiáng)大框架，Java比不上python也比不上。龐大的生態(tài)圈讓javascript構(gòu)建了令人敬畏的護(hù)城墻，在城池之內(nèi)，各種框架和庫(kù)能相互引用，利用前人的輪子構(gòu)建強(qiáng)大具有生產(chǎn)力的產(chǎn)品。
著名的如vue的模版，react的組件，three.js的3D，乃至最新的tensorflow.js人工智能等。
2.elm語(yǔ)言與javascript生態(tài)圈的關(guān)系
elm雖然是一種獨(dú)立的語(yǔ)言，但是他應(yīng)用于生產(chǎn)力的方法，卻是編譯成為javascript語(yǔ)言投入前端，因此elm語(yǔ)言也屬于javascript生態(tài)圈范圍之內(nèi)。elm語(yǔ)言能輕松地與javascript交互數(shù)據(jù)和信息。但是elm語(yǔ)言與java/conjure、python/c等交互方式又有所不同，它以javascript之間的調(diào)用、溝通與交互，就如同一對(duì)戀愛(ài)中又不點(diǎn)破那層窗紙的情侶一般。若即若離，心有靈犀，互有好感卻始終保持距離。
3、elm與javscript語(yǔ)言間交互的方式
這里要講一下語(yǔ)言間交互的方式，所謂交互，就是兼容，或者直接調(diào)用對(duì)方的庫(kù)或函數(shù)，如java/conjure、python/c、haskell/c等。語(yǔ)言間的交互一般有如下兩種方式，一，向下兼容，如C++是C的超集。typescript是javascript的超集等，子集可以直接在超集中運(yùn)行、編譯。二、調(diào)用對(duì)方的庫(kù)和函數(shù)。
但是elm語(yǔ)言卻是第三種方式，通過(guò)flags戶口本方式和port登報(bào)方式進(jìn)行。
elm和javascript兩者不能直接飲用，也不能直接調(diào)用對(duì)方的庫(kù)和函數(shù)，javascript生態(tài)圈如同一片廣闊的國(guó)土，elm卻是當(dāng)中一塊世外桃源般的王國(guó)。王國(guó)周?chē)兄鴱?qiáng)大堅(jiān)不可摧的城墻，無(wú)門(mén)無(wú)窗，與外界通信的唯一渠道就是戶口本和登報(bào)。
民眾要通訊，可以查看戶口本、也可以報(bào)紙上登報(bào)。注意這里的通訊與HTTP的get、post不一樣，http馬上可以收到回復(fù)，通訊是雙向的，elm的flags和port。卻是一種單向通信，可以理解為向外傳播信息，只有在外界javascript世界訂閱報(bào)紙的人才能看到。反之，elm王國(guó)里的人想了解外界的信息，也必須通過(guò)訂閱來(lái)實(shí)現(xiàn)。
4.elm語(yǔ)言與javascript交互的方式之一戶口本（flags)
4.1 flags戶口本的機(jī)制實(shí)現(xiàn)。
flags，類(lèi)似于出生證或戶口本，每個(gè)elm公民在王國(guó)初始化的時(shí)候都會(huì)有這樣一個(gè)flags，出生時(shí)自然有，無(wú)需訂閱，可以直接查閱。
4.2 前期準(zhǔn)備初始化
初始化Elm程序
elm make src/Main.elm
會(huì)產(chǎn)生一個(gè)index.html文件，可以直接打開(kāi)。如果要進(jìn)入JavaScript交互操作，則要生成js文件：
elm make src/Main.elm --output=main.js
產(chǎn)生一個(gè)名為 main的js文件。因此，一旦有了main.js就可以編寫(xiě)自己的HTML文件，該文件可以執(zhí)行想要的任何操作！例如：
<!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>文檔中，運(yùn)行一段JavaScript代碼來(lái)初始化Elm程序：
<div id="elm"></div><script>var app=Elm.Main.init({node: document.getElementById('elm')});</script>
創(chuàng)建一個(gè)空的<div>，Elm程序完全接管該節(jié)點(diǎn)，并將其交給Elm.Main.init啟動(dòng)程序。
4.3 嘗試用flags戶口本方式調(diào)用javascript
如果想調(diào)用javascript當(dāng)前時(shí)間，可以在HTML的script代碼中加上 flags: Date.now()，flags就是戶口本的標(biāo)志，而Date.now()是純粹javascript的功能函數(shù)。
var app=Elm.Main.init({node: document.getElementById('elm'),flags: Date.now()
});
4.4 在elm語(yǔ)言中處理flags傳來(lái)的數(shù)據(jù)信息
elm語(yǔ)言中的Browser.element函數(shù)提供了一種處理戶口本的方法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有一個(gè)名為的參數(shù)flags，對(duì)應(yīng)著外界javascript初始化時(shí)的flags: Date.now()
?？梢跃帉?xiě)如下init函數(shù)：
init : Int -> ( Model, Cmd Msg )
init currentTime=
--處理傳入Int的功能函數(shù)。
這實(shí)現(xiàn)了Elm代碼直接訪問(wèn)從JavaScript傳入的戶口本數(shù)據(jù)信息并實(shí)現(xiàn)處理。
5 小結(jié)
本文摘要討論了elm語(yǔ)言與javascript語(yǔ)言間交互和調(diào)用的方法和特點(diǎn)，并用代碼實(shí)現(xiàn)了交互調(diào)用的第一種方式flags（戶口本）方式。需要注意的是：戶口本方式只適用于程序剛開(kāi)始初始化時(shí)固定下來(lái)的靜態(tài)數(shù)據(jù)信息傳遞，如果在程序運(yùn)行過(guò)程中則要運(yùn)用到第二種方式port登報(bào)和訂閱了。
你一個(gè)div，你能用CSS繪制一個(gè)正三角形、正方形、正五邊形、正六邊形、正七邊形、正八邊形嗎？
今天我們來(lái)玩一個(gè)有趣的CSS實(shí)驗(yàn)，想象下，只用一個(gè)div，你能用CSS繪制一個(gè)正三角形、正方形、正五邊形、正六邊形、正七邊形、正八邊形嗎？今天筆者帶著大家一起動(dòng)手實(shí)踐下這個(gè)有趣的聯(lián)系，由于正多邊形用到不少三角函數(shù)計(jì)算，為了方便計(jì)算，這里正多邊形統(tǒng)一設(shè)定為100px，為啥只做到正八邊形？因?yàn)榫鸵粋€(gè)div最多只能做到正八邊形。
正三角形不需要用到偽元素，只需要設(shè)定div本身的邊框?qū)挾燃纯僧a(chǎn)生，先來(lái)看一下正三角形的邊長(zhǎng)與中線，若邊長(zhǎng)為100px，則中線四舍五入就是87px ( 100 x sin(60)=87 )。
因此我們要將div的長(zhǎng)寬都設(shè)為0，接著把底部border的寬度設(shè)為87px，左右的border寬度設(shè)為50px (顏色設(shè)為透明transparent )，就可以做出一個(gè)漂亮的三角形。
width:0; height:0; border-width:0 50px 87px ; border-style:solid; border-color:transparent transparent #095;
正方形應(yīng)該是最簡(jiǎn)單的，只要設(shè)定長(zhǎng)寬設(shè)定為同樣數(shù)值就可以了，不過(guò)其實(shí)還有另外兩種方法，第一種你可以把長(zhǎng)寬設(shè)為0，把上下左右的border設(shè)為50px也可以，第二種則是高度設(shè)為0，寬度設(shè)為100px，然后某個(gè)邊寬也設(shè)為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;
}
正五邊形就需要進(jìn)入基本的三角函數(shù)領(lǐng)域了，其實(shí)知道了原理還是蠻簡(jiǎn)單的。讓我們先把正五邊形分解，用原本的div作為上方的三角形，然后用一個(gè)偽元素制作下方的梯形，因?yàn)檎暹呅蚊窟叺膴A角為108度，所以可以藉由三角函數(shù)計(jì)算出上方三角形的高度為59px ( 100 x cos(54) )，寬度為192px ( 100 x sin(54) x 2 )，下方梯形的高度為95px ( 100 x sin(72) )，長(zhǎng)邊的寬度跟上面的三角形一樣都是192px。
了解原理之后，就可以利用偽元素來(lái)搭配制作啰！
.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;
}
正六邊形的每個(gè)夾角是120度，如果以純CSS的方向來(lái)看的話，就是把正五邊形上面的三角形改變一下，就可以做出正六邊形，也就是變成上下兩個(gè)梯形的組合而已，梯形的長(zhǎng)邊為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;
}
正七邊形開(kāi)始就必須再使用after 這個(gè)偽元素了，因?yàn)檎哌呅伪仨氁鸾鉃槿齻€(gè)區(qū)塊，分別是用原本的div 作為上面的三角形，一個(gè)偽元素作為中間的梯形，然后另一個(gè)偽元素作為底部的梯形，正七邊形的夾角比較特殊不是整數(shù)，而是128又4/7 度，大概取到小數(shù)第二位是128.57，所以計(jì)算起來(lái)結(jié)果就如下圖所示，重點(diǎn)就是必須要清楚地知道長(zhǎng)寬是多少。
有了長(zhǎng)寬之后，就開(kāi)始用CSS來(lái)寫(xiě)啰！
.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;
}
正八邊形其實(shí)就是把正七邊形上面的三角形變成梯形，然后中間的梯形變成矩形就搞定了，正八邊形的夾角為135 度，計(jì)算出來(lái)的各個(gè)區(qū)域長(zhǎng)寬如下圖。
同樣的了解原理，CSS做起來(lái)就簡(jiǎn)單多啰！
.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做出來(lái)的單一div的正多邊形變換，是不是很好玩，一個(gè)div能做出來(lái)這么多形狀，是不是很過(guò)癮，不過(guò)癮的話，我們加點(diǎn)料來(lái)點(diǎn)動(dòng)畫(huà)，其實(shí)加上動(dòng)畫(huà)效果，就可以做出像下面范例這個(gè)樣子的變換動(dòng)畫(huà)啰！不過(guò)下面的范例筆者再最外層另外用一個(gè)div進(jìn)行包裹，避免因?yàn)榇笮〉淖儞Q造成銜接處的不自然，大家可以參考看看喔！
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>
今天的內(nèi)容就到這里，我們的確用一個(gè)div，再結(jié)合三角函數(shù)的相關(guān)知識(shí)，一口氣繪制完了正三角形、正方形、正五邊形、正六邊形、正七邊形、正八邊形，是不是很有趣呢。你不妨按照上述示例，親自動(dòng)手試試哦。
無(wú)法在瀏覽器中通過(guò)查看源文檔的方式來(lái)查看 PHP 的源代碼 - 您只能看到 PHP 文件的
輸出，即純粹的 HTML。這是因?yàn)樵诮Y(jié)果返回瀏覽器之前，腳本就已經(jīng)在服務(wù)器執(zhí)行了。
基本的 PHP 語(yǔ)法
PHP 的腳本塊以 <?php 開(kāi)始，以 ?> 結(jié)束。您可以把 PHP 的腳本塊放置在文檔中的任何位
置。
當(dāng)然，在支持簡(jiǎn)寫(xiě)的服務(wù)器上，您可以使用 <? 和 ?> 來(lái)開(kāi)始和結(jié)束腳本塊。
不過(guò)，為了達(dá)到最好的兼容性，我們推薦您使用標(biāo)準(zhǔn)形式 (<?php)，而不是簡(jiǎn)寫(xiě)形式。
<?php
?>
PHP 文件通常會(huì)包含 HTML 標(biāo)簽，就像一個(gè) HTML 文件，以及一些 PHP 腳本代碼。
在下面，我們提供了一段簡(jiǎn)單的 PHP 腳本，它可以向?yàn)g覽器輸出文本 "Hello World"：
<html>
<body>
<?php
echo "Hello World";
?>
</body>
</html>
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
