社区首页 >专栏 >jQuery.i18n.properties 实现 Web 前端的国际化

jQuery.i18n.properties 实现 Web 前端的国际化

江米小枣

发布于 2020-06-15 07:10:27

4.8K10

代码可运行

文章被收录于专栏：云前端云前端

运行总次数：0

代码可运行

1、什么是国际化

国际化英文单词为：Internationalization，又称 i18n，“i”为单词的第一个字母，“18”为“i”和“n”之间单词的个数，而“n”代表这个单词的最后一个字母。

2、jQuery.i18n.properties

jQuery.i18n.properties 是一款轻量级的 jQuery 国际化插件。与 Java 里的资源文件类似，jQuery.i18n.properties 采用 .properties 文件对 JavaScript 进行国际化。jQuery.i18n.properties 插件根据用户指定的（或浏览器提供的）语言和国家编码（符合 ISO-639 和 ISO-3166 标准）来解析对应的以“.properties”为后缀的资源文件。

3、实现原理

利用资源文件实现国际化是一种比较流行的方式。jQuery.i18n.properties 插件首先加载默认的资源文件（例如：Messages.properties），然后加载针对特定语言环境的资源文件（例如：Messages_en.properties），这就保证了在未提供某种语言的翻译时，默认值始终有效。开发人员可以以 JavaScript 变量（或函数）或 Map 的方式使用资源文件中的 key。

4、特点

使用 Java 标准的 .properties 文件作为资源文件
使用 ISO-639 作为语言编码标准，ISO-3166 作为国家名称编码标准
按顺序加载默认资源文件和指定语言环境的资源文件，保证默认值始终可用
未指定语言环境时使用浏览器提供的语言
可以在资源字符串中使用占位符（例如：hello= 你好 {0}! 今天是 {1}。）
资源文件中的 Key 支持命名空间（例如：com.company.msgs.hello = Hello!）
支持跨行的值
可以以 JavaScript 变量（或函数）或 Map 的方式使用资源文件中的 Key

5、API

jQuery.i18n.properties() 也可以这样写（$.i18n.properties()）

jQuery.i18n.prop() 也可以这样写（$.i18n.prop()）

jQuery.i18n.browserLang() 也可以这样写（$.i18n.browserLang()）

jQuery.i18n.properties

jQuery.i18n.properties() 用法

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

jQuery.i18n.prop(key) 用法

以 map 的方式使用资源文件中的值，其中 key 指的是资源文件中的 key。当 key 指定的值含有占位符时，可以使用 jQuery.i18n.prop(key,var1,var2 … ) 的形式，其中 var1,var2 …对各占位符依次进行替换。例如资源文件中有“msgmultiplaceholder = 今天是{0} 天... 我们去 {1}?”的键值对，则我们可以采用“jQuery.i18n.prop('msgmultiplaceholder','晴','玩耍');”的形式使用 msg_hello。

jQuery.i18n.browserLang() 用法

用于获取浏览浏览器的语言信息

demo

$(document).ready(function() {
       loadBundles('en');
               
       $('#lang').change(function() {
           var selection = $('#lang option:selected').val();
           loadBundles(selection != 'browser' ? selection : null);
           $('#langBrowser').empty();
           if(selection == 'browser') {
               $('#langBrowser').text('('+navigator.language+')');
           }
       });
       
   });
   
   function loadBundles(lang) {
       jQuery.i18n.properties({
           name:'Messages',
           path:'bundle/',
           mode:'both',
           language:lang, //浏览器语言
           callback: function() {
               updateExamples();
           }
       });
   }
   
   function updateExamples() {       var ex1 = 'msg_hello';
       var ex2 = 'msg_complex'; var ex2P = '今天';
       var ex3 = 'msg_url'; var ex3P = '走';
       var ex5 = 'msg_multi_placeholder'; var ex5P1 = '晴'; var ex5P2 = '玩耍';
       var ex6 = 'msg_multi_placeholder_corrected'; var ex6P1 = '晴'; var ex6P2 = '玩耍';
       $('#mapExamples')
           .empty()
           .append('<li><code class="i18n">jQuery.i18n.prop(\''+ex1+'\')</code>  -->  '+jQuery.i18n.prop(ex1)+'</li>')
           .append('<li><code class="i18n">jQuery.i18n.prop(\''+ex2+'\',\''+ex2P+'\')</code>  -->  '+jQuery.i18n.prop(ex2, ex2P)+'</li>')
           .append('<li><code class="i18n">jQuery.i18n.prop(\''+ex3+'\',\''+ex3P+'\')</code>  -->  '+jQuery.i18n.prop(ex3, ex3P)+'</li>')
           .append('<li><code class="i18n">jQuery.i18n.prop(\''+ex5+'\',\''+ex5P1+'\',\''+ex5P2+'\')</code>  -->  '+jQuery.i18n.prop(ex5, ex5P1, ex5P2)+'</li>')
           .append('<li><code class="i18n">jQuery.i18n.prop(\''+ex6+'\',\''+ex6P1+'\',\''+ex6P2+'\')</code>  -->  '+jQuery.i18n.prop(ex6, ex6P1, ex6P2)+'</li>');
           
          var ex21 = 'msg_hello';
       var ex22 = 'msg_world';
       var ex23 = 'msg_complex'; var ex23P = 'John';
       var ex24 = 'inexistent_key';
       $('#varExamples')
           .empty()
           .append('<li><code class="i18n">'+ex21+'</code>  -->  '+eval(ex21)+'</li>')
           .append('<li><code class="i18n">'+ex22+'</code>  -->  '+eval(ex22)+'</li>')
           .append('<li><code class="i18n">'+ex23+'(\''+ex23P+'\')</code>  -->  '+eval(ex23+'(\''+ex23P+'\')')+'</li>')
           .append('<li><code class="i18n">'+ex24+'</code>  -->  <small><i>(browser would report a missing JS symbol)</i></small></li>');
   }

<h2>jQuery.i18n.properties :: Demo</h2><div class="left">
 
<h3>例子</h3>
<div id="langBox">
     语言:
   <select id="lang">
       <option value="browser">browser</option>
       <option value="zh">中文</option>
       <option value="pt">葡萄牙文</option>
       <option value="en" selected>英文</option>
   </select>
   <span id="langBrowser"></span>
</div><h4>map</h4>
<ul id="mapExamples"></ul><h4>JS variable</h4>
<ul id="varExamples"></ul>
</div>