JavaScript中JSON实现多语言动态加载的核心是按locale分离语言资源为独立JSON文件，运行时异步加载并提供统一翻译接口；需结构化管理、fetch按需加载与缓存、构建支持插值的t()函数，并结合自动检测与切换机制完成本地化。
JavaScript 中 JSON 实现多语言词典的动态加载，核心是把语言资源按 locale 分离成独立 JSON 文件，运行时根据用户偏好异步加载对应文件，并提供统一的翻译函数调用接口。
准备结构化的多语言 JSON 文件
每个语言一个 JSON 文件，内容为键值对，保持 key 一致、value 本地化。例如：
zh.json
{"welcome": "欢迎", "submit": "提交", "error_required": "此项为必填"}
en.json
立即学习“Java免费学习笔记（深入）”；
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
{"welcome": "Welcome", "submit": "Submit", "error_required": "This field is required"}
推荐将这些文件放在 /locales/ 目录下，便于集中管理与 CDN 缓存。
用 fetch 动态加载指定语言包
避免一次性加载所有语言，只加载当前需要的 locale。使用 fetch 加载并缓存结果，防止重复请求：
- 检查是否已加载过该语言数据，有则直接返回 Promise.resolve
- 若未加载，发起 fetch 请求，用
.json()解析响应 - 加载成功后存入内存缓存（如 Map 或全局对象）
- 失败时抛出错误，便于上层处理降级逻辑（如回退到默认语言）
构建轻量翻译函数（i18n.t）
提供类似 i18n.t('welcome') 的调用方式，内部查找当前激活语言的词典：
- 维护一个
currentLocale状态（如 'zh' 或 'en'） - 维护一个
dicts对象，key 是 locale，value 是解析后的 JSON 数据 - 翻译函数先检查是否存在 key，不存在时可返回 key 本身或 fallback 提示（如
[missing: welcome]） - 支持简单插值：如
i18n.t('hello_name', { name: 'Alice' })→"Hello, Alice!"（需在 JSON 中预留占位符，如"hello_name": "Hello, {{name}}!"）
自动检测与切换语言
提升用户体验的关键环节：
- 初始化时读取
navigator.language或 URL 参数（如?lang=ja），或从 localStorage 读取用户上次选择 - 提供切换语言的按钮，调用
setLocale('ja')，触发重新加载 + 翻译刷新 - 页面中所有文案应通过
i18n.t()获取，配合事件或响应式机制（如 Vue 的 computed / React 的 useEffect）更新 DOM
