Alpine.js簡(jiǎn)介：用于最小化列表的JavaScript框架?

作者：李睿 2023-04-03 10:20:16

Alpine.js是一個(gè)前端JavaScript框架，一個(gè)輕量級(jí)的軟件包，具有極簡(jiǎn)的API和全面的功能。

譯者 | 李睿

審校 | 孫淑娟

前端JavaScript框架的創(chuàng)新是當(dāng)今這個(gè)時(shí)代最偉大的技術(shù)文化現(xiàn)象之一。20多年來(lái)，人們見(jiàn)證了進(jìn)化創(chuàng)造力的長(zhǎng)尾。每一個(gè)新的想法都進(jìn)行嘗試，在軟件開(kāi)發(fā)過(guò)程和開(kāi)發(fā)人員構(gòu)建的最終產(chǎn)品中都會(huì)促進(jìn)改進(jìn)。?

Alpine.js是近年來(lái)脫穎而出的框架之一。Alpine.js是一個(gè)極簡(jiǎn)主義框架。顧名思義，用于克服大量的困難（在崎嶇的山地）進(jìn)行輕操作。它在一個(gè)簡(jiǎn)潔、易于掌握的軟件包中提供了很多的動(dòng)力。本文將對(duì)Alpine.js進(jìn)行介紹，這樣就可以理解它提供了什么，以及它在什么時(shí)候可能有用。?

Alpine的極簡(jiǎn)API

正如Alpine.js文檔所描述的，Alpine的API是15個(gè)屬性、6個(gè)特性和2個(gè)方法的集合。這是一個(gè)非常小的API配置文件。其極簡(jiǎn)主義的目的是以干凈的格式提供反應(yīng)性，并輔以一些周圍的細(xì)節(jié)，例如事件和中央商店。?

考慮清單1中非常簡(jiǎn)單的Web頁(yè)面。 ?

清單1.一個(gè)用Alpine.js構(gòu)建的簡(jiǎn)單網(wǎng)頁(yè)

<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>

除了通過(guò)CDN包含Alpine包，這里僅有的兩個(gè)與Alpine相關(guān)的是指令x-data和x-text。

如果將其放入系統(tǒng)上的HTML頁(yè)面并在瀏覽器中查看，將會(huì)看到消息輸出“文本文字”。雖然這個(gè)應(yīng)用程序不是特別令人印象深刻，但它演示了Alpine的兩個(gè)有趣方面。 ?

首先，為了使反應(yīng)性發(fā)揮作用，必須將標(biāo)記包含在x-data指令中。如果刪除該指令，則x-text將不會(huì)生效。本質(zhì)上，x-data指令創(chuàng)建了一個(gè)Alpine組件。在這個(gè)例子中，x-data指令是空的。在實(shí)際使用中，這里幾乎總是有數(shù)據(jù)。畢竟，正在編寫的組件的目的是響應(yīng)數(shù)據(jù)。 ?

清單1中要注意的第二件事是，可以將任何有效的JavaScript放入x-text中。所有的Alpine指令都是如此。 ?

x-data和x-text元素

x-data內(nèi)容提供給所有包含的元素。要理解這個(gè)意思，可以查看清單2。 ?

清單2.x-data和x-text交互

<div x-data="{ message: 'When in the course of human events...' }">
  <span x-text="message"></span>
</div>

現(xiàn)在該頁(yè)面將輸出美國(guó)《獨(dú)立宣言》的開(kāi)頭部分。可以看到x-data定義了一個(gè)簡(jiǎn)單的老舊JavaScript對(duì)象，只有一個(gè)字段“message”，其中包含聲明的序言。x-text指向這個(gè)對(duì)象字段。 ?

在Alpine.js中的反應(yīng)

接下來(lái)，將使用反應(yīng)性來(lái)修復(fù)聲明中的錯(cuò)誤?？梢粤私馇鍐?。 ?

清單3.x- on:click和反應(yīng)性

