如何在js中添加i18n以实现国际化？

// 加载资源文件
function loadResourceFile(language) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `path/to/${language}.json`);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

// 解析资源文件
function parseResourceFile(fileContent) {
  return JSON.parse(fileContent);
}

// 根据当前语言选择翻译
function selectTranslation(language) {
  if (language === 'zh') {
    return translations['zh'];
  } else {
    return translations['en'];
  }
}

// 替换文本内容
function replaceTextContent() {
  const elements = document.querySelectorAll('[data-i18n]');
  elements.forEach(element => {
    const key = element.getAttribute('data-i18n');
    element.textContent = translation[key];
  });
}

// 主函数
async function initializeI18n() {
  try {
    const language = navigator.language.split('-')[0]; // 获取用户语言偏好
    const fileContent = await loadResourceFile(language);
    const translations = parseResourceFile(fileContent);
    const translation = selectTranslation(language);
    replaceTextContent();
  } catch (error) {
    console.error('Failed to initialize i18n', error);
  }
}

// 在页面加载完成后调用主函数
window.addEventListener('DOMContentLoaded', initializeI18n);