HMPL 模板语言简介

简介

大家好！我曾经写过很多文章，但其实我从来没有讲过这个HMPL是什么。今天我将纠正自己，并以完整的示例展示它的工作原理以及它如何在您的项目中发挥作用。

这是什么？

我该如何描述呢？也许最简单的描述方式是：适用于任何 Web 应用程序的服务器端渲染 (SSR)，类似Mustache、Handlebars、Freemarker 工作原理，但是其特点是允许您直接从服务器将组件加载到客户端，并且可以完全自定义或者作为UI模块封装为组件。而且，最重要的是，它都像模板语言一样，就是一切都超级方便实用。

好的，这就是我试图用几句话表达的内容，但总的来说，值得看一下这个示例，然后我们可以了解更多信息。

例子

作为一个例子，我们来看一个简单的答题器：

import hmpl from "hmpl-js";

const templateFn = hmpl.compile(
  `<div>
      <button data-action="increment" id="btn">Click!</button>
      <div>Clicks: {{ src: "/api/clicks", after: "click:#btn" }}</div>
  </div>`
);

const clicker = templateFn(({ request: { event } }) => ({
  body: JSON.stringify({ action: event.target.getAttribute("data-action") }),
})).response;

document.querySelector("#app").append(clicker);

结果如下：

事实上，可以有很多使用示例。从图库到加载简单文本

HMPL 对您的项目有何帮助？

事实上，在项目中，您可能会遇到大量可能需要此模块的情况。首先，这当然是站点之间共享组件。

如果您的多个站点上有重复的侧边栏之类的组件，那么最好将它们移动到服务器并通过请求从那里获取它们。通过更改一次模板，您将在数十个甚至数百个网站上获得相同的结果。

此外，这种与服务器一起工作的做法将允许减少客户端上的代码。因此，该网站的用户第一次加载该网站的速度会快得多，因为事实上，捆绑包的大小会更小。