想要建立具有終極靈活性和適應(yīng)性的互動(dòng)式 Web 應(yīng)用程式？

看看？ mizu.js ???!

它提供了大約 30 個(gè)強(qiáng)大的指令來動(dòng)態(tài)渲染 HTML、監(jiān)聽事件、創(chuàng)建自訂元素、綁定和模型屬性、處理 HTTP 請求、渲染 markdown 和程式碼等等！

它可以在任何現(xiàn)代瀏覽器上在客戶端運(yùn)行......

...而且還可以在您最喜歡的運(yùn)行時(shí)上運(yùn)行伺服器端，無論是 Node、Deno 還是 Bun！您甚至可以使用它來產(chǎn)生靜態(tài)網(wǎng)站！

為什麼還要另一個(gè) JavaScript 範(fàn)本庫？

我明白你的擔(dān)憂，但請聽我說完！

多年來，我對僅僅為了創(chuàng)建簡單的互動(dòng)式網(wǎng)頁而建立整個(gè)生態(tài)系統(tǒng)的需求感到越來越沮喪。您通常需要一個(gè)專用的工具箱、大量的依賴項(xiàng)、轉(zhuǎn)譯步驟，以及學(xué)習(xí)新的語言超集。您甚至可能最終花在設(shè)定環(huán)境上的時(shí)間比實(shí)際處理專案的時(shí)間還要多！

這就是為什麼我越來越喜歡 Alpine.js 和 htmx 等函式庫，它們不需要設(shè)定且易於使用。然而，我覺得這些有些限制。由於它們主要是為客戶端使用而設(shè)計(jì)的，因此實(shí)際上不可能在伺服器端渲染上下文（包括靜態(tài)生成）中使用它們。

與此同時(shí)，我開始編寫越來越多的同構(gòu) JavaScript（即同時(shí)在客戶端和伺服器中工作），並發(fā)現(xiàn) Deno 是它的完美運(yùn)行時(shí)。 Deno 依賴 Web 標(biāo)準(zhǔn)，而不是像 Node.js 那樣實(shí)作自己的標(biāo)準(zhǔn)。因此，我遇到了一些不應(yīng)該存在的相容性問題，因?yàn)殚_發(fā)人員應(yīng)該可以自由地使用最適合他們的任何東西，無論是 Node、Deno、Bun 還是瀏覽器。

考慮到所有這些要點(diǎn)，我開始研究「水」（mizu，日語中水的漢字），這是一個(gè)試圖解決所有上述問題的新庫。

今天，我很高興向您介紹它！

mizu.js 直接與您的 HTML 集成，並使用普通 JavaScript 表達(dá)式作為其表達(dá)式。這意味著您無需學(xué)習(xí)新的語言或範(fàn)例即可開始使用它。

<!-- Conditionally render elements -->
<a *if="Math.round(Math.random())">Heads!<a>
<b *else>Tails!</b>

<!-- Render list elements dynamically -->
<ul>
  <li *for="const value of ['foo', 'bar', 'baz']" *text="value"></li>
  <li *for="['qux', 'quux', 'corge']" *text="$value"></li>
</ul>

<!-- Bind attributes and handle events -->
<form @submit.prevent :class="{ 'user-form': true }" *set="{ input: '' }">
  <input type="text" ::value="input">
</form>

<!-- Template text content -->
<span *text="`Today is ${new Date()}`"></span>
<span *mustache>Today is {{ new Date() }}</span>

在 mizu.js 中，指令的第一個(gè)字元表示其用途：

• * 用於一般指令
• @ 用於基於事件的指令
• ：用於屬性綁定指令
  • :: 用於雙向綁定指令（也稱為建模）

您可能會(huì)注意到與其他框架和庫的語法有一些相似之處，這是故意的。

mizu.js 是響應(yīng)式的，只要您的資料發(fā)生變化（在客戶端），就會(huì)自動(dòng)更新 DOM。

渲染豐富的內(nèi)容

mizu.js 也提供了一些簡潔的指令來輕鬆渲染豐富的內(nèi)容，例如 markdown 或程式碼語法突出顯示。

<!-- Conditionally render elements -->
<a *if="Math.round(Math.random())">Heads!<a>
<b *else>Tails!</b>

