JavaScript 中 ESModule 怎么动态切换不同的语言包-js教程-PHP中文网

esmodule可通过动态import()实现语言动态切换：将各语言包封装为独立模块，按需加载并替换翻译对象，配合i18n实例管理语言状态与文本渲染。

javascript 中 esmodule 怎么动态切换不同的语言包

ESModule 本身不支持运行时动态切换模块，但你可以通过动态 import() + 按需加载语言包的方式实现“动态切换语言”。核心思路是：把每种语言的翻译内容封装成独立的 ESModule（如 zh.js、en.js），在切换语言时用 import() 动态加载对应模块，再替换当前使用的翻译对象。

语言包按模块组织

每个语言包导出一个默认的纯对象，结构一致：

// locales/zh.js
export default {
  welcome: '欢迎',
  logout: '退出登录',
  settings: '设置'
};

// locales/en.js
export default {
  welcome: 'Welcome',
  logout: 'Log out',
  settings: 'Settings'
};

用动态 import 加载指定语言

避免一次性加载所有语言包，只在需要时加载目标语言：

用 import(`./locales/${lang}.js`) 加载对应模块
注意路径必须是静态字符串模板（不能拼接变量），所以 lang 必须是已知的有限值（如 'zh'、'en'、'ja'）
加载后缓存结果，避免重复请求

维护一个可切换的 i18n 实例

封装一个简单的语言管理器：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

let currentLang = 'zh';
let messages = {};

export const i18n = {
  async setLang(lang) {
    if (lang === currentLang) return;
    try {
      const mod = await import(`./locales/${lang}.js`);
      messages = mod.default;
      currentLang = lang;
      document.documentElement.lang = lang;
    } catch (e) {
      console.warn(`Failed to load locale: ${lang}`, e);
    }
  },
  t(key) {
    return messages[key] ?? key;
  }
};

调用 i18n.setLang('en') 即可切换，并自动更新 document.documentElement.lang。

配合 HTML 使用（例如响应式文本）

在组件或页面中监听语言变化，或直接调用 i18n.t()：

<button onclick="i18n.setLang('en')">English</button>
<button onclick="i18n.setLang('zh')">中文</button>

<h1>{{ i18n.t('welcome') }}</h1>

如果是 React/Vue 等框架，建议封装为响应式 Hook 或 Composable，监听语言变更并触发重渲染。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南