纯HTML模板在前后端分离中须承担结构契约、数据插槽和样式隔离三重责任，否则沦为散装代码；直接挪用JSP/Thymeleaf模板会因服务端语法、路径硬编码、业务逻辑残留而失效；组件化需规避绝对路径、写死文案、手动拼接三大陷阱，并通过data属性、BEM命名、配置驱动实现真正复用。
纯HTML模板在前后端分离架构里，不是“静态资源”那么简单——它得承担起结构契约、数据插槽和样式隔离三重责任，否则就会变成散装代码的温床。
为什么直接把JSP/Thymeleaf模板挪到前端会出问题
很多人以为把后端模板文件（比如 user-list.html）整个拷贝到前端项目里就算完成分离，结果发现：数据渲染逻辑残留、路径硬编码、CSS类名冲突、th:each 或 ${user.name} 这类服务端语法直接报错或被忽略。
- 服务端模板引擎（如 Thymeleaf、JSP）依赖运行时解析，浏览器不认
th:fragment、jsp:include这些指令 - 路径常写成
/static/images/avatar.png，但前端本地开发走的是http://localhost:5173/，生产又可能挂 CDN，相对路径极易失效 - 模板里混着业务判断（如
th:if="${user.role == 'admin'}"），前端 JS 没法原样复用，又不敢删——怕后端说“你动了我逻辑”
HTML组件化必须绕开的三个硬编码陷阱
一个能跨页面复用的 HTML 片段，核心是“不绑定具体值、不假设上下文、不污染全局”。常见翻车点集中在三处：
-
src和href写死绝对路径：改部署路径就得全局搜替换。应统一用data-src、data-href属性存路径，JS 初始化时再注入真实 URL - 标题/文案写死文本：
<h2>用户管理</h2>→ 改成<h2 data-text="title"></h2>，由 JS 读取data-title或传入配置对象填充 - 列表项手动拼接：
<div class="user-item">...</div><div class="user-item">...</div>→ 留空容器 + 注释：<div class="cmp-user-list__items"><!-- 插入用户项 --></div>
如何让一个 cmp-card 在纯 HTML + JS 环境下真正可复用
没有框架，就靠约定和轻量封装。关键不是“怎么写”，而是“怎么约束别人怎么用”：
立即学习“前端免费学习笔记（深入）”；
- 外层必须带唯一前缀类：
<div class="cmp-card">，子元素严格用 BEM 命名：cmp-card__header、cmp-card__body、cmp-card__footer - 支持配置驱动：
<div class="cmp-card" data-size="large" data-shadow="true">，JS 初始化时读取并 toggle 类或 style - 内容区留白不填默认值：
<div class="cmp-card__title"></div>，避免 CSS!important覆盖不了内联样式 - 禁止在组件内部写
style="color: red"—— 所有样式走 CSS 文件，且 scoped 到前缀类
前后端分离下，HTML 模板的交付边界到底在哪
这不是技术问题，是协作契约问题。前端交付的 HTML 模块，后端只该做一件事：原样返回，不做任何字符串替换或模板渲染。
- 后端接口返回 JSON，字段命名与 HTML 中
data-*属性一一对应（如 JSON 有title字段，HTML 就用data-title） - 前端 JS 加载模板后，用
document.querySelector('[data-title]').textContent = data.title注入，而不是用innerHTML += `<h2>${data.title}</h2>`拼接（防 XSS） - 如果后端坚持要“动态生成 HTML”，那必须明确：这是服务端渲染（SSR）场景，不属于前后端分离范畴，需另立部署流程和缓存策略
最容易被忽略的，是团队对“HTML 模板”这个词的理解根本不在同一层——有人以为它是最终产物，有人以为它是待填充的壳。没对齐这个定义，组件化就只是给混乱加了一层 class 名而已。
