jQuery国际化插件 jQuery.i18n.properties 【轻量级】

jQuery.i18n.properties是一款轻量级的jQuery国际化插件，能实现Web前端的国际化。

国际化英文单词为：Internationalization，又称i18n，“i”为单词的第一个字母，“18”为“i”和“n”之间单词的个数，而“n”代表这个单词的最后一个字母。jQuery.i18n.properties采用.properties文件对JavaScript进行国际化。jQuery.i18n.properties插件首先加载默认的资源文件（strings.properties），然后加载针对特定语言环境的资源文件（strings_zh.properties），这就保证了在未提供某种语言的翻译时，默认值始终有效。

资源文件命名有以下三种格式：

basename.properties

basename_language.properties

basname_language_country.properties

一、jQuery.i18n.properties API

jQuery.i18n.properties的API只有几个：

jQuery.i18n.properties()、

jQuery.i18n.prop()、

jQuery.i18n.browserLang()，

当然也可以采用$.i18n.properties()、$.i18n.properties()、$.i18n.prop()、$.i18n.browserLang()的形式使用这些API。

1、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	代码执行完成时运行的回调函数

FOR EXAMPLE :

1 function loadProperties() {
jQuery.i18n.properties({//加载资浏览器语言对应的资源文件
name : 'strings', //资源文件名称
path : '/i18n/', //资源文件路径
mode : 'map', //用Map的方式使用资源文件中的值
language : 'zh',
callback : function() {//加载成功后设置显示内容
$('.l-btn-text').each(function() {
$(this).text($.i18n.prop($(this).text()));
});
}
});
}

2、jQuery.i18n.prop(key)

该方法以map方式使用资源文件中的值，其中key指的是资源文件中的key。当key指定的值含有占位符时，可用使用jQuery.i18n.prop(key,val1,val2……)的形式，其中val1,val2……对点位符进行顺序替换。

3、jQuery.i18n.browserLang()

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

4、使用的方式

4.1 项目组织结构



在i18n目录下，strings.properties对应默认翻译，strings_zh.properties对应中文翻译。

4.2 strings.properties 配置文件

User Name=User Name

Password=Password

Login=Login

4.3 strings_zh.properties 配置文件

User Name=用户名

Password=密码

Login=登陆

4.4 FOR EXAMPLE 例子

<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.i18n.properties-1.0.9.js"></script>

<div id="content">
<div>
<label id="label_username"></label>
<input type="text" id="username"></input>
</div>
<div>
<label id="label_password"></label>
<input type="password" id="password"></input>
</div>
<input type="button" id="button_login"/>
</div>

<script type="text/javascript">
$(function(){
jQuery.i18n.properties({
name : 'strings', //资源文件名称
path : '/i18n/', //资源文件路径
mode : 'map', //用Map的方式使用资源文件中的值
language : 'zh',
callback : function() {//加载成功后设置显示内容
$('#button-login').html($.i18n.prop('Login'));
$('#label-username').html($.i18n.prop('User Name'));
$('#label-password').html($.i18n.prop('Password'));
}
});
});
</script>

5、总结及问题改进

总的来说，jQuery.i18n.properties 有一下一些特点：

5.1 特点

总的来说，jQuery.i18n.properties 有一下一些特点：

使用 Java 标准的 .properties 文件作为资源文件，资源文件命名有以下三种格式：

basename_properties
basename_language.properties
basename_language_country.properties

使用 ISO-639 作为语言编码标准，ISO-3166 作为国家名称编码标准

按顺序加载默认资源文件和指定语言环境的资源文件，保证默认值始终可用

未指定语言环境时使用浏览器提供的语言

可以在资源字符串中使用占位符（例如：hello= 你好 {0}! 今天是 {1}。）

资源文件中的 Key 支持命名空间（例如：com.company.msgs.hello = Hello!）

支持跨行的值

可以以 JavaScript 变量（或函数）或 Map 的方式使用资源文件中的 Key

5.2 资源文件命名

在上面的示例中，我们的程序只自动识别中文和英文两种翻译，而不能进一步区分简体中文与繁体中文。为了使上面的示例能够根据浏览器语言设置自动区分简体中文和繁体中文，我们将简体中文对应的资源文件 strings_zh.properties 重命名为 strings_zh_CN.properties，并添加繁体中文资源文件 strings_zh_TW.properties。

运行程序，分别将浏览器语言设置为“中文（简体中文）”和“中文（繁體中文）”进行测试，发现程序并不能如我们预期显示简体中文和繁体中文，而是都以英文显示。分析后发现，造成这种现象的原因，是 jQuery.i18n.properties 插件默认的资源文件命名方式与浏览器上报的语言区域编码不一致，从而导致插件加载资源文件失败。以简体中文为例，jQuery.i18n.properties 默认的资源文件命名方式为“zh_CN”的形式，而浏览器上报的语言区域编码为 zh-CN”的形式，此时 jQuery.i18n.properties 插件加载资源文件的步骤如下：

加载默认资源文件即 strings.properties，成功。

加载名称为 strings_zh.properties 的资源文件，失败。

加载名称为 stirngs_zh-CN.properties 的资源文件，失败。

由于第 2 步和第 3 步都失败，所以 jQuery.i18n.properties 使用默认资源文件 strings.properties 中的翻译，也就是英文翻译。同理，繁体中文也不能正常显示。解决该问题有 3 种方法：

采用 strings_zh-CN.properties 的方式命名资源文件。这是最简单的方法，但这种命名方式和 Java 标准的资源文件命名方式不一致；

使用默认的资源文件命名方式，并在调用 jQuery.i18n.properties() 方法之前使用 var lang = jQuery.i18n.browserLang()

的方式

显式获取浏览器的语言，然后将 lang 中的“-”替换为”_”，并在使用 jQuery.i18n.properties() 方法时将 lang 作为参数。

更改 jQuery.i18n.properties 的源码。

这里我们采用最简单的第一种方式，将简体中文对应的资源文件 string_zh_CN.properties 重命名为 stirngs_zh-CN.properties，并将繁体中文对应的资源文件 strings_zh_TW.properties 重命名为 strings_zh-TW.properties。现在，程序就可以根据浏览器语言设置自动区分简体中文和繁体中文了，繁体中文的运行效果如图 4 所示。