随着服务器端开发的发展，在需要从服务器取模板时，需要把 HTML 代码传到客户端。本文将讨论主要的方法。所有这些方法都会用到 JavaScript，但它们的核心思想可以用其他编程语言来表达。

让我们直接看代码，看看这在项目中是如何实现的。

从后端的角度来看，重要的是要指出，在客户端我们需要从某个地方接收模板。为此，我们可以建立一个 API 路由，通过该路由来获取服务器上的 HTML。首先，我们需要创建要发送给客户端的 HTML 代码：

form.html

    <h1>联系我们</h1>
    <form action="/submit" method="POST">
      <label for="name">名字：</label><br>
      <input type="text" id="name" name="name" required></br><br>

      <label for="email">邮箱：</label><br>
      <input type="email" id="email" name="email" required></br><br>

      <label for="message">留言：</label><br>
      <textarea id="message" name="message" rows="4" cols="50" required></textarea></br><br>

      <button type="submit">发送</button>
    </form>

进入全屏，退出全屏

这是一个简单的联系表格。如果它不仅能在这个网站上编辑，还能在服务器端和客户端同时编辑，而且不仅仅局限于一个网站，而是在几个关联网站上使用，那就太棒了。

为此，我们来创建一个 API 路由，通过它来接收来自服务器的 HTML。对于后端部分，我们将使用 Node.js。我们将使用 Express.js 这个框架，它是当今最流行的一个框架，非常适合我们正在处理的任务。首先，我们指定将处理 HTML 的控制器：

const express = require('express'); // 引入express模块
const expressRouter = express.Router(); // 创建一个express路由器
const path = require('path'); // 引入路径处理模块

const formController = (req, res) => { // 表单控制器函数
  res.sendFile(path.join(__dirname, '../form.html')); // 发送表单HTML文件
};

expressRouter.use('/getForm', formController); // 当访问'/getForm'时，使用formController函数

切换到全屏，退出全屏

然后，你需要将控制器连接到 /api 上，以避免将常规网站的路由与后端的路由混淆。在 express.js 中有一个应用程序入口点，所有内容的初始化都在这里进行。在这里我们还需要导入控制器。

app.js （一个名为'app.js'的文件）

const express = require("express");
const path = require("path");
const bodyParser = require("body-parser");
const cors = require("cors");
const PORT = 8000;
const app = express();
const routes = require("./routes/formController");

// 使用中间件处理 url 编码
app.use(bodyParser.urlencoded({ extended: false }));

// 使用 cors 中间件处理跨域问题
app.use(cors({ origin: true, credentials: true }));

// 设置静态文件目录
app.set(express.static(path.join(__dirname, "src")));

// 将 api 作为前缀使用路由
app.use("/api", routes);

// 监听端口
app.listen(PORT);

点全屏 取消全屏

然后，我们应该在网站上添加一个 /api/getForm 的路由，我们可以向这个路由发送 GET 请求。作为回应，我们将收到 HTML 内容。

这里我们可以看几种从服务器获取HTML的方法。所有这些方法都基于向服务器发送请求。在JavaScript中有一个fetch API，允许你做类似的事情，因为XMLHTTPRequest 已经过时了，所以这里不考虑它。如果你不需要支持旧浏览器，建议你不要使用它。

为了从服务器加载HTML内容，我们可以使用HMPL，这是一种从服务器向客户端显示界面的模板语言。它基于发送到服务器的自定义请求，这些请求会被处理成可以直接使用的HTML。

使用之前，首先，我们来安装 hmpl-js 作为依赖项，并创建一个脚本，

npm i hmpl-js  // 使用npm安装hmpl-js库

全屏/退出全屏

然后，我们导入 compile 函数。

    import { compile } from "hmpl-js";

    const templateFn = compile(
      `{{ src: "/api/获取表单" }}`
    );

    const form = templateFn();

全屏模式，退出

结果是:

    form = {
      response: <template><h1>联系我们</h1><form action="/submit" method="...</template>,
      status: 200
    }

全屏 (点击这里进入) / 退出全屏 (点击这里退出)

