使用 mizu.js 增强您的 HTML！-js教程-PHP中文网

想要构建具有终极灵活性和适应性的交互式 Web 应用程序？

看看？ mizu.js ?‍?!

它提供了大约 30 个强大的指令来动态渲染 HTML、监听事件、创建自定义元素、绑定和模型属性、处理 HTTP 请求、渲染 markdown 和代码等等！

它可以在任何现代浏览器上在客户端运行......

Supercharge your HTML with mizu.js!

...而且还可以在您最喜欢的运行时上运行服务器端，无论是 Node、Deno 还是 Bun！您甚至可以使用它来生成静态网站！

Supercharge your HTML with mizu.js!

为什么还要另一个 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 })
  },
}

登录后复制