<!-- Render list elements dynamically -->
<ul>
  <li *for="const value of ['foo', 'bar', 'baz']" *text="value"></li>
  <li *for="['qux', 'quux', 'corge']" *text="$value"></li>
</ul>

<!-- Bind attributes and handle events -->
<form @submit.prevent :class="{ 'user-form': true }" *set="{ input: '' }">
  <input type="text" ::value="input">
</form>

<!-- Template text content -->
<span *text="`Today is ${new Date()}`"></span>
<span *mustache>Today is {{ new Date() }}</span>

基於 HTTP 的指令

mizu.js 提供了一組受 htmx 啟發(fā)的指令。

這些指令在用於匯入內(nèi)容的伺服器渲染上下文中特別有用，但它們也可以在客戶端上用於執(zhí)行 HTTP 請求。

<!-- Automatically generate a table of contents from h1-h6 tags within the selected element -->
<nav *toc="'main section'"></nav>

<!-- Render markdown content -->
<div *markdown>**hello world!**</div>

<!-- Highlight syntax using TypeScript flavor -->
<code *code[ts]>const foo = "bar"</code>

使用 HTML 自訂元素

雖然 HTML 本身支援自訂元素，但使用它們可能有點(diǎn)乏味。

mizu.js 使用更簡潔的語法來在文件中定義和使用自訂元素，從而簡化了此過程。

<!-- Fetch and display remote content -->
<div %http="https://example.com" %response.html></div>
<div %http="https://example.com" %response.html="$content.querySelector('h1')"></div>

<!-- Make an HTTP POST request on click and show the response -->
<button 
  %http.post="https://example/api"
  %header[x-foo]="'my custom header'"
  %body.json="{ foo: 'bar' }"
  %@click="alert(await $response.text())"
></button>

獎(jiǎng)勵(lì)：您可以透過使用基於 HTTP 的指令匯入自訂元素，輕鬆地在其他專案中重複使用它們！

<!-- Create a custom element -->
<template *custom-element="my-element">
  <div *mustache>
    There is {{ items.length }} items:
    <ul><slot name="items"></slot></ul>
  </div>
</template>

<!-- Use the custom element -->
<my-element>
  <li #items>foo</li>
  <li #items>bar</li>
</my-element>

雜項(xiàng)

我不會(huì)在這裡介紹所有可用的指令，但還有更多可以探索！
以下是一些有趣的精選：

<template 
  *custom-element="my-element" 
  %http="https://example.com/partial/my-element.html" 
  %response.html
></template>

以程式方式使用 mizu.js

到目前為止，我已經(jīng)展示瞭如何直接在 HTML 文件中使用 mizu.js，但您也可以以程式設(shè)計(jì)方式使用它來實(shí)現(xiàn)更高級的用例。

因?yàn)?mizu.js 指令只是普通的 HTML 屬性，所以客戶端和伺服器端渲染的語法保持相同。這意味著您可以輕鬆地在渲染環(huán)境之間切換，而無需更改模板！

<!-- Automatically update the time every second -->
<!-- Perfect for elements where reactivity can't be tracked -->
<time *refresh="1" *mustache>{{ new Date() }}</time>

<!-- Execute raw code for special cases -->
<div *eval="this.remove()"></div>

產(chǎn)生靜態(tài)站點(diǎn)

您可以輕鬆產(chǎn)生靜態(tài)網(wǎng)站

import Mizu from "@mizu/render/server"

export default {
  async fetch() {
    const headers = new Headers({ "Content-Type": "text/html; charset=utf-8" })
    const body = await Mizu.render(`<div *text="foo"></div>`, { context: { foo: "? Yaa, mizu!" } })
    return new Response(body, { headers })
  },
}

今天就開始使用 mizu.js！

想在不安裝任何東西的情況下嘗試 mizu.js 嗎？
看看 mizu.sh/playground！

造訪 mizu.sh 了解全面概述！

額外獎(jiǎng)勵(lì)： mizu.js 與 matcha.css 完美搭配，讓您的網(wǎng)站看起來棒極了！

以上是使用 mizu.js 增強(qiáng)您的 HTML！的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！