本文介绍一种基于 promise 缓存与模块化设计的方案，实现对大型 json 文件（如含 5 万+ 条记录的 data.json）仅一次 ajax 请求，并将解析后的数据安全、可靠地暴露为全局可访问对象，避免重复请求与作用域丢失问题。
本文介绍一种基于 promise 缓存与模块化设计的方案，实现对大型 json 文件（如含 5 万+ 条记录的 data.json）仅一次 ajax 请求，并将解析后的数据安全、可靠地暴露为全局可访问对象，避免重复请求与作用域丢失问题。
在 Web 开发中，当需要将一份大型静态 JSON 数据（例如 data.json，含数万条结构化记录）供全站多个组件或脚本共享使用时，关键挑战在于：既要保证只发起一次 HTTP 请求以提升性能与服务端负载，又要确保数据加载完成后再被任意脚本安全读取。你当前遇到的 dataset is not defined 或 console.log(dataset.length) 报错，本质是 JavaScript 异步执行机制导致的——fetch() 是异步操作，而紧随其后的同步脚本（如 <script>console.log(...)</script>）在数据尚未返回时就已执行，自然无法访问。
✅ 推荐方案：单例式数据加载器（推荐现代写法）
我们不依赖全局变量污染（如 window.dataset），而是封装一个可复用、线程安全的 DataLoader 模块，利用 Promise 缓存加载状态，确保多次调用均返回同一份已解析数据：
// js/dataLoader.js（ES Module）
let dataPromise = null;
export function loadJSONData() {
if (!dataPromise) {
dataPromise = fetch('../js/data.json')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
return res.json();
})
.catch(err => {
console.error('❌ 数据加载失败:', err);
throw err;
});
}
return dataPromise;
}✅ 在页面中正确使用（无需 jQuery）
在 index.html 中，通过 <script type="module"> 导入并消费数据：</script>
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"></head>
<body>
<h2>数据加载示例</h2>
<div id="status">正在加载...</div>
<!-- 使用 ES Module 加载器 -->
<script type="module">
import { loadJSONData } from './js/dataLoader.js';
// ✅ 安全调用：无论调用多少次，都只触发一次 fetch
loadJSONData()
.then(data => {
document.getElementById('status').textContent = `✅ 加载成功：共 ${data.length} 条记录`;
console.log('数据已就绪，可在任意后续逻辑中使用：', data[0]);
// 示例：渲染到表格（可扩展）
const tableBody = document.querySelector('#dataTable tbody');
data.slice(0, 5).forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `<td>${item.Department}</td><td>${item.Name}</td><td>${item.Time}</td>`;
tableBody.appendChild(row);
});
})
.catch(err => {
document.getElementById('status').textContent = '❌ 加载失败，请检查 network 控制台';
});
</script>
<!-- 表格结构（示例） -->
<table id="dataTable" border="1">
<thead><tr><th>部门</th><th>姓名</th><th>工时</th></tr></thead>
<tbody></tbody>
</table>
</body>
</html>⚠️ 注意事项与最佳实践
- 禁止混合模块与非模块脚本：你原代码中 <script> 标签内直接 console.log(dataset) 失败，是因为它既非模块（无法 import），又在 fetch 完成前执行。务必统一使用 type="module" + await/.then() 方式处理异步数据。</script>
- 缓存策略建议：若 data.json 不常更新，可在 fetch() 中添加 cache: 'force-cache' 或服务端配置 Cache-Control: public, max-age=3600，进一步减少网络请求。
- 内存优化提示：5 万条 JSON 对象在浏览器内存中约占用 10–30 MB（取决于字段长度）。如需分页/筛选，建议配合 Array.prototype.filter()、slice() 或引入虚拟滚动（如 vue-virtual-scroller），而非一次性渲染全部。
- 错误兜底：生产环境务必添加 .catch() 并提供用户友好的加载失败 UI（如重试按钮）。
- 跨域注意：确保 data.json 与页面同源，或服务端已配置 CORS 响应头（Access-Control-Allow-Origin: *）。
✅ 总结
真正“全局可用”的不是变量名，而是可预测、可复用、带状态管理的数据获取契约。通过 Promise 缓存 + ES Module 封装，你获得的是：
- ✅ 单次请求、多处消费；
- ✅ 异步安全、无竞态条件；
- ✅ 易测试、易维护、零 jQuery 依赖；
- ✅ 天然支持 TypeScript 类型推导（可为 data.json 添加 JSON Schema）。
从此，你的 data.json 不再是散落各处的异步谜题，而是整个前端应用可信的数据基石。
