JavaScript Library – 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/alpinejs@3.x.x/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。

注: x-for，x-if 内只能有一个 root element，这个局限非常糟糕。