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=日志