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

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

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

一、使用Handlebars创建HTML模板

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

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

<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.min.js"></script>

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

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

<script id="user-template" type="text/x-handlebars-template"> <div>姓名：{{name}}，年龄：{{age}}</div> </script>

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 `<div class="card"> <h3>${user.name}</h3> <p>年龄：${user.age}</p> </div>`; }

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

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

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

AiPPT模板广场

AiPPT模板广场-PPT模板-word文档模板-excel表格模板

147

查看详情

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

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

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

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

class UserTemplate { static render(data) { return `<article><header>${data.name}</header><content>${data.content}</content></article>`; } }

2、在多个位置调用该类的render方法：

document.querySelector('#post-1').innerHTML = UserTemplate.render({ name: '王五', content: '今天学习了模板技术' });

3、支持扩展子类以适应不同类型的展示需求，如AdminUserTemplate继承基础模板并添加权限标识。

四、使用<template>标签声明式定义HTML模板

HTML5原生的<template>标签可用于存放不可见的DOM片段，待需要时克隆并填充数据。

1、在HTML中声明模板内容：

<template id="product-template"> <li class="product"> <span class="title"></span> <span class="price"></span> </li> </template>

2、获取模板并克隆节点：

const tmpl = document.getElementById('product-template').content; const clone = tmpl.cloneNode(true);

3、填充数据后插入目标容器：

clone.querySelector('.title').textContent = '笔记本电脑'; clone.querySelector('.price').textContent = '¥8999'; document.getElementById('product-list').appendChild(clone);

以上就是html如何制作模板_HTML模板（如Handlebars）创建与复用方法的详细内容，更多请关注php中文网其它相关文章！