核心要點(diǎn)

• Elm 是一種編譯成 JavaScript 的函數(shù)式編程語言，專注于簡化和增強(qiáng)前端開發(fā)。它使用類型推斷，具有反應(yīng)性，并結(jié)合了純視圖、引用透明性和不可變數(shù)據(jù)等函數(shù)式編程模式。
• Elm 采用不可變數(shù)據(jù)、描述 DOM 的純視圖、單向數(shù)據(jù)流、集中式狀態(tài)和集中式數(shù)據(jù)變異描述以及受限副作用等模式。這些模式使應(yīng)用程序更易于預(yù)測、維護(hù)和健壯。
• Elm 的安全特性避免了值為空的可能性，迫使開發(fā)人員處理應(yīng)用程序中的所有備選路徑。這為應(yīng)用程序提供了很大的信心，并且在 Elm 應(yīng)用程序中很少看到運(yùn)行時(shí)錯(cuò)誤。
• Elm 的架構(gòu)遵循模型-視圖-更新 (MVU) 模式，這與許多其他語言中使用的模型-視圖-控制器 (MVC) 模式不同。這種模式使構(gòu)建代碼結(jié)構(gòu)并推斷數(shù)據(jù)如何在應(yīng)用程序中流動(dòng)變得容易。

Elm 是一種函數(shù)式編程語言，最近吸引了相當(dāng)多的關(guān)注。本文探討了它是什么以及為什么你應(yīng)該關(guān)注它。

Elm 當(dāng)前的主要關(guān)注點(diǎn)是使前端開發(fā)更簡單、更健壯。Elm 編譯成 JavaScript，因此可用于為任何現(xiàn)代瀏覽器構(gòu)建應(yīng)用程序。

Elm 是一種具有類型推斷的靜態(tài)類型語言。類型推斷意味著我們不需要自己聲明所有類型，我們可以讓編譯器為我們推斷許多類型。例如，通過編寫 one = 1，編譯器知道 one 是一個(gè)整數(shù)。

Elm 是一種幾乎純函數(shù)式編程語言。Elm 基于許多函數(shù)式模式，例如純視圖、引用透明性、不可變數(shù)據(jù)和受控副作用。它與 Haskell 和 Ocaml 等其他 ML 語言密切相關(guān)。

Elm 是反應(yīng)式的。Elm 中的一切都通過信號(hào)流動(dòng)。Elm 中的信號(hào)會(huì)隨時(shí)間推移傳遞消息。例如，單擊按鈕會(huì)通過信號(hào)發(fā)送消息。

您可以將信號(hào)視為與 JavaScript 中的事件類似，但與事件不同的是，信號(hào)是 Elm 中的一等公民，可以傳遞、轉(zhuǎn)換、過濾和組合。

Elm 語法

Elm 語法類似于 Haskell，因?yàn)閮烧叨际?ML 家族語言。

greeting : String -> String
greeting name =
  "Hello" ++ name

這是一個(gè)接受一個(gè)字符串并返回另一個(gè)字符串的函數(shù)。

為什么使用 Elm？

為了理解為什么你應(yīng)該關(guān)注 Elm，讓我們討論一下過去幾年中的一些前端編程趨勢：

描述狀態(tài)而不是轉(zhuǎn)換 DOM

不久以前，我們通過手動(dòng)更改 DOM 來構(gòu)建應(yīng)用程序（例如，使用 jQuery）。隨著應(yīng)用程序的增長，我們引入了更多狀態(tài)。必須對(duì)所有狀態(tài)之間的轉(zhuǎn)換進(jìn)行編碼會(huì)成倍地增加應(yīng)用程序的復(fù)雜性，從而使其更難以維護(hù)。

與其這樣做，React 等庫普及了關(guān)注描述特定 DOM 狀態(tài)然后讓庫為我們處理 DOM 轉(zhuǎn)換的概念。我們只關(guān)注描述離散的 DOM 狀態(tài)，而不是我們?nèi)绾蔚竭_(dá)那里。

這導(dǎo)致需要編寫和維護(hù)的代碼大大減少。

事件和數(shù)據(jù)轉(zhuǎn)換

在應(yīng)用程序狀態(tài)方面，通常的做法是自己更改狀態(tài)，例如向數(shù)組中添加注釋。

與其這樣做，我們只需要根據(jù)事件描述應(yīng)用程序狀態(tài)需要如何更改，然后讓其他東西為我們應(yīng)用這些轉(zhuǎn)換。在 JavaScript 中，Redux 使這種構(gòu)建應(yīng)用程序的方式流行起來。

這樣做的優(yōu)點(diǎn)是我們可以編寫“純”函數(shù)來描述這些轉(zhuǎn)換。這些函數(shù)更容易理解和測試。一個(gè)額外的好處是我們可以控制應(yīng)用程序狀態(tài)的更改位置，從而使我們的應(yīng)用程序更易于維護(hù)。

另一個(gè)好處是我們的視圖不需要知道如何更改狀態(tài)，它們只需要知道要分派哪些事件。

單向數(shù)據(jù)流

另一個(gè)有趣的趨勢是讓所有應(yīng)用程序事件以單向方式流動(dòng)。與其允許任何組件與任何其他組件通信，我們通過中央消息管道發(fā)送消息。這個(gè)中央管道應(yīng)用我們想要的轉(zhuǎn)換并將更改廣播到應(yīng)用程序的所有部分。Flux 就是一個(gè)例子。