<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指令公開(kāi)的代詞變量。這里的新部件是按鈕，它有一個(gè)x-on:click指令。這個(gè)單擊事件的處理程序?qū)⑴f的默認(rèn)代詞替換為中性代詞，反應(yīng)性負(fù)責(zé)更新x-text中的引用。?

數(shù)據(jù)中的函數(shù)

Alpine中的數(shù)據(jù)屬性是功能齊全的JavaScript對(duì)象?？紤]處理上述需求的另一種方法，如清單4所示。 ?

清單4.使用數(shù)據(jù)函數(shù)

<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中，可以看到數(shù)據(jù)對(duì)象現(xiàn)在擁有一個(gè)由click處理程序調(diào)用的fixIt方法。 ?

另外，有時(shí)會(huì)看到應(yīng)用程序代碼從x-data指令調(diào)用腳本標(biāo)記中定義的函數(shù)——這是個(gè)人偏好，它的操作與內(nèi)聯(lián)x-data完全相同：?

<div x-data="myDataFunction()">...</div>
  ...
  <script>
    function myDataFunction() {
      return {
      foo: "bar"
    }
    }
  </script>

獲取遠(yuǎn)程數(shù)據(jù)

現(xiàn)在轉(zhuǎn)換話題，可以考慮一個(gè)更復(fù)雜的需求。假設(shè)想從外部API加載一個(gè)json格式的美國(guó)總統(tǒng)列表。我們要做的第一件事是在頁(yè)面加載時(shí)加載它。為此將使用x-init指令，例如清單5所示。 ?

清單5.從x-init預(yù)加載數(shù)據(jù)

<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>

在這里發(fā)生了什么?首先，x-data指令應(yīng)該很清楚：它只是有一個(gè)帶有空數(shù)組的總統(tǒng)（presidents）字段。span元素中的x-text輸出該字段的內(nèi)容。 ?

x-init代碼有點(diǎn)復(fù)雜。首先，注意它被包裝在一個(gè)自動(dòng)執(zhí)行的函數(shù)中。這是因?yàn)锳lpine需要函數(shù)，而不是函數(shù)定義。(如果要使用fetch的非異步回調(diào)形式，則不需要像這樣包裝函數(shù)。) ?

一旦從端點(diǎn)獲得了presidents列表，將其插入到presidents變量中，Alpine將其作為x-data對(duì)象的一部分公開(kāi)。 ?

重申一下：Alpine.js正在使a-data中的數(shù)據(jù)可用于同一場(chǎng)景中的其他指令函數(shù)(例如x-init)。 ?

使用Alpine.js迭代

此時(shí)，應(yīng)用程序正在從遠(yuǎn)程端點(diǎn)提取數(shù)據(jù)并將其保存到狀態(tài)中。需要注意，它輸出的內(nèi)容類似于[Object]，[Object]....這不是想要的。可以了解一下遍歷數(shù)據(jù)的過(guò)程，例如清單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包含一個(gè)普通的無(wú)序列表，后面跟著一個(gè)HTML模板元素，其中包含一個(gè)x-for指令。這個(gè)指令的操作與在其他響應(yīng)式框架中看到的類似。在本例中，它允許指定一個(gè)集合、總統(tǒng)（presidents）和一個(gè)標(biāo)識(shí)符，該標(biāo)識(shí)符將提供給表示該集合的每個(gè)實(shí)例的封閉標(biāo)記，在本例中為pres。 ?

標(biāo)記的其余部分使用pres變量通過(guò)x-text從對(duì)象中輸出數(shù)據(jù)。 ?

其應(yīng)用程序現(xiàn)在看起來(lái)如圖1所示。 ?

圖1美國(guó)總統(tǒng)的名單?

顯示/隱藏和onClick

現(xiàn)在要設(shè)置應(yīng)用程序，以便通過(guò)單擊總統(tǒng)的名稱來(lái)切換總統(tǒng)的數(shù)據(jù)。首先，將標(biāo)記修改為清單7所示的內(nèi)容。 ?

