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

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

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>

7、项目中的实现可能遇到的问题

a、字符长短问题。 b、度量单位问题。

8、总结

jQuery.i18n.properties 具有轻量级(压缩后仅 4kb)、简单易用等特点,但是作为一个普及度不高的轻量级插件,不一定适用于大型的或对效率要求极高的场景。

9、资料来源

  • http://www.cnblogs.com/sydeveloper/p/3729951.html
  • https://github.com/jquery-i18n-properties/jquery-i18n-properties

本文分享自微信公众号 - 云前端(fewelife),作者:小樊qq

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-07-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [译] 用 Vue.js 3 Composition API 创建 i18n 插件

    原文:https://vuedose.tips/create-a-i18n-plugin-with-composition-api-in-vuejs-3/

    江米小枣
  • 一个简单的微信小程序DEMO

    wx.request发起的是 HTTPS 请求。一个微信小程序,同时只能有5个网络请求连接

    江米小枣
  • WebSocket 简介及应用实例

    HTML5 的出现,标志着后 Flash 时代各种现代浏览器的集体爆发,也是谨防 Adobe 一家独大的各家厂商们,历经多年各自为战,想换个活法儿并终于达成一定...

    江米小枣
  • Bag of Tricks for Image Classification with Convolutional Neural Networks

    当我们有一定资源后,当然希望能充分利用起来,所以通常会增加batch size来达到加速训练的效果。但是,有不少实验结果表明增大batch size可能降低收敛...

    marsggbo
  • 逆序排序遇到`Not-static method cannot be referenced from a static context`

    IDEA会提示错误:Not-static method cannot be referenced from a static context

    十毛
  • 对!非肿瘤发生信文章就是这么简单!

    Potentially critical roles of TNPO1,RAP1B,ZDHHC17,and PPM1B in the progression o...

    科研菌
  • Github上基于lodash和lowdb json查询服务器json-server

    Github上基于lodash和lowdb json查询服务器json-server

    MiaoGIS
  • 让老电影“重生”的AI超分辨技术,即将形成一波热点

    最近有件大事,11 月 15 日,全球瞩目的经典电影《海上钢琴师》4K 修复版即将登陆全国院线。岁月侵蚀的影片经典场景,在老胶片的保存下只剩模糊的影像。而此次经...

    AI科技评论
  • MATLAB自动扫雷(3)——整体运行

    rect = win.getWindowRect(class_name, title_name);

    万木逢春
  • pytest修仙之路5 - yield操作

    上一篇中,我们刚刚实现了在每个用例之前执行初始化操作,那么用例执行完之后如需要清除数据(或还原)操作,可以使用 yield 来实现。fixture通过scope...

    北京-宏哥

扫码关注云+社区

领取腾讯云代金券