想要構(gòu)建具有終極靈活性和適應(yīng)性的交互式 Web 應(yīng)用程序？

看看？ mizu.js ???!

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

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

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

為什么還要另一個 JavaScript 模板庫？

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

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

這就是為什么我越來越喜歡 Alpine.js 和 htmx 等庫，它們不需要設(shè)置且易于使用。然而，我覺得這些有一些局限性。由于它們主要是為客戶端使用而設(shè)計的，因此實際上不可能在服務(wù)器端渲染上下文（包括靜態(tài)生成）中使用它們。

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

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

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

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

<!-- 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 是響應(yīng)式的，只要您的數(shù)據(jù)發(fā)生變化（在客戶端），就會自動更新 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ā)的指令。

這些指令在用于導(dǎo)入內(nèi)容的服務(wù)器渲染上下文中特別有用，但它們也可以在客戶端上用于執(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 本身支持自定義元素，但使用它們可能有點乏味。

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 的指令導(dǎo)入自定義元素，輕松地在其他項目中重用它們！

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

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

因為 mizu.js 指令只是普通的 HTML 屬性，所以客戶端和服務(wù)器端渲染的語法保持相同。這意味著您可以輕松地在渲染環(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>

生成靜態(tài)站點

您可以輕松生成靜態(tài)站點

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 了解全面概述！

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

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