譯者 | 李睿
審校 | 孫淑娟
前端JAVAScript框架的創新是當今這個時代最偉大的技術文化現象之一。20多年來，人們見證了進化創造力的長尾。每一個新的想法都進行嘗試，在軟件開發過程和開發人員構建的最終產品中都會促進改進。?
Alpine.js是近年來脫穎而出的框架之一。Alpine.js是一個極簡主義框架。顧名思義，用于克服大量的困難（在崎嶇的山地）進行輕操作。它在一個簡潔、易于掌握的軟件包中提供了很多的動力。本文將對Alpine.js進行介紹，這樣就可以理解它提供了什么，以及它在什么時候可能有用。?
Alpine的極簡API
正如Alpine.js文檔所描述的，Alpine的API是15個屬性、6個特性和2個方法的集合。這是一個非常小的API配置文件。其極簡主義的目的是以干凈的格式提供反應性，并輔以一些周圍的細節，例如事件和中央商店。?
考慮清單1中非常簡單的Web頁面。 ?
清單1.一個用Alpine.js構建的簡單網頁
<html>
<head>
<script src="https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js" defer></script>
</head>
<body>
<div x-data="">
<span x-text="'Text literal'"></span>
</div>
</body>
</html>
除了通過CDN包含Alpine包，這里僅有的兩個與Alpine相關的是指令x-data和x-text。
如果將其放入系統上的HTML頁面并在瀏覽器中查看，將會看到消息輸出“文本文字”。雖然這個應用程序不是特別令人印象深刻，但它演示了Alpine的兩個有趣方面。 ?
首先，為了使反應性發揮作用，必須將標記包含在x-data指令中。如果刪除該指令，則x-text將不會生效。本質上，x-data指令創建了一個Alpine組件。在這個例子中，x-data指令是空的。在實際使用中，這里幾乎總是有數據。畢竟，正在編寫的組件的目的是響應數據。 ?
清單1中要注意的第二件事是，可以將任何有效的JavaScript放入x-text中。所有的Alpine指令都是如此。 ?
x-data和x-text元素
x-data內容提供給所有包含的元素。要理解這個意思，可以查看清單2。 ?
清單2.x-data和x-text交互
<div x-data="{ message: 'When in the course of human events...' }">
<span x-text="message"></span>
</div>
現在該頁面將輸出美國《獨立宣言》的開頭部分。可以看到x-data定義了一個簡單的老舊JavaScript對象，只有一個字段“message”，其中包含聲明的序言。x-text指向這個對象字段。 ?
在Alpine.js中的反應
接下來，將使用反應性來修復聲明中的錯誤。可以了解清單3。 ?
清單3.x- on:click和反應性
<div x-data="{ pronoun: 'men' }">
<button x-on:click="pronoun = 'people'">Fix It</button>
<span x-text="`all ${pronoun} are created equal`"></span>
</div>
x-text指令指的是由x-data指令公開的代詞變量。這里的新部件是按鈕，它有一個x-on:click指令。這個單擊事件的處理程序將舊的默認代詞替換為中性代詞，反應性負責更新x-text中的引用。?
數據中的函數
Alpine中的數據屬性是功能齊全的JavaScript對象。考慮處理上述需求的另一種方法，如清單4所示。 ?
清單4.使用數據函數
<div x-data="{
pronoun: 'men',
fixIt: function(){
this.pronoun = 'people';
}
}">
<button x-on:click="fixIt()">Fix It</button>
<span x-text="`all ${pronoun} are created equal`"></span>
</div>
在清單4中，可以看到數據對象現在擁有一個由click處理程序調用的fixIt方法。 ?
另外，有時會看到應用程序代碼從x-data指令調用腳本標記中定義的函數——這是個人偏好，它的操作與內聯x-data完全相同：?
<div x-data="myDataFunction()">...</div>
...
<script>
function myDataFunction() {
return {
foo: "bar"
}
}
</script>
獲取遠程數據
現在轉換話題，可以考慮一個更復雜的需求。假設想從外部API加載一個json格式的美國總統列表。我們要做的第一件事是在頁面加載時加載它。為此將使用x-init指令，例如清單5所示。 ?
清單5.從x-init預加載數據
<div x-data="{
presidents: []
}"
x-init="(
async () => {
const response = await fetch('https://raw.Githubusercontent.com/hitch17/sample-data/master/presidents.json');
presidents = await response.json();
}
)">
<span x-text="presidents"></span>
</div>
在這里發生了什么?首先，x-data指令應該很清楚：它只是有一個帶有空數組的總統（presidents）字段。span元素中的x-text輸出該字段的內容。 ?
x-init代碼有點復雜。首先，注意它被包裝在一個自動執行的函數中。這是因為Alpine需要函數，而不是函數定義。(如果要使用fetch的非異步回調形式，則不需要像這樣包裝函數。) ?
一旦從端點獲得了presidents列表，將其插入到presidents變量中，Alpine將其作為x-data對象的一部分公開。 ?
重申一下：Alpine.js正在使a-data中的數據可用于同一場景中的其他指令函數(例如x-init)。 ?
使用Alpine.js迭代
此時，應用程序正在從遠程端點提取數據并將其保存到狀態中。需要注意，它輸出的內容類似于[Object]，[Object]....這不是想要的。可以了解一下遍歷數據的過程，例如清單6所示。 ?
清單6.使用Alpine.js迭代
<div x-data=...>
<ul>
<template x-for="pres in presidents">
<li><div x-text="pres.president"></div>
From: <span x-text="pres.took_office"></span> Until: <span x-text="pres.left_office"></span></li>
</template>
</ul>
</div>
清單6包含一個普通的無序列表，后面跟著一個HTML模板元素，其中包含一個x-for指令。這個指令的操作與在其他響應式框架中看到的類似。在本例中，它允許指定一個集合、總統（presidents）和一個標識符，該標識符將提供給表示該集合的每個實例的封閉標記，在本例中為pres。 ?
標記的其余部分使用pres變量通過x-text從對象中輸出數據。 ?
其應用程序現在看起來如圖1所示。 ?
圖1美國總統的名單?
顯示/隱藏和onClick
現在要設置應用程序，以便通過單擊總統的名稱來切換總統的數據。首先，將標記修改為清單7所示的內容。 ?
清單7.顯示/隱藏元素
<template x-for="pres in presidents">
<li><div x-text="pres.president" x-on:click="pres.show = ! pres.show"></div>
<div x-show="pres.show">
From: <span x-text="pres.took_office"></span> Until: <span x-text="pres.left_office"></span></li>
</div>
</template>
現在，在清單7中，可以在包含總統詳細信息的div上使用x-show指令。x-show值的真實性決定內容是否可見。在本例中，這是由pres.show字段決定的 (注意的是，在實際應用程序中，可能不希望使用實際業務數據來承載show/hide變量) 。 ?
為了改變press.show的值，在標頭文件中添加一個x-on:click處理程序。這個處理程序簡單地交換了press.show的true/false值:press.show=!pres.show。 ?
添加轉換動畫
Alpine包含內置轉換功能，可以應用于顯示/隱藏特性。清單8顯示了如何添加默認動畫。 ?
清單8.添加轉換功能來顯示/隱藏
<div x-show="pres.show" x-transition>
From: <span x-text="pres.took_office"></span> Until: <span x-text="pres.left_office"></span></li>
</div>
唯一改變的是，帶有x-show指令的元素現在也有一個x-transition指令。在默認情況下，Alpine應用合理的轉換。在這種情況下，轉換是一種滑動和漸變效果。可以廣泛地自定義轉換，包括將自己的css類應用于動畫的各個階段。?
綁定到輸入
現在，將添加一個簡單的過濾器功能。這將需要添加一個綁定到數據的輸入，然后根據該值篩選返回的數據集。可以在清單9中看到更改。 ?
清單9.篩選presidents
<div x-data="{
filter: '',
presidents: [],
getPresidents: function(){
return this.presidents.filter(pres => pres.president.includes(this.filter) )
}
}"
...
<input x-model="filter" />
...
<ul>
<template x-for="pres in getPresidents">
注意，x-data對象現在有一個“filter”字段。這是通過指向“filter”的x-model指令雙向綁定到輸入元素的。 ?
已經更改了模板x-for指令，以引用一個新的getPresidents()方法，該方法在x-data對象上實現。該方法使用標準JavaScript語法，根據總統是否在篩選字段中包含文本來篩選。 ?
結論
就像它的名字一樣，Alpine.js是一個輕量級的軟件包，里面有著基本的裝備，可以“穿越高山”。這是最小的軟件包，但已經足夠了。 ?
該框架包括一些更高級的功能，特別是中央存儲和事件系統，以及插件架構和生態系統。?
總之，Alpine.js是符合人體工程學。如果你有使用其他響應式框架的經驗，那么Alpine應該會很快學會，在x-data指令中聲明組件及其數據的簡單性。 ?
可能想知道組件間的通信。Alpine.js避免了組件之間的顯式連接(例如，沒有父-子道具)。與其相反，它通過$dispatch指令使用瀏覽器環境(即窗口)作為事件總線。這符合Alpine的理念，即添加足夠的功能來增強現有的功能。它工作得很好。 ?
隨著應用程序的規模和復雜性的增長，所有這些元素都將受到考驗。所以它適用于選擇的任何堆棧。Alpine.js是你下次進行代碼冒險的一個誘人選擇。?
原文標題：??Intro to Alpine.js: A JavaScript framework for minimalists??，作者：Matthew Tyson
