使用 mizu.js 增強您的 HTML！

想要建立具有終極靈活性和適應性的互動式 Web 應用程式？

看看？ mizu.js ?‍?!

它提供了大約 30 個強大的指令來動態渲染 HTML、監聽事件、創建自訂元素、綁定和模型屬性、處理 HTTP 請求、渲染 markdown 和程式碼等等！

它可以在任何現代瀏覽器上在客戶端運行......

...而且還可以在您最喜歡的運行時上運行伺服器端，無論是 Node、Deno 還是 Bun！您甚至可以使用它來產生靜態網站！

為什麼還要另一個 JavaScript 範本庫？

我明白你的擔憂，但請聽我說完！

多年來，我對僅僅為了創建簡單的互動式網頁而建立整個生態系統的需求感到越來越沮喪。您通常需要一個專用的工具箱、大量的依賴項、轉譯步驟，以及學習新的語言超集。您甚至可能最終花在設定環境上的時間比實際處理專案的時間還要多！

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

與此同時，我開始編寫越來越多的同構 JavaScript（即同時在客戶端和伺服器中工作），並發現 Deno 是它的完美運行時。 Deno 依賴 Web 標準，而不是像 Node.js 那樣實作自己的標準。因此，我遇到了一些不應該存在的相容性問題，因為開發人員應該可以自由地使用最適合他們的任何東西，無論是 Node、Deno、Bun 還是瀏覽器。

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

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

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

<!-- 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 中，指令的第一個字元表示其用途：

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

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

mizu.js 是響應式的，只要您的資料發生變化（在客戶端），就會自動更新 DOM。

渲染豐富的內容

mizu.js 也提供了一些簡潔的指令來輕鬆渲染豐富的內容，例如 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 啟發的指令。

這些指令在用於匯入內容的伺服器渲染上下文中特別有用，但它們也可以在客戶端上用於執行 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 本身支援自訂元素，但使用它們可能有點乏味。

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>

獎勵：您可以透過使用基於 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>

雜項

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

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

以程式方式使用 mizu.js

到目前為止，我已經展示瞭如何直接在 HTML 文件中使用 mizu.js，但您也可以以程式設計方式使用它來實現更高級的用例。

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

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

產生靜態站點

您可以輕鬆產生靜態網站

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.js 是一個輕量級的 html 模板引擎，適用於任何側面渲染。沒有建置步驟，沒有配置，沒有頭痛。

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

額外獎勵： mizu.js 與 matcha.css 完美搭配，讓您的網站看起來棒極了！

以上是使用 mizu.js 增強您的 HTML！的詳細內容。更多資訊請關注PHP中文網其他相關文章！