基于 jQuery.i18n.properties 对老项目实现国际化

公司之前的项目都是以中文为主，随着业务的增长，现需要支持国际化，但是由于项目并没有使用三大框架，所以没有与之配套的成熟的解决方案，遂找到了一款轻量化的基于jQuery的国际化插件jQuery.i18n.properties

引用一段对jQuery.i18n.properties的介绍

jQuery.i18n.properties是一款轻量级的jQuery国际化插件，能实现Web前端的国际化。
国际化英文单词为：Internationalization，又称i18n，“i”为单词的第一个字母，“18”为“i”和“n”之间单词的个数，而“n”代表这个单词的最后一个字母。jQuery.i18n.properties采用.properties文件对JavaScript进行国际化。jQuery.i18n.properties插件首先加载默认的资源文件（strings.properties），然后加载针对特定语言环境的资源文件（strings_zh.properties），这就保证了在未提供某种语言的翻译时，默认值始终有效。

首先先展示一下目录结构：

1.下载所需要的文件

• jQuery.i18n.properties.js
• jQuery.js

2.准备 index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title class="i18n" name="title"></title>
    <!-- 切记要加上这句 每个页面都要对应上其翻译的文件 -->
    <meta id="i18n_page" content="index">
    <meta name="viewport" content="width=device-width">
    <meta name="keywords" content="" />
    <meta name="description" content=""/>
</head>
<body>
    <div>
      <label class="i18n" name="lang"></label>
      <select id="language">
        <option value="zh_CN">简体中文</option>
        <option value="en">English</option>
      </select>
    </div>
    <div>
      <div>
        <label class="i18n" name="name"></label>
        <input type="text" id="input-name" class="i18n-attr" attrName="namePlaceholder" i18nAttr="placeholder">
      </div>
      <div>
        <label class="i18n" name="age"></label>
        <input type="text" id="input-age" class="i18n-attr" attrName="agePlaceholder" i18nAttr="placeholder">
      </div>
    </div>

    <script src="jquery-3.4.1.min.js"></script>        
    <!-- 加载语言包文件 -->
    <script src="jquery.i18n.properties.js"></script>
    <script src="language.js"></script>
</body>
</html>
<style>
  div {
    margin-top: 20px;
  }
  label {
    display: inline-block;
    width: 100px;
  }
  input {
    width: 200px;
  }
</style>

3.准备 language.js

// 默认语言
let defaultLanguage = 'zh_CN'

const translate = () => {

  // 如果缓存中有语言类型则选用缓存中的语言
  defaultLanguage = localStorage.getItem('language') || defaultLanguage
  // 将默认的语言值进行选中
  $('#language option[value=' + defaultLanguage + ']').attr('selected', true);
  // 获取资源文件
  let sourceName = $('#i18n_page').attr('content');

  // 执行 i18n 翻译
  jQuery.i18n.properties({
    name : sourceName, // 资源文件名称
    path : defaultLanguage + '/', // 资源文件路径
    mode : 'map', // 用 Map 的方式使用资源文件中的值
    language : defaultLanguage,
    callback : function() { // 资源文件加载成功之后的回调
      // 替换页面文本
      let element = $('.i18n');
      element.each(function() {
        // 根据 i18n 元素的 name 获取内容写入
        $(this).html($.i18n.prop($(this).attr('name')));
      });
      // 替换元素的属性
      let attrElement = $(".i18n-attr");
      attrElement.each(function() {
        let i18nAttr = $(this).attr('i18nAttr');
        if (!i18nAttr) {
          i18nAttr = 'value';
        };
        $(this).attr(i18nAttr, $.i18n.prop($(this).attr('attrName')));
      });
    }
  });
}

$(function(){

  // 页面加载先执行一遍翻译
  translate()

  // 选择语言时触发的事件
  $("#language").on('change', function() {
    let language = $(this).children('option:selected').val()
    localStorage.setItem('language', language)
    translate()
  });

});

4.准备对应的语言文件

• 中文（zh_CN）

  title=国际化
  lang=语言
  name=姓名
  age=年龄
  namePlaceholder=请输入姓名
  agePlaceholder=请输入年龄
  

• 英语（en）

  title=i18n
  lang=language
  name=name
  age=age
  namePlaceholder=please enter your name
  agePlaceholder=please enter your age
  

准备完毕就可以开始运行了，但是在本地直接打开index.html是会报错的，这时候我们需要一个webServer容器（.properties文件需要通过webServer才能访问），选择Apache、Node、Tomcat或Nginx都可以。这里我选择的是Tomcat，将整个文件夹放到webapps目录下，启动Tomcat即可访问。如果报Cannot read property 'length' of undefined的错，就要注意一下资源文件的路径是不是传错了（path参数）。

接下来来看一下效果图：

• 中文
  

• 英文
  

体验链接：http://39.107.83.60:9001/i18n/index.html

参考文章：https://blog.youkuaiyun.com/aixiaoyang168/article/details/49336709