HMPL：面向服务器的可定制JavaScript模板语言，让UI渲染更高效

一、初识HMPL：什么是服务器导向的模板语言？

如果你经常开发网页应用，可能会遇到这样的问题：客户端JavaScript文件越来越大，加载速度变慢；服务器与客户端的UI交互逻辑复杂，维护成本高；想要安全地从服务器获取并渲染HTML，又担心XSS攻击……这些问题，或许可以通过一个叫HMPL的工具来解决。

HMPL（全称可理解为“Server-oriented customizable templating for JavaScript”）是一款轻量级的模板语言，核心作用是从服务器向客户端高效展示UI。它的工作原理很简单：通过浏览器的Fetch API向服务器发送可定制的请求，服务器处理后返回现成的HTML，HMPL再将这些HTML渲染到页面上。

和传统的前端框架不同，HMPL不追求在客户端处理复杂的状态管理或DOM操作，而是将重心放在“服务器与客户端的高效协作”上。它天生支持JSON5（一种更灵活的JSON扩展格式）和DOMPurify（一种HTML净化工具），既能让模板中的数据格式更灵活，又能保障渲染内容的安全性。

简单来说，HMPL就像一座桥梁，让服务器能直接“推送”现成的UI片段到客户端，大幅减少客户端JavaScript的代码量，同时让UI渲染更简单、更安全。

二、为什么选择HMPL？看看它的核心优势

或许你会问：市面上已经有不少模板引擎和前端工具了，HMPL有什么特别之处？让我们从实际开发需求出发，看看它的核心优势。

1. 大幅缩减客户端文件大小

前端开发中，“bundle size”（打包后的文件大小）是影响页面加载速度的关键因素之一。HMPL的设计理念是“让服务器多做一点，客户端少做一点”——通过服务器返回现成的HTML，替代客户端通过JavaScript动态生成DOM的过程，从而显著减少客户端JavaScript的代码量。

举个直观的例子，HMPL官网做过一次应用大小对比（单位：字节），在实现相似功能的情况下，HMPL的打包体积远小于其他主流工具。

这种“轻客户端”的模式，对移动端或低网速环境下的应用体验提升尤为明显。

2. 基于Fetch API，遵循现代标准

HMPL的请求处理完全基于浏览器原生的Fetch API，而不是过时的XMLHttpRequest。这意味着：

你可以直接使用Fetch的所有特性，比如 Promise 语法、请求拦截、响应处理等；
无需额外学习新的请求API，熟悉Fetch的开发者能快速上手；
更好的浏览器兼容性（支持所有现代浏览器）和未来扩展性。

3. 高度可定制的请求逻辑

