Mock.js 最省事但不支持现代模块化环境，需用 script 标签引入 v1.1.0 CDN，DOM 加载后调用 Mock.mock()；Faker.js v7+ 不支持 script 引入，Python Faker 无法在纯 HTML 运行；动态渲染推荐 createElement + textContent 防 XSS，大数据量用 requestIdleCallback 节流。
直接用 Mock.js 最省事，但得注意它不支持现代模块化环境（比如 ES6 import 或 Vite），强行塞进前端工程容易报 Cannot resolve 'fs' 或 require is not defined —— 这不是你代码写错了，是它根本没为浏览器原生模块设计。
Mock.js 在 HTML 中直接 script 引入怎么写
必须用传统 <script src> 方式，且顺序不能错：
-
Mock.js官方 CDN 地址是https://cdn.jsdelivr.net/npm/mockjs@1.1.0/dist/mock-min.js（别用新版 2.x，已废弃） -
<script>标签必须放在Mock.js之后，且不能设type="module" - 所有
Mock.mock()调用必须在 DOM 加载完成后执行，否则可能取不到容器节点
示例片段：
<script src="https://cdn.jsdelivr.net/npm/mockjs@1.1.0/dist/mock-min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const data = Mock.mock({
'list|5': [{
'id|+1': 1,
'name': '@cname',
'email': '@email',
'status|1': ['active', 'inactive']
}]
})
console.log(data)
})
</script>
为什么不用 Faker.js 或 Python Faker 做 HTML 假数据
因为它们压根不是为纯前端 HTML 页面设计的：
立即学习“前端免费学习笔记（深入）”；
-
Faker.js（注意不是 Python 的 Faker）虽支持浏览器，但 v7+ 已移除 UMD 构建，<script src>直接引入会失败；v6 是最后可用版本，但 npm 包名已变，CDN 路径难找 - Python
Faker必须跑在服务端，HTML 文件双击打开时根本没 Python 环境，fetch('/api/fake')会跨域或 404 - 所谓“在线生成工具”，多数只是把
Mock.js封了个表单外壳，底层还是它，还多一层网络请求和 XSS 风险
想动态渲染表格？别手写 for 循环拼 HTML 字符串
容易漏转义、拼错标签、破坏语义结构。更稳妥的做法是：
- 用
document.createElement('tr')+appendChild逐行构建，配合textContent写内容（自动防 XSS） - 数据量大（>100 条）时加节流：用
requestIdleCallback分批插入，避免卡死 UI - 表格头固定、内容滚动？别用
position: sticky硬扛，先确认父容器有overflow-y: auto且高度明确
关键代码示意：
const tbody = document.querySelector('#data-table tbody')
data.list.forEach(item => {
const tr = document.createElement('tr')
Object.values(item).forEach(val => {
const td = document.createElement('td')
td.textContent = val // 不要用 innerHTML
tr.appendChild(td)
})
tbody.appendChild(tr)
})
Mock.js 模板语法里最容易翻车的三个点
不是不会写，是写了也不报错但结果不对：
-
'id|+1': 1表示自增，但如果外层数组用了'list|4'，而你又在循环里重复调用Mock.mock()，自增会重置——每次调用都是新实例 -
@cname返回中文姓名，但@name返回英文名，混用会导致字段语义混乱（比如用户列表里突然冒出 “John Smith”） - 正则生成手机号：
/^1[3-9]\d{9}$/才覆盖全号段，旧资料里写的/^1[385][1-9]\d{8}/漏了 14、17、19 开头，且少一位
真实项目里，假数据的“像不像”不取决于随机程度，而在于字段间逻辑是否自洽——比如 status: 'inactive' 时，last_login 不该是今天。
