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