JavaScript – Alpine.js

前言

Alpine 是高山的意思。Alpine.js 是一個輕量級的 JS Framework。

我爲什麼會去用它呢？

是這樣的，我在做企業網站開發的時候會有 2 個階段。

第一個 draft 階段，只寫 HTML、CSS、JS。不會涉及 ASP.NET Core、SQL Server。

第二個階段就是 final，會引入 ASP.NET Core、SQL Server 等等。

爲什麼要分 2 個階段呢？顧名思義 draft 嘛，就是還需要被修改的。有時候內容甚至是 lorem...

不用 ASP.NET Core 怎麼跑呢？首先是利用 Vite 做 server。然後再配上一個 template engine 就替代掉了 razor。

這個 template engine 就是 Alpine.js 了。這篇就是記入一下基本的使用方法。

 

Get Started

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

直接放到 HTML 裏頭。上古時代的引入方式。非常乾脆。

<div class="container" x-data="{ firstName: 'Derrick' }">
  <h1 x-text="firstName"></h1>
</div>

x-data 類似於聲明一個 variable

x-text 則是把 variable 寫入 h1

<button x-on:click="firstName = 'Alex'">change name</button>

監聽 click 時間，然後修改 variable。

整體效果

它有點像十幾年前的 Angular.js，主要就是搞 MVVM。我覺得如果你像我這樣只是要搞 MVVM 在 dev 情況下，Alpine.js 是首選 Framework。

 

VS Code

Alpine.js IntelliSense

智能提示對 DX 是很重要的，幸好有插件。

 

配搭 TypeScript

yarn add alpinejs
yarn add @types/alpinejs --dev

global.d.ts

import { Alpine } from 'alpinejs';

declare global {
  interface Window {
    Alpine: Alpine;
  }
}

index.ts

import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();

 

About Render & Re-render

Alpine 在 page load 的時候會 scan HTML。有 x-data 或 x-init 的 element 會被 render。

動態插入 element 時，Alpine 也會知道（估計它用了 MutationObserver），所以會 re-render。

但是 MutationObserver 會慢半拍，如果我們想對 render 後的 DOM 做操作，那最好自己 manual call re-render。

const html = `
  <ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
  <template x-for="(color, index) in colors">
    <li>
      <span x-text="index + ': '"></span>
      <span x-text="color"></span>
    </li>
  </template>
  </ul>
`;

setTimeout(() => {
  document.querySelector<HTMLElement>('.container')!.innerHTML = html;
  Alpine.initTree(document.querySelector<HTMLElement>('.container')!); // re-render
  alert(document.querySelectorAll('li').length);  // 3
}, 1000);

 

x-for

<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
    <template x-for="(color, index) in colors">
        <li>
            <span x-text="index + ': '"></span>
            <span x-text="color"></span>
        </li>
    </template>
</ul>

x-data 聲明變量。x-for 配上 template 做 looping。