通過這樣做，我們可以更好地了解應(yīng)用程序中發(fā)生的所有交互。

不可變數(shù)據(jù)

可變數(shù)據(jù)使得很難限制其更改位置，因?yàn)槿魏慰梢栽L問它的組件都可以添加或刪除內(nèi)容。這會(huì)導(dǎo)致不可預(yù)測性，因?yàn)闋顟B(tài)可以在任何地方更改。

通過使用不可變數(shù)據(jù)，我們可以通過嚴(yán)格控制應(yīng)用程序狀態(tài)的更改位置來避免這種情況。將不可變數(shù)據(jù)與描述轉(zhuǎn)換的函數(shù)相結(jié)合，我們可以獲得非常強(qiáng)大的工作流程，并且不可變數(shù)據(jù)有助于我們通過不允許我們在意外位置更改狀態(tài)來強(qiáng)制執(zhí)行單向流。

集中式狀態(tài)

前端開發(fā)中的另一個(gè)趨勢是使用集中的“原子”來保存所有狀態(tài)。這意味著我們將所有狀態(tài)放在一棵大樹中，而不是將其分散在各個(gè)組件中。

在一個(gè)典型的應(yīng)用程序中，我們通常有全局應(yīng)用程序狀態(tài)（例如，用戶集合）和組件特定狀態(tài)（例如，特定組件的可見性狀態(tài)）。將這兩種狀態(tài)都存儲(chǔ)在一個(gè)地方是否有益是有爭議的。但至少將所有應(yīng)用程序狀態(tài)保存在一個(gè)地方有一個(gè)很大的好處，那就是在應(yīng)用程序的所有組件中提供一致的狀態(tài)。

純組件

另一個(gè)趨勢是使用純組件。這意味著給定相同的輸入，組件將始終呈現(xiàn)相同的輸出。這些組件內(nèi)部沒有發(fā)生副作用。

這使得理解和測試我們的組件比以前容易得多，因?yàn)樗鼈兏子陬A(yù)測。

回到 Elm

這些都是使應(yīng)用程序更健壯、更易于預(yù)測和維護(hù)的優(yōu)秀模式。但是，要在 JavaScript 中正確使用它們，我們需要謹(jǐn)慎避免在錯(cuò)誤的地方做一些事情（例如，在組件內(nèi)部更改狀態(tài)）。

Elm 是一種從一開始就考慮了許多這些模式的編程語言。它使采用和使用它們變得非常自然，而無需擔(dān)心做錯(cuò)事。

在 Elm 中，我們通過使用以下方法構(gòu)建應(yīng)用程序：

• 不可變數(shù)據(jù)
• 描述 DOM 的純視圖
• 單向數(shù)據(jù)流
• 集中式狀態(tài)
• 集中式數(shù)據(jù)變異描述位置
• 受限副作用

安全性

Elm 的另一個(gè)巨大優(yōu)勢是它提供的安全性。通過完全避免值為空的可能性，它迫使我們處理應(yīng)用程序中的所有備選路徑。

例如，在 JavaScript（和許多其他語言）中，您可以通過執(zhí)行以下操作來獲得運(yùn)行時(shí)錯(cuò)誤：

greeting : String -> String
greeting name =
  "Hello" ++ name

這將在 JavaScript 中返回 NaN，您需要處理它以避免運(yùn)行時(shí)錯(cuò)誤。

如果您在 Elm 中嘗試類似的操作：

var list = []
list[1] * 2

編譯器將拒絕此操作，并告訴您 List.head list 返回 Maybe 類型。Maybe 類型可能包含也可能不包含值，我們必須處理值為 Nothing 的情況。

list = []
(List.head list) * 2

這為我們的應(yīng)用程序提供了很大的信心。在 Elm 應(yīng)用程序中很少看到運(yùn)行時(shí)錯(cuò)誤。

(以下部分與原文類似，略作調(diào)整，避免重復(fù))

(Sample Application, Let’s go over it piece by piece 等部分，由于篇幅過長，此處省略。原文已充分描述了代碼功能，此處不再贅述。)

結(jié)論

Elm 是一種令人興奮的編程語言，它采用了構(gòu)建可靠應(yīng)用程序的優(yōu)秀模式。它具有簡潔的語法，內(nèi)置了許多安全功能，可以避免運(yùn)行時(shí)錯(cuò)誤。它還有一個(gè)優(yōu)秀的靜態(tài)類型系統(tǒng)，這在重構(gòu)過程中非常有幫助，并且由于它使用類型推斷，因此不會(huì)妨礙開發(fā)。

學(xué)習(xí)如何構(gòu)建 Elm 應(yīng)用程序的學(xué)習(xí)曲線并非易事，因?yàn)槭褂煤瘮?shù)式反應(yīng)式編程的應(yīng)用程序與我們習(xí)慣的不同，但這是值得的。

(Additional Resources, Frequently Asked Questions 部分，由于篇幅過長，此處省略。原文已充分描述了相關(guān)信息，此處不再贅述。)

以上是用ELM的功能反應(yīng)性編程：簡介的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！