JavaScript 中怎么用柯里化实现多语言文案的动态按需加载-js教程-PHP中文网

柯里化实现多语言动态加载，核心是用闭包固化语言环境，调用时仅传键名（如t('login.title')），首次调用才按需加载对应语言包并缓存，支持运行时切换语言和webpack代码分割。

javascript 中怎么用柯里化实现多语言文案的动态按需加载

JavaScript 中用柯里化实现多语言文案的动态按需加载，核心是把「语言环境」和「文案键名」解耦，让调用时只需传入键名，语言环境由闭包预先固化。这样既保持调用简洁（如 t('login.title')），又能延迟加载对应语言包，避免初始打包体积过大。

1. 柯里化函数封装语言加载逻辑

定义一个高阶函数 createT，接收语言 code（如 'zh'）并返回一个可复用的翻译函数 t。这个 t 内部会按需加载对应语言包，并缓存结果：

const createT = (lang) => {
  let messages = null;
  let loading = false;

  return async (key) => {
    if (!messages) {
      if (!loading) {
        loading = true;
        try {
          // 动态导入对应语言包，Webpack 会自动代码分割
          const mod = await import(`./locales/${lang}.js`);
          messages = mod.default || mod;
        } finally {
          loading = false;
        }
      }
      // 若还在加载中，可选择等待或返回占位符（如 key）
      if (!messages) {
        return key;
      }
    }

    // 支持嵌套键，如 'user.profile.name'
    return key.split('.').reduce((obj, k) => obj?.[k], messages) ?? key;
  };
};

2. 按需触发加载，避免启动时全量引入

不提前 import 所有语言包，而是等第一次调用 t() 时才加载当前语言。例如：

Alibabacloud Sdk Client Initialization For Java

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

下载

// 初始化时只确定语言，不加载任何资源
const t = createT(navigator.language.slice(0, 2) || 'en');

// 第一次调用时才加载 zh.js 或 en.js
const title = await t('login.title'); // 此时触发 import('./locales/zh.js')

Webpack/Vite 会将每个 import(`./locales/${lang}.js`) 编译为独立 chunk，真正实现「用到才加载」。

3. 支持运行时切换语言并刷新文案

切换语言时，重新调用 createT 即可生成新 t 函数。旧的缓存自动失效，新调用走新的语言包：

let t = createT('zh');

// 切换语言
const changeLang = async (newLang) => {
  t = createT(newLang);
  // 可触发 UI 重渲染，所有 t() 调用将使用新语言
  forceUpdate();
};

// 组件内使用
function Login() {
  const [title] = useState(async () => await t('login.title'));
  // ...
}