html如何制作模板_HTML模板（如Handlebars）创建与复用方法

使用模板引擎可高效动态生成HTML。一、Handlebars通过占位符注入数据，需引入库、定义模板并编译渲染；二、ES6模板字符串以反引号包裹，直接嵌入变量，适合轻量级需求，支持逻辑与循环；三、自定义模板类封装HTML结构，提升复用性，可通过继承扩展；四、HTML5的标签声明不可见DOM，克隆后填充数据插入页面，实现原生模板复用。

如果您希望在前端开发中动态生成HTML内容，使用模板引擎可以大幅提升效率和可维护性。通过预定义的HTML模板，可以将数据与结构分离，实现内容的快速填充与复用。以下是几种常见的HTML模板创建与复用方法：

一、使用Handlebars创建HTML模板

Handlebars是一种逻辑-less的模板引擎，通过占位符将数据注入到HTML中，适合构建可复用的界面组件。

1、引入Handlebars库文件，可通过CDN方式加载：

立即学习“前端免费学习笔记（深入）”；

2、在HTML中定义模板，使用type=”text/x-handlebars-template”防止浏览器执行：

3、编译模板并渲染数据：

const source = document.getElementById(‘user-template’).innerHTML; const template = Handlebars.compile(source); const data = { name: ‘张三’, age: 25 }; document.getElementById(‘output’).innerHTML = template(data);

二、利用原生JavaScript模板字符串复用HTML

ES6提供的模板字符串功能允许在JavaScript中嵌入多行HTML，并动态插入变量，适用于轻量级模板需求。

1、定义一个生成HTML的函数，使用反引号包裹模板：

function generateUserCard(user) { return `

`; }

2、调用函数并将结果插入DOM：

document.getElementById(‘container’).innerHTML += generateUserCard({ name: ‘李四’, age: 30 });

3、支持条件逻辑与循环，增强模板灵活性：

`${users.map(u => generateUserCard(u)).join(”)}`

三、通过自定义模板组件实现复用

将常用HTML结构封装为可配置的JavaScript类或函数，提升跨项目复用能力。

1、创建一个模板类，接收数据参数并返回HTML字符串：

class UserTemplate { static render(data) { return `