在这里，我们得到一个 template，我们的表单就存储在这个模板里。你也可以直接在 div 里显示表单，这样就不再使用 template。

    import { compile } from "hmpl-js";

    const templateFn = compile(
      `<div>{{ src: "/api/getForm" }}</div>`
    );

    const form = templateFn();

    /*
      form = {
        response: 页面：<div><h1>联系我们</h1>...</div>,
        status: 200
      }
    */

全屏显示 退出全屏

我们立即得到一个可以直接添加到DOM中的元素。

特点（优点如下）:

1. 可重复使用性：
   你可以像创建类的实例一样，任意多次重复使用一个已经创建好的代码模板。

2. 简单明了的语法：
   HTML 引入了一个请求对象，这个对象的语法与原生的语法非常相似，因此在编写 JS 代码时，可以轻松复制这段代码而无需担心，因为该模块处理 JSON5 数据。

3. 可自定义：
   模板语言提供了广泛的需求定制功能。与类似项目（如 HTMX）不同，你可以几乎完全掌控流程。

4. 它很轻：
   它大约15千字节，几乎不影响项目的运行。

5. 浏览器兼容:
   现代的 JavaScript API，例如 fetch()，在浏览器中得到了广泛支持，确保大多数情况下无需额外的 polyfills 即可兼容。

缺点：

1. 依赖项：
   当你连接一个模块时，你就把额外的代码添加到项目中，这些代码占用了一定数量的字节。

2. 旧版浏览器中的现代 API 限制：
   虽然得到了广泛支持，例如 fetch()，但在旧版浏览器中可能需要使用 polyfills，而一些库则会处理向后的兼容性。

首先，你需要做的是创建一个脚本文件，并在那个文件中向服务器发送请求。代码示例如下：

主文件 (main.js)

    fetch('/api/getForm') // HTML 片段的 URL
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP 错误！状态码：${response.status}`);
      }
      return response.text();
    })
    .then(html => {
      console.log(html)
    })
    .catch(error => {
      console.error('获取 HTML 时发生错误：', error);
    });

全屏，退出全屏

在这里我们从服务器收到响应，如果成功，则调用 text 函数接收它。另外，HTTP 状态码 100 主要表示重定向，所以在处理这些状态码时也需要更加小心并增加错误处理。

你可以在这里了解更多关于HTTP码的详情：这里。

特点（优点）:

1. 轻量级、无依赖：
   使用纯JavaScript无需额外库或框架，减少了项目的大小和依赖。

2. 完全控制：
   原生 JavaScript 让你对实现细节拥有完全的掌控，可以处理网络请求和响应，以及 DOM 操作。

3. 浏览器兼容性：
   现代的 JavaScript API，如 fetch()，在大多数浏览器中得到广泛支持，确保大多数情况下不需要额外的 polyfills。

4. 学习机会：
   通过使用纯JavaScript，开发人员可以更好地理解这些基本概念，例如HTTP请求、响应和DOM，从而提升他们的编程水平。

需要注意的地方有：

1. 冗长的代码：
   纯JavaScript往往需要更多的样板代码，像Axios这样的库或React这样的框架，能更简洁地处理请求和更新内容。

2. 错误处理:
   处理错误（比如网络问题、无效响应）在没有高级库的帮助时会变得复杂且重复累赘。

3. 缺乏抽象思维：
   处理超时、重试或并发请求等任务需要手动完成，这可能会很麻烦，还容易出错。

4. 可维护性：
   完全使用JavaScript编写的代码在较大项目中可能更难维护和管理，因为它冗长并且缺乏标准化的编程模式。

5. 旧版浏览器中的现代API限制：
   虽然得到了广泛支持，但像 fetch() 这样的功能可能需要为旧版浏览器添加 polyfills，而一些库则会自动处理向后兼容性。

视情况而定，你可以选择第一种或第二种方法。如果采用第二种方法，你可以完全掌控整个过程，但这种方法仍然不太适合与多个组件一起操作，因为需要自己编写逻辑，这会花掉不少时间。

感谢大家的阅读支持！希望这篇文章对你们有帮助！

此处省略内容

👍

另外，如果你能给这个项目点个星支持我，我会非常感激。非常感谢，

星: HMPL ☆