清單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>

現(xiàn)在，在清單7中，可以在包含總統(tǒng)詳細(xì)信息的div上使用x-show指令。x-show值的真實(shí)性決定內(nèi)容是否可見(jiàn)。在本例中，這是由pres.show字段決定的 (注意的是，在實(shí)際應(yīng)用程序中，可能不希望使用實(shí)際業(yè)務(wù)數(shù)據(jù)來(lái)承載show/hide變量) 。 ?

為了改變press.show的值，在標(biāo)頭文件中添加一個(gè)x-on:click處理程序。這個(gè)處理程序簡(jiǎn)單地交換了press.show的true/false值:press.show=!pres.show。 ?

添加轉(zhuǎn)換動(dòng)畫

Alpine包含內(nèi)置轉(zhuǎn)換功能，可以應(yīng)用于顯示/隱藏特性。清單8顯示了如何添加默認(rèn)動(dòng)畫。 ?

清單8.添加轉(zhuǎn)換功能來(lái)顯示/隱藏

<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指令的元素現(xiàn)在也有一個(gè)x-transition指令。在默認(rèn)情況下，Alpine應(yīng)用合理的轉(zhuǎn)換。在這種情況下，轉(zhuǎn)換是一種滑動(dòng)和漸變效果。可以廣泛地自定義轉(zhuǎn)換，包括將自己的CSS類應(yīng)用于動(dòng)畫的各個(gè)階段。?

綁定到輸入

現(xiàn)在，將添加一個(gè)簡(jiǎn)單的過(guò)濾器功能。這將需要添加一個(gè)綁定到數(shù)據(jù)的輸入，然后根據(jù)該值篩選返回的數(shù)據(jù)集?？梢栽谇鍐?中看到更改。 ?

清單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對(duì)象現(xiàn)在有一個(gè)“filter”字段。這是通過(guò)指向“filter”的x-model指令雙向綁定到輸入元素的。 ?

已經(jīng)更改了模板x-for指令，以引用一個(gè)新的getPresidents()方法，該方法在x-data對(duì)象上實(shí)現(xiàn)。該方法使用標(biāo)準(zhǔn)JavaScript語(yǔ)法，根據(jù)總統(tǒng)是否在篩選字段中包含文本來(lái)篩選。 ?

結(jié)論

就像它的名字一樣，Alpine.js是一個(gè)輕量級(jí)的軟件包，里面有著基本的裝備，可以“穿越高山”。這是最小的軟件包，但已經(jīng)足夠了。 ?

該框架包括一些更高級(jí)的功能，特別是中央存儲(chǔ)和事件系統(tǒng)，以及插件架構(gòu)和生態(tài)系統(tǒng)。?

總之，Alpine.js是符合人體工程學(xué)。如果你有使用其他響應(yīng)式框架的經(jīng)驗(yàn)，那么Alpine應(yīng)該會(huì)很快學(xué)會(huì)，在x-data指令中聲明組件及其數(shù)據(jù)的簡(jiǎn)單性。 ?

可能想知道組件間的通信。Alpine.js避免了組件之間的顯式連接(例如，沒(méi)有父-子道具)。與其相反，它通過(guò)$dispatch指令使用瀏覽器環(huán)境(即窗口)作為事件總線。這符合Alpine的理念，即添加足夠的功能來(lái)增強(qiáng)現(xiàn)有的功能。它工作得很好。 ?

隨著應(yīng)用程序的規(guī)模和復(fù)雜性的增長(zhǎng)，所有這些元素都將受到考驗(yàn)。所以它適用于選擇的任何堆棧。Alpine.js是你下次進(jìn)行代碼冒險(xiǎn)的一個(gè)誘人選擇。?

原文標(biāo)題：??Intro to Alpine.js: A JavaScript framework for minimalists??，作者：Matthew Tyson

責(zé)任編輯：華軒來(lái)源： 51CTO