大型JSON数据高效加载并全局复用（单次请求全站可用）

本文介绍一种基于 Promise 缓存与模块化设计的方案，实现对大型 JSON 文件（如含 5 万+ 条记录的 data.json）仅一次 Ajax 请求，并将解析后的数据安全、可靠地暴露为全局可访问对象，避免重复请求与作用域丢失问题。

在 Web 开发中，经常需要把一份大型静态 JSON 数据（例如 data.json，内含数万条结构化记录）供全站多个组件或脚本共享使用。核心挑战在于：既要确保只发起一次 HTTP 请求（节约带宽、降低服务器负载），又要保证数据加载完成后其他脚本才能安全读取。常见的 dataset is not defined 或 console.log(dataset.length) 报错，根源在于 JavaScript 异步机制：fetch() 是异步操作，而紧随其后的同步脚本（例如 ）在数据尚未返回时便执行，自然无法访问到数据。

推荐方案：单例式数据加载器（现代写法）

一种更干净的做法是：不把数据直接绑定到 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 中通过 导入并使用数据，这是推荐的方式：

  


  
数据加载示例
  
正在加载...
  
  

    
部门
姓名
工时
    

  


注意事项与最佳实践

  
禁止混合模块与非模块脚本：原先代码中  标签里直接写 console.log(dataset) 失败的原因有两个——它既不是模块（无法 import），又在 fetch 完成之前执行。应统一使用 type="module" 配合 .then() 或 await 处理异步数据。
  
缓存策略建议：若 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()，并提供友好的加载失败提示界面（例如放置重试按钮）。
  
跨域注意：确保 data.json 与页面同源，或服务端已配置 CORS 响应头（Access-Control-Allow-Origin: *）。

总结
“全局可用”的关键不在于变量名是否挂在 window 上，而在于构建一个可预测、可复用、带状态管理的数据获取契约。通过 Promise 缓存配合 ES Module 封装后，可获得以下优势：

  
单次请求、多处消费；
  
异步安全、无竞态条件；
  
易测试、易维护、零 jQuery 依赖；
  
天然支持 TypeScript 类型推导（可为 data.json 配置 JSON Schema）。

从此，那份 data.json 不再是散落在各处的异步谜题，而是整个前端应用中一块可信赖的数据基石。