菜园前端
Handlebars

Handlebars 入门：模板引擎是什么

了解 Handlebars 模板引擎的基本概念、适用场景，学会安装并用最简示例渲染第一份数据。

🎯 引言

学会这篇文章，你将明白 Handlebars 是什么、它能帮你解决什么问题，以及如何在项目里快速上手。我们会一起安装 Handlebars，写出第一个模板，并把一段 JSON 数据渲染成 HTML。

🧱 什么是模板引擎

在真实项目中，前端页面里的很多内容并不是写死的，而是从后端接口拿到的数据。比如用户信息、商品列表、新闻详情等。

如果直接用字符串拼接 HTML，代码会很难维护：

index.js
const user = { name: '小明', age: 18 };
const html = '<div><h1>' + user.name + '</h1><p>年龄：' + user.age + '</p></div>';

模板引擎就是用来解决这个问题的工具。它让你把 HTML 结构和数据分开写：

  • HTML 结构放在模板里。
  • 数据通过 JavaScript 传入。
  • 模板引擎负责把两者合并成最终 HTML。

Handlebars 就是一种轻量、易学、流行的模板引擎。

✨ 为什么选择 Handlebars

市面上模板引擎很多，Handlebars 有这几个特点：

  • 语法简单：使用 {{ }} 包裹变量和逻辑，一眼就能看懂。
  • 模板里不写复杂逻辑：模板里尽量不写复杂逻辑，保持清晰。
  • 可扩展：支持自定义 Helper 和 Partials，方便复用。
  • 生态成熟：诞生早、文档全、社区资料多。
你可以把 Handlebars 理解成“填空题”：先写好带空格的试卷（模板），再填入正确答案（数据），最后得到完整的答卷（HTML）。

🚀 安装 Handlebars

Handlebars 既可以在浏览器里直接使用，也可以在 Node.js 里使用。本课程主要讲解 Node.js 环境下的用法。

当前课程环境使用 Node.js v22.0.0，对应的 Handlebars 版本为 4.7.9。你可以执行以下命令安装：

npm init -y
npm install handlebars@4.7.9

安装完成后，可以在代码中引入：

index.js
const Handlebars = require('handlebars');
如果你使用 ES Modules（"type": "module"），需要用 import Handlebars from 'handlebars' 的方式引入。

📦 第一个 Handlebars 示例

我们来看一个最简示例：

index.js
const Handlebars = require('handlebars');

// 1. 定义模板
const template = '<h1>你好，{{name}}</h1>';

// 2. 编译模板
const compiled = Handlebars.compile(template);

// 3. 传入数据，得到 HTML
const html = compiled({ name: '小明' });

console.log(html);

运行后输出：

<h1>你好，小明</h1>

三步走：

  1. 写模板：用 {{name}} 表示要插入数据的位置。
  2. 编译模板：Handlebars.compile() 把模板字符串变成可复用的函数。
  3. 传入数据：调用编译后的函数，传入数据对象，得到最终 HTML。

💡 什么时候用 Handlebars

Handlebars 适合这些场景：

  • 后端渲染页面（如 Express、Koa 等 Node.js 框架）。
  • 前端需要动态生成 HTML 片段（不依赖 Vue/React 时）。
  • 邮件、报告等静态 HTML 内容生成。
  • 代码生成器（如 Plop）中渲染模板。

如果你已经在用 Vue 或 React，通常不需要额外引入 Handlebars，因为它们自带模板/JSX 语法。

🧾 小节总结

  • 模板引擎能把 HTML 结构和数据分离，避免字符串拼接。
  • Handlebars 是一款轻量、易学、可扩展的模板引擎。
  • 使用分三步：写模板、compile() 编译、传入数据得到 HTML。
  • Handlebars 适合 Node.js 后端渲染、静态 HTML 生成、代码生成器等场景。

❓ 知识问答

Q1：Handlebars 和 Vue 的模板语法有什么区别？

A：两者都用 {{ }} 插值，但 Vue 是响应式框架，数据变化会自动更新 DOM；Handlebars 只负责一次性把数据渲染成字符串，没有响应式能力。

Q2：Handlebars 只能在 Node.js 里用吗？

A：不是。Handlebars 也可以在浏览器里直接引入脚本使用，但本课程主要讲解 Node.js 环境下的用法。

Q3：Handlebars.compile() 有什么作用？

A：它把模板字符串转换成一个函数，这个函数可以接收数据并返回渲染后的 HTML。同一个模板编译一次后可以多次复用。

Q4：为什么要指定 Handlebars 的版本？

A：不同版本可能存在 API 差异。指定版本能确保你本地运行结果和课程示例一致。

🧪 小练习

请创建一个 handlebars-demo 项目，完成以下步骤：

  1. 执行 npm init -y 初始化项目。
  2. 执行 npm install handlebars@4.7.9 安装依赖。
  3. 新建 index.js，使用 Handlebars 渲染以下信息：
index.js
const data = {
    name: '小红',
    age: 20
};

// 请在这里编写代码，输出包含 name 和 age 的 HTML

🎉 恭喜你已经完成了 Handlebars 的入门！下一篇我们会学习 Handlebars 的核心语法，包括变量、表达式和注释。

Yarn 与 pnpm

了解 Yarn 和 pnpm 与 NPM 的区别，掌握它们的基本命令和适用场景，学会根据项目选择合适的包管理工具。

基本语法

掌握 Handlebars 最常用语法，包括普通变量、路径访问、HTML 转义、表达式和注释。