JavaScript实现前端多语言方案解析

// locales/zh.json
{
  "welcome": "欢迎使用我们的产品",
  "login": "登录",
  "logout": "退出"
}

// locales/en.json
{
  "welcome": "Welcome to our product",
  "login": "Login",
  "logout": "Logout"
}

class I18n {
  constructor() {
    this.lang = 'zh'; // 默认语言
    this.translations = {};
  }

  async load(lang) {
    if (this.translations[lang]) {
      this.lang = lang;
      return;
    }

    try {
      const res = await fetch(`/locales/${lang}.json`);
      const data = await res.json();
      this.translations[lang] = data;
      this.lang = lang;
      this.applyTranslations(); // 应用到页面
    } catch (err) {
      console.error('Failed to load language:', lang);
    }
  }

  t(key) {
    return this.translations[this.lang]?.[key] || key;
  }

  applyTranslations() {
    document.querySelectorAll('[data-i18n]').forEach(el => {
      const key = el.getAttribute('data-i18n');
      el.textContent = this.t(key);
    });
  }
}

<h1 data-i18n="welcome"></h1>
<button data-i18n="login"></button>

const i18n = new I18n();

// 加载中文
i18n.load('zh');

// 用户点击切换语言
document.getElementById('lang-switch').addEventListener('click', () => {
  const nextLang = i18n.lang === 'zh' ? 'en' : 'zh';
  i18n.load(nextLang);
});

// 动态获取翻译
console.log(i18n.t('login')); // 根据当前语言输出