纯JavaScript应用多语言支持改造方案及实现细节咨询

你的思路里多语言JSON文件的方案完全可行，这是轻量无依赖场景下的标准做法；但独立CSS文件的必要性不高，除非不同语言有特殊布局需求（比如阿拉伯语这类RTL从右到左的语言），否则用统一CSS加语言类的方式更高效，避免重复代码。

下面是具体改造步骤和实现细节：

一、整理多语言JSON文件 #

为每种语言创建独立的JSON文件，放在项目的languages目录下，结构建议和页面元素ID一一对应（或者自定义统一键名）：

示例en.json：

{
  "empName": "Employee Name",
  "depName": "Dep Name",
  "welcomeMsg": "Welcome, {user}"
}

示例zh-CN.json：

{
  "empName": "员工姓名",
  "depName": "部门名称",
  "welcomeMsg": "欢迎您，{user}"
}

二、实现语言加载与翻译赋值 #

1. 加载语言文件 #

用jQuery的getJSON异步加载对应语言的JSON，加载失败时 fallback 到默认语言（比如英文）：

function loadLanguage(lang = 'en') {
  $.getJSON(`/languages/${lang}.json`, function(translations) {
    applyTranslations(translations);
    // 给根元素加语言标识，方便后续样式适配
    $('html').attr('lang', lang).removeClass('en zh-CN').addClass(lang);
  }).fail(function() {
    // 加载失败，切换到默认语言
    $.getJSON('/languages/en.json', applyTranslations);
    $('html').attr('lang', 'en').removeClass('zh-CN').addClass('en');
  });
}

2. 基础文本赋值 #

遍历JSON键，匹配页面元素ID并替换内容：

function applyTranslations(translations) {
  Object.keys(translations).forEach(key => {
    const $element = $(`#${key}`);
    if ($element.length) {
      $element.html(translations[key]);
    }
  });
}

3. 带变量的文本插值 #

如果需要处理带占位符的文本（比如Welcome, {user}），可以写一个简单的插值函数：

function interpolate(text, variables) {
  return text.replace(/\{(\w+)\}/g, (match, varName) => {
    return variables[varName] || match;
  });
}

// 使用示例：
// $element.html(interpolate(translations.welcomeMsg, {user: '张三'}));

三、View文件夹下的页面处理 #

不管HTML文件放在View还是其他目录，只要确保在页面DOM加载完成后调用语言加载函数即可。可以在每个View页面底部添加脚本，或者把逻辑放到公共的common.js里：

<!-- View文件夹下的页面脚本 -->
<script>
$(document).ready(function() {
  // 可从URL参数、本地存储或用户选择获取语言
  const userLang = localStorage.getItem('selectedLang') || 'zh-CN';
  loadLanguage(userLang);
});
</script>

四、CSS优化方案（替代独立CSS文件） #

如果只是文本翻译，不需要独立CSS；如果是RTL布局这类特殊需求，给根元素加语言类，在统一CSS里针对不同语言写样式：

/* 统一CSS文件 */
.rtl {
  direction: rtl;
  text-align: right;
}

.en .some-btn {
  padding: 0 10px;
}

.zh-CN .some-btn {
  padding: 0 15px;
}

这样既保持轻量化，又能处理不同语言的布局差异，比加载多个CSS文件更高效。

内容的提问来源于stack exchange，提问作者user804401