jquery.i18n.properties.js 实现多语言

引入资源：

jquery.min.js
jquery.i18n.properties.js

 

jQuery.i18n.properties 是一款轻量级的 jQuery 国际化插件，采用 .properties 文件对 JavaScript 进行国际化。jQuery.i18n.properties 插件根据用户指定的 语言 来解析对应的以”.properties”为后缀的资源文件。

 

加载语言资源：jQuery.i18n.properties(settings)

settings 是配置加载项的

选项	描述	类型	可选？
name	资源文件的名称，例如 strings 或 [strings1,strings2]，前者代表一个资源文件，后者代表资源文件数组。	String 或 String[]	否
path	资源文件所在目录的路径	String	是
mode	加载模式：”vars”表示以 JavaScript 变量或函数的形式使用资源文件中的 Key，”map”表示以 Map 的方式使用资源文件中的 Key，”both”表示可以同时使用两种方式。如果资源文件中的 Key 包含 JavaScript 的关键字，则只能采用”map”。默认值是”vars”。	String	是
language	ISO-639 指定的语言编码（如：”en”表示英文、”zh”表示中文），或同时使用 ISO-639 指定的语言编码和 ISO-3166 指定的国家编码（如：”en_US”，”zh_CN”等）。如果不指定，则采用浏览器报告的语言编码。	String	是
cache	指定浏览器是否对资源文件进行缓存，默认为 false。	boolean	是
encoding	加载资源文件时使用的编码。默认为 UTF-8。	String	是
callback	代码执行完成时运行的回调函数	function	是

jQuery.i18n.properties({
    name:'strings',// 资源文件名称
    path:'bundle/',// 资源文件所在目录路径
    mode:'both',// 模式：变量或 Map
    language:'pt_PT',// 对应的语言
    cache:false,
    encoding: 'UTF-8',
    callback: function() {// 回调方法
    }
 });

 

实现方法：

逻辑：定义 lang 变量，判断页面加载成功后，这个变量是否存在？

如果不存在，则去本地的 localStorage 中获取 i18n 的值。获取到的 lang 值 赋值给 jQuery.i18n.properties 方法中的 language。

function loadLanguage() {
    let lang;
    if (!lang && !window.__settings) {
      lang = window.localStorage.getItem('i18n')
    }
    jQuery.i18n.properties({// 加载资浏览器语言对应的资源文件
      // name: '', // 资源文件名称
      path: '/ipc/languagePacks/', // 资源文件路径
      language: lang,
      cache: false,
      mode: 'map', // 用Map的方式使用资源文件中的值
      callback: function (setting) { 
        // 加载成功后给 body 设置属性
        $('body').attr('i18n-lang', setting.language)
       // 切换语言
        $(".language-select").val(setting.language)
        if (!window.__settings) {
          // 将 i18n 的值保存在本地
          // window.__settings 是一直不存在的？
          window.localStorage.setItem('i18n', setting.language)
        }
      }
    })
  }

$(document).ready(function () {
    if (!window.__settings) {
     // 将选择语言的下拉添加到节点中
      $(".language").append(`<select class="language-select">
        <option value="zh_CN" selected>简体中文</option>
        <option value="en" >EN</option> 
      </select>`)

      //select change 事件
      $(".language-select").on("change", function () {
      // 选择语言后，将  localStorage 中的 i18n 值替换
        window.localStorage.setItem('i18n', $(this).val())
      // 重新刷新
        window.location.reload(true)
      })
    }

   //重新加载语言资源
    loadLanguage()
   //清除
    sessionStorage.clear();
  });

语言包 languagePacks 中的资源为：

en.properties
zh.properties

properties 中内容是一一对应的

...

menu.preview=Live View
menu.replay=Playback
menu.picture=Picture
menu.application=Application
menu.mixin=Mixed-traffic
menu.face=Face Recognition
menu.settings=Configuration
menu.settings.local=Local
menu.settings.sys=System Settings 
menu.settings.sys.base=Basic Information
menu.settings.sys.auth=Security Authentication
menu.settings.sys.webuser=User Management
menu.settings.sys.useronline=Online Users
menu.settings.sys.service=System Service
menu.settings.sys.time=Time Settings
menu.settings.sys.serial=Serial Port Settings
menu.settings.sys.maintain=Upgrade & Maintenance
menu.settings.sys.log=Log

menu.preview=预览
menu.replay=回放
menu.picture=图片
menu.application=应用
menu.mixin=混行模式
menu.face=人脸识别
menu.settings=配置
menu.settings.local=本地
menu.settings.sys=系统配置
menu.settings.sys.base=基本信息
menu.settings.sys.auth=安全认证
menu.settings.sys.webuser=用户管理
menu.settings.sys.useronline=在线用户
menu.settings.sys.service=系统服务
menu.settings.sys.time=时间配置
menu.settings.sys.serial=串口配置
menu.settings.sys.maintain=升级维护
menu.settings.sys.log=日志