Elm基礎(chǔ)語法
常用數(shù)據(jù)結(jié)構(gòu)
列表List ： 只能容納單一類型元素,是類型的容器而不是類型，List String才是類型
元祖Tuples：可為不同類型，固定長(zhǎng)度小于10
Records ： 具有鍵值對(duì)的數(shù)據(jù)結(jié)構(gòu)
List （列表）
list 方法
List.drop 1 [1,2,3,4] — [1,2,3]
List.length [1,2,3,4] — 4
List.head [1,2,3,4] — Just 1 : Maybe.Maybe number
List.tail [1,2,3,4] — Just [2,3,4] : Maybe.Maybe (List number)
List.reverse [1,2,3,4] — [4,3,2,1] : List number 反序
List.sort [1,4,3,2] — [1,2,3,4] : List number 排序
List.maximum a — Just 4 : Maybe.Maybe number 最大值
List.minimum a — Just 1 : Maybe.Maybe number 最小值
0::[1,2,3,4] — [0,1,2,3,4] : List number “::”向列表添加元素0
[-1,-2]++[0,1,2,3,4] — [-1,-2,0,1,2,3,4] : List number “++”拼接列表
tuples （元組）
records （記錄）
point = { x = 3, y = 4 } -- create a record
point.x -- 訪問字段
List.map .x [point,{x=0,y=0}] -- field access function
{ point | x = 6 } -- update 字段
{ point | x = point.x + 1, y = point.y + 1} -- update 多個(gè)字段
dist {x,y} = sqrt (x^2 + y^2) -- pattern matching on fields
type alias Location = { line : Int , column : Int} -- type aliases for records
{x=3,y=7}.x or .y {x=3,y=7} ／／.y為一個(gè)函數(shù)
bill = {name = “cyq”, age = 20}
bill2 = {bill | name = “222”} copy一份bill — { name = “222”, age = 20 } : { age : number, name : String }
- 你不可以使用不存在的field.
- field不可為 undefined 或是 null.
- 你不可以使用 this 或 self 等關(guān)鍵字來創(chuàng)造遞迴的 records
模式匹配
有點(diǎn)類似es6的desttructuring
中綴運(yùn)算符 （可自定義）
您可以創(chuàng)建自定義中綴運(yùn)算符。 優(yōu)先級(jí)從0到9，其中9是最緊密的。默認(rèn)優(yōu)先級(jí)為9，默認(rèn) 關(guān)聯(lián)性為左。您可以自行設(shè)置，但不能覆蓋內(nèi)置運(yùn)算符。
模塊
module MyModule exposing (..)
-- qualified imports
import List -- List.map, List.foldl
import List as L -- L.map, L.foldl
-- open imports
import List exposing (..) -- map, foldl, concat, ...
import List exposing ( map, foldl ) -- map, foldl
優(yōu)先進(jìn)口合格。模塊名稱必須與其文件名匹配，因此模塊Parser.Utils需要在文件中Parser/Utils.elm。
類型注釋
一些常見的類型：Int，F(xiàn)loat，String，Bool
型別別名 (type alias)
有時(shí)候，單純的基本型別可能無法完全詮釋我們想要表達(dá)的意思，也有可能是資料結(jié)構(gòu)太複雜，我們想用一個(gè)簡(jiǎn)單的名稱稱呼它，這時(shí)型別別名就可派上用場(chǎng)。
type alias Name = String
type alias Age = Int
type alias Person =
{ name: String
, age: Int
}
createPerson: Name -> Age -> Person
createPerson name age =
{ name = name
, age = age
}
type alias Name = String 的意思可以翻譯為 將 Name 設(shè)定為 String 的另一個(gè)別名。如此一來，我們就可以像這樣定義:
createPerson: Name -> Age -> Person
而不是
createPerson: String -> Int -> Person
自定義類型：（建立自創(chuàng)型別與 Union Type）
自創(chuàng)型別的方法如下：
type Directions = Up | Down | Left | Right
type Maybe a = Nothing | Just a
我們可以創(chuàng)造兩種不同款式的型別，第一種像是上例的 Directions 比較直觀簡(jiǎn)單，在這型別下只會(huì)有四種可能的值，就是我們定義的 Up，Down，Left，Right。在使用上的話我們可以這麼做：
convertDirectionsToInt: Directions -> Int
convertDirectionsToInt dir =
case dir of
Up -> 1
Down -> 2
Left -> 3
Right -> 4
convertDirectionsToInt Up -- 1
Union Types
用來表示一組可能的值，每個(gè)值叫做一個(gè)Tag
指的是我們可以將其它已存在的型別組合進(jìn)我們自創(chuàng)的型別中。範(fàn)例中我們建立了一個(gè)叫 Maybe 的型別，後面跟著的 a 是所謂的 型別變數(shù)，再更後面則是型別的值。我們可以自由在型別變數(shù)中帶入其他的型別如下：
-- 把 String 帶入 a
maybeString: Maybe String
maybeString = Just "I am a string"
-- 把 Int 帶入 a
maybeInt: Maybe Int
maybeInt = Just 1
anotherMaybeInt: Maybe Int
maybeInt = Nothing
以上三個(gè)變數(shù)都是屬於 Maybe a 型別，但隨著帶入的 a 不同，型別裡的值也會(huì)跟著改變。當(dāng)然你也可以建立更複雜的 Union Type，例如:
type Directions a b = Up a | Down b | Left a b | Right
javascript 互操作
- 在HTML中嵌入Elm，
- 在Elm和JavaScript之間來回發(fā)送消息
函數(shù)
multiply a b = a*b
double = multiply 2
List.map double [1,2,3,4]
-- 通過匿名函數(shù)形式。
List.map (\a -> a * 2) [1..4] -- [2, 4, 6, 8]
\counterMsg -> Modify id counterMsg是Elm中的匿名函數(shù)，在Elm中，匿名函數(shù)使用\開頭緊接著參數(shù)，
并在->后書寫返回值表達(dá)式，形如\a -> b。
-- 通過let...in...語句來定義來定義一些將要立即使用的值。
volume {width, height, depth} = let area = width * height in area * depth
volume { width = 3, height = 2, depth = 7 } -- 42
函數(shù)名 參數(shù) =
控制語句
if true then “WHOA” else if true then “n” else “0”
case alist of
[]->””
[x]->””
x::xs->””
elm 工程化
elm-webpack-project 腳手架
git clone https://github.com/moarwick/elm-webpack-starter
rm -rf .git
git init git add . git commit -m 'first commit'
npm run reinstall 安裝依賴
自己搭建
－－－－package.json
"scripts": {
"elm-install": "elm-package install",
"build": "elm-make Main.elm --output=build/index.js",
"start": "elm-live Main.elm --output=build/index.js --open"
},
"devDependencies": {
"elm": "^0.18.0",
"elm-live": "^2.7.4" //熱更新，熱加載模塊
}
－－－－－elm-package.json
"dependencies": {
"elm-lang/core": "5.0.0 <= v < 6.0.0",
"elm-lang/html": "2.0.0 <= v < 3.0.0",
"elm-lang/http": "1.0.0 <= v < 2.0.0",
"evancz/elm-markdown": "3.0.1 <= v < 4.0.0"
},
"elm-version": "0.18.0 <= v < 0.19.0"
－－－－－－－index.html
<div id=“main”></div>
<script type="text/javascript">
var node = document.getElementById(‘main’);
var app = Elm.Main.embed(node);
</script>
－－－－－
npm i
npm run elm-install
npm run start
官網(wǎng)示例庫
git clone https://github.com/evancz/elm-architecture-tutorial.git
cd elm-architecture-tutorial
學(xué)習(xí)資源
Elm入門實(shí)踐系列
https://segmentfault.com/a/1190000005701562
初識(shí)Elm語言你只需要Y分鐘
https://github.com/Jocs/jocs.github.io/issues/2
Elm架構(gòu)教程
https://segmentfault.com/a/1190000004872909
