JavaScript动态渲染JSON的核心是“获取→解析→绑定→插入”四环节，涵盖原生模板字符串、Mustache引擎、自定义compile函数及DOM API手动构建四种方式，分别适配简单、中等、可复用与高性能场景。
JavaScript 中把 JSON 数据结合动态模板引擎渲染，核心在于“获取 → 解析 → 绑定 → 插入”四个环节。它不是简单拼字符串，而是让数据结构和 HTML 模板之间建立可预测、可复用的映射关系。下面从实际开发最常遇到的几种方式讲清楚怎么落地。
用原生模板字符串快速渲染（适合简单场景）
这是最轻量、无需引入库的方式，适合结构固定、数据扁平的列表或卡片。
- 先用 fetch 获取 JSON，确保调用 .json() 解析成 JS 对象或数组
- 用反引号（
`）写带插值的 HTML 字符串，用 ${data.xxx} 填充字段 - 对数组用 .map() 生成多个元素，再用 .join('') 合并
- 最后赋值给容器的 innerHTML，或用 insertAdjacentHTML 更安全地插入
示例：渲染用户列表
const container = document.getElementById('list');fetch('/api/users').then(r => r.json()).then(users => {
const html = users.map(u => `<div class="user"><h3>${u.name}</h3><p>${u.email}</p></div>`).join('');
container.innerHTML = html;
});
用 Mustache 等轻量模板引擎（适合中等复杂度）
当模板开始变长、有循环、条件判断或嵌套时，手写字符串容易出错。Mustache 这类无逻辑模板引擎正好填补空白——语法干净，零学习成本，又比纯字符串更健壮。
立即学习“Java免费学习笔记（深入）”；
- 引入 mustache.js（几 KB），用 Mustache.render(template, data) 渲染
- 循环用 {{#items}}...{{/items}}，条件用 {{#flag}}...{{/flag}}
- 支持对象嵌套访问，比如 {{user.profile.avatar}}
- 不执行 JS 表达式，安全性高，适合展示型内容
示例：渲染带分组的订单列表
const template = `<ul>{{#orders}}<li><strong>#{{id}}</strong> <span>${{total}}元</span></li>{{/orders}}</ul>`;
fetch('/api/orders').then(r => r.json()).then(data => {
document.body.innerHTML = Mustache.render(template, data);
});
用自定义 compile + Function 构建简易模板函数（适合需要复用与控制）
如果你不想加第三方库，又希望比字符串拼接更规范、支持变量深度访问甚至简单表达式，可以自己封装一个极简模板编译器。
- 把模板字符串转成一个接受 data 参数的函数，内部用 with(data) { return \`...\`; } 实现上下文简化
- 用正则匹配 {{xxx}} 或 ${xxx}，替换成 data.xxx 引用
- 生成的函数可缓存、可预编译，同一模板多次渲染不重复解析
- 注意：with 有轻微性能开销和安全顾虑，避免渲染不可信模板
示例：编译一个用户卡片模板
function compile(tpl) {const fn = new Function('data', 'with(data){return `' + tpl + '`;}');
return (data) => fn(data);
}
const renderCard = compile(`<article><h2>{{name}}</h2><p>{{bio.substring(0,50)}}...</p></article>`);
fetch('/api/user').then(r => r.json()).then(user => {
document.getElementById('card').innerHTML = renderCard(user);
});
配合 DOM API 手动构建（适合强调性能与可控性）
当数据量大、更新频繁，或需要绑定事件、做懒加载、动画等精细控制时，应避开 innerHTML，改用 document.createElement + appendChild 的方式。
- 逐个创建元素，设置 textContent 或 setAttribute，避免 XSS 风险
- 用 DocumentFragment 批量插入，减少重排重绘
- 对嵌套结构（如树形菜单）用递归函数处理，自然对应 JSON 的层级
- 适合构建组件化逻辑，比如每个 item 是一个独立可交互单元
示例：渲染带点击事件的导航菜单
function renderMenu(items, parent) {const frag = document.createDocumentFragment();
items.forEach(item => {
const li = document.createElement('li');
li.textContent = item.label;
li.dataset.id = item.id;
li.addEventListener('click', () => console.log('选中:', item.id));
if (item.children) renderMenu(item.children, li);
frag.appendChild(li);
});
parent.appendChild(frag);
}
fetch('/api/menu').then(r => r.json()).then(data => renderMenu(data, document.getElementById('nav')));
