语言切换功能

多语言切换

参考：https://www.cnblogs.com/zhenqichai/p/html-set-multiple-languages.html

思路

给页面上的静态内容（固定文本，如标题、提示语等）增加一个标识 class，以及用于标识该文本内容的 key 字段

<li class="lang" key="HOME"></li>
<li class="lang" key="ABOUT"></li>
<li class="lang" key="CONTACT"></li>

如上所示，从上至下依次是：首页 -> 关于 -> 联系我们

对应的，在本地 js 文件中增加不同语言版本的文本内容，例如：

var arrLang = {
  "en": {
    "HOME": "Home",
    "ABOUT": "About Us",
    "CONTACT": "Contact Us",
  },
  "zh": {
    "HOME": "首页",
    "ABOUT": "关于我们",
    "CONTACT": "联络我们",
  }
};

以上例子就是将中英文版本的静态文本内容保存到了 arrLang 变量中

通过某些触发方式，对当前文本内容进行替换，例子中采用的是

• 先判断用户是否已设置语言
  • 用户上一次设置的语言会被保存到本地，等于是记录用户设置
• 若没有设置，则获取浏览器的默认语言，并进行自动切换

替换文本内容，可以直接采用 jQuery 的 text 方法或其他方法

即要实现多语言功能，FE 需要对页面中出现的所有静态内容进行标记和多语言翻译；BE 则需要对动态内容（由后台传入的内容）进行多语言翻译。