HMPL的核心是{{#request}}语法（也可简写为{{#r}}），通过它你可以自定义请求的几乎所有细节：

指定请求地址（src属性）；
触发时机（比如after="click:#btn"表示点击按钮后发送请求）；
请求方法（GET、POST等）、请求头、请求体；
加载状态提示（通过{{#indicator}}定义加载中显示的内容）。

这种灵活性让你能轻松实现“按需加载”“事件触发请求”等常见需求，而无需编写大量重复的JavaScript代码。

4. 内置安全防护，抵御XSS攻击

从服务器获取HTML并直接渲染到页面上，最担心的就是XSS（跨站脚本）攻击。HMPL默认集成了DOMPurify，会自动净化服务器返回的HTML内容，过滤掉恶意脚本，确保渲染的内容安全可靠。

这意味着你可以放心地从服务器获取动态HTML，无需手动编写净化逻辑。

5. 简单易用，学习成本低

HMPL的语法基于“块标记”，和HTML的标签结构类似，比如{{#request}}...{{/request}}，熟悉HTML的开发者很容易理解。同时，它支持JSON5格式的数据，你可以像写JavaScript对象一样在模板中定义数据，无需严格遵守JSON的引号和逗号规则。

无论是通过JavaScript代码编译模板，还是直接在HTML中使用<template hmpl>标签，接入方式都非常直观。

6. 适用场景广泛，兼容性强

HMPL不挑项目环境，几乎可以融入任何前端工程：

可以通过npm安装，配合webpack、Vite等构建工具使用；
可以直接通过CDN引入，在原生HTML页面中使用；
支持.hmpl扩展名的文件，配合专用的loader或插件（如vite-plugin-hmpl）实现工程化开发；
甚至可以替代Alpine.js、HTMX等工具，用于需要轻量交互的项目。

三、快速上手：HMPL的基本用法

说了这么多优势，不如直接动手试试。下面通过两个示例，带你了解HMPL的核心用法。

示例1：通过JavaScript代码使用HMPL

假设你需要实现一个“点击计数器”：点击按钮后，从服务器获取当前的点击次数并显示。用HMPL可以这样做：

步骤1：安装HMPL

首先，通过npm安装HMPL（需要Node.js v10.12.0及以上版本）：

npm i hmpl-js

步骤2：编写模板并编译

// 导入HMPL库
import hmpl from "hmpl-js";

// 编译HMPL模板
const templateFn = hmpl.compile(`
  <div>
    <!-- 定义一个按钮，点击后触发请求 -->
    <button data-action="increment" id="btn">Click!</button>
    <!-- 显示点击次数：通过请求从/api/clicks获取数据，点击#btn后触发 -->
    <div>Clicks: {{#request src="/api/clicks" after="click:#btn"}}{{/request}}</div>
  </div>
`);

模板中的{{#request src="/api/clicks" after="click:#btn"}}{{/request}}是核心：src指定请求地址，after="click:#btn"表示“在#btn元素被点击后发送请求”。

步骤3：处理请求并渲染

// 生成响应处理函数，返回渲染后的DOM元素
const clicker = templateFn(({ request: { event } }) => ({
  // 定义请求体：将按钮的data-action属性作为参数发送给服务器
  body: JSON.stringify({ action: event.target.getAttribute("data-action") })
})).response;

// 将生成的元素添加到页面
document.querySelector("#app").append(clicker);

这里的回调函数用于自定义请求参数（比如请求体），event是触发请求的事件对象（这里是点击事件）。服务器收到请求后，处理并返回点击次数的HTML（比如<span>5</span>），HMPL会自动将其插入到页面中。

示例2：直接在HTML中使用HMPL（无需手动编写JavaScript）

如果你的项目更倾向于“零JS配置”，可以配合hmpl-dom模块，直接在HTML中使用HMPL模板：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HMPL示例</title>
  </head>
  <body>
    <main>
      <!-- 定义HMPL模板 -->
      <template hmpl>
        <div>
          <!-- 从/api/my-component.html请求组件HTML -->
          {{#request src="/api/my-component.html"}}
            <!-- 请求pending状态时显示的加载提示 -->
            {{#indicator trigger="pending"}}
              <p>Loading...</p>
            {{/indicator}}
          {{/request}}
        </div>
      </template>
    </main>

    <!-- 引入依赖：JSON5、DOMPurify、HMPL核心库、hmpl-dom -->
    <script src="https://unpkg.com/json5/dist/index.min.js"></script>
    <script src="https://unpkg.com/dompurify/dist/purify.min.js"></script>
    <script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>
    <script src="https://unpkg.com/hmpl-dom/dist/hmpl-dom.min.js"></script>
  </body>
</html>

这段代码中，<template hmpl>标签内的内容会被hmpl-dom自动处理：页面加载后，HMPL会自动发送请求到/api/my-component.html，请求过程中显示“Loading…”，收到响应后渲染返回的HTML。整个过程无需你编写额外的JavaScript代码。

四、HMPL的安装方式：3种方法任你选

根据项目需求不同，HMPL提供了多种安装方式，你可以选择最适合自己的一种。

1. 通过包管理器安装（推荐用于工程化项目）

如果你使用npm、yarn等包管理器，可以直接安装hmpl-js：

# npm
npm i hmpl-js

# yarn
yarn add hmpl-js

安装后，你可以在项目中通过import或require引入：

// ES6模块
import hmpl from "hmpl-js";

// CommonJS
const hmpl = require("hmpl-js");

安装目录下的node_modules/hmpl/dist文件夹中，包含未压缩（hmpl.js）和压缩（hmpl.min.js）两个版本，可根据需要选择。

2. 通过CDN引入（适合快速原型或简单项目）

如果你的项目不需要构建工具，可以直接通过CDN引入HMPL及依赖：

<!-- 引入JSON5（HMPL依赖） -->
<script src="https://unpkg.com/json5/dist/index.min.js"></script>
<!-- 引入DOMPurify（HMPL依赖，用于HTML净化） -->
<script src="https://unpkg.com/dompurify/dist/purify.min.js"></script>
<!-- 引入HMPL核心库 -->
<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>
<!-- （可选）引入hmpl-dom，用于自动处理HTML中的<template hmpl>标签 -->
<script src="https://unpkg.com/hmpl-dom/dist/hmpl-dom.min.js"></script>

除了unpkg，你也可以使用skypack等其他CDN，只需替换对应的URL即可。

3. 通过 starter 模板快速启动项目

如果你想基于HMPL搭建完整的应用，可以使用官方提供的Vite starter项目：

npx degit hmpl-language/hello-hmpl-starter hello-hmpl

这条命令会将starter项目克隆到hello-hmpl文件夹，里面包含了HMPL的基础配置、示例代码和开发环境，你可以直接在此基础上开发。

五、HMPL生态系统：这些工具让开发更高效

为了提升开发体验，HMPL有一系列配套工具，覆盖了从代码编辑到构建的全流程。

1. VS Code 扩展：hmpljs.hmpl

这是HMPL官方推出的VS Code扩展，提供语法高亮、代码提示等功能，让你在编写.hmpl文件时更流畅。你可以在VS Code Marketplace中搜索并安装。

2. Vite 插件：vite-plugin-hmpl

如果你使用Vite作为构建工具，这个插件可以帮助你在项目中直接处理.hmpl文件，支持热更新等特性。安装方式：

npm i vite-plugin-hmpl -D

然后在vite.config.js中配置即可使用。

3. Webpack 加载器：hmpl-loader

对于使用Webpack的项目，hmpl-loader可以将.hmpl文件编译为JavaScript模块，方便集成到打包流程中。你可以在npm上查看详细的使用说明。

六、常见问题：你可能想知道的事

1. HMPL和HTMX、Alpine.js有什么区别？

HMPL和HTMX、Alpine.js都属于“轻量级前端交互工具”，但侧重点不同：

HTMX更注重通过HTML属性定义AJAX请求和DOM操作，语法更偏向HTML属性；
Alpine.js更像“精简版Vue”，专注于客户端的状态管理和事件处理；
HMPL则是“服务器导向”的，核心是通过模板语法从服务器获取并渲染HTML，减少客户端代码，同时集成了JSON5和DOMPurify等工具。

简单来说，如果你更希望服务器主导UI渲染，减少客户端JS体积，HMPL会是更合适的选择。

2. 使用HMPL需要后端配合吗？

需要。HMPL的{{#request}}语法需要向服务器发送请求，服务器需要返回对应的HTML内容（或其他数据，具体取决于你的逻辑）。后端可以是任何语言（Node.js、Python、Java等），只要能处理HTTP请求并返回HTML即可。

3. HMPL如何处理请求错误？

HMPL支持通过indicator语法定义不同状态的显示内容，比如请求失败时：

{{#request src="/api/data"}}
  {{#indicator trigger="pending"}}加载中...{{/indicator}}
  {{#indicator trigger="error"}}请求失败，请重试{{/indicator}}
{{/request}}

你也可以在JavaScript编译模板时，通过回调函数自定义错误处理逻辑。

4. 可以在HMPL中使用条件判断或循环吗？

HMPL的核心是“从服务器获取HTML”，因此复杂的条件判断、循环等逻辑更适合在服务器端处理（比如通过后端模板引擎生成HTML）。如果需要客户端简单的逻辑，也可以结合少量JavaScript实现，但这并不符合HMPL“轻客户端”的设计理念。

5. HMPL的浏览器兼容性如何？

HMPL基于Fetch API和现代JavaScript特性，支持所有现代浏览器（Chrome、Firefox、Edge、Safari等）。对于IE等老旧浏览器，由于不支持Fetch和ES6+语法，可能需要额外的polyfill（但不推荐，因为这会增加客户端代码量）。

6. 如何在HMPL中发送表单数据？

HMPL支持自动处理表单数据，比如：

<template hmpl>
  <form id="myForm">
    <input name="username" />
    <button type="submit">提交</button>
  </form>
  {{#request src="/api/submit" after="submit:#myForm" method="POST"}}
    {{#indicator trigger="pending"}}提交中...{{/indicator}}
  {{/request}}
</template>

这里的after="submit:#myForm"表示表单提交后发送请求，HMPL会自动将表单数据作为请求体发送（默认是application/x-www-form-urlencoded格式）。

七、总结：HMPL适合什么样的项目？

HMPL的设计理念是“让服务器承担更多UI渲染工作，让客户端更轻量”。如果你正在开发以下类型的项目，它可能会很适合：

注重页面加载速度，希望减少客户端JavaScript体积；
需要频繁从服务器获取并渲染HTML片段（如组件、列表等）；
希望简化服务器与客户端的交互逻辑，避免编写大量AJAX代码；
关注安全性，需要自动处理XSS防护。

当然，HMPL不是“银弹”，如果你的项目需要复杂的客户端状态管理或本地交互（如拖拽、复杂表单验证），可能仍需要结合传统前端框架使用。但在“服务器主导UI”的场景下，HMPL无疑是一个值得尝试的高效工具。

如果你想了解更多，可以访问HMPL的官方网站、文档或GitHub仓库，也可以加入他们的Discord社区与其他开发者交流。

HMPL：重新定义服务器端UI渲染的JavaScript模板引擎