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
智能提示对 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,这个局限非常糟糕。