怎样使用jQuery.i18n.properties让JS代码国际化

当我们在做前台页面开发时，由于页面内容过多，过于繁杂，有的时候一个页面上千行的（当然这样的页面也就算一般的），为了减少页面的内容，我们将页面的js文件提取出去，放入一个特定的js文件中，然后在页面中导入进来。这样做当我们需要做应用程序的国际化的时候，就需要考虑js的国际化，这里介绍一下使用JQuery.i18n.properties来实现js的国际化。

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

利用资源文件实现国际化是一种比较流行的方式，例如 Android 应用就可以采用以语言和国家编码命名的资源文件来实现国际化。jQuery.i18n.properties 插件中的资源文件以“.properties”为后缀，包含了区域相关的键值对。我们知道，Java 程序也可以使用以 .properties 为后缀的资源文件来实现国际化，因此，当我们要在 Java 程序和前端 JavaScript 程序中共享资源文件时，这种方式就显得特别有用。jQuery.i18n.properties 插件首先加载默认的资源文件（例如：strings.properties），然后加载针对特定语言环境的资源文件（例如：strings_zh.properties），这就保证了在未提供某种语言的翻译时，默认值始终有效。开发人员可以以 JavaScript 变量（或函数）或 Map 的方式使用资源文件中的 key。

那么如何使用jQuery.i18n.properties实现js国际化呢？

第一步：创建properties资源文件。

properties资源文件命名规则为：string_浏览器语言简码.properties,例如简体中文：string_zh-CN.properties这里需要注意是中划线而不是下划线，如图我创建了三个资源文件

js_en-US.properties(美国英语)，js_ja.properties(日语),js_zh-CN.properties（简体中文）。

第二步：在js文件中引入jQuery.i18n.properties所需js文件。

因为jQuery.i18n.properties是依赖于Jquery框架的，所以需要在你的js文件中引入jQuery.i18n.properties所需js文件。

导入红色部分的js即可使用jQuery.i18n.properties了。

第三步：使用jQuery.i18n.properties API

<script type="text/javascript">
  $(document).ready(function(){
  //国际化加载属性文件
   jQuery.i18n.properties({
    name:'js',
    path:'<%=path%>/js/i18n/',
    mode:'map',
    callback: function() {// 加载成功后设置显示内容
    //alert(jQuery.i18n.prop("theme_manage.js_activity"));
    }
   });
 });
</script>

其中:name后面的值为你定义的资源文件中语言简码前面的字符串，因为我的资源文件为js_xxx.properties,所以这个值就为js

path后面的值为你资源文件的相对路径。即相对于工程结构WebContent下的路径所在

mode后面的值为加载模式；"vars"表示以JavaScript变量或函数的形式加载资源文件中的key值（默认为这种），“map”表示以map的方式加载资源文件中的key值。“both表示可以同时使用这两种方式”。我这里使用的是map。

callback为回调函数。

是怎样根据不同的语言环境加载不同的资源文件的呢？其实，jQuery.i18n.properties实现的原理就是，根据name后面的值，加上浏览器的语言简码，再加上.properties找到对应的资源文件。这个过程是自动的，只需要进行上面的配置即可。

propertites中键值对如下：（在properties文件中中文会自动转换成相对应的ASCII值，当然这里是可以设置的，也可以通过插件进行更改的，我这就没做了反正这些中文是从页面上复制出来的，不管了），等号前的为key，等号后的为值（注意一点的是，不同的资源文件中key必须保持一致，是自定义的）。

这样资源文件中的内容已经加载完成了。

第四步：js文件中根据key找对应的值。

红色部分就是取值的方式，引号中的字符串对应着上面资源文件中的key值。

需要注意的地方：

此上方法在谷歌和火狐的浏览器中实现完全没有问题。但在IE浏览器中会出现问题，问题在使用IE浏览器每次获取到的语言环境为系统的语言，而不是浏览器的语言。

这个问题我也纠结了很久，网上提供了一些方法来获得浏览器的语言，但是在IE中却不起作用，最后我的解决方法是：在使用jQuery.i18n.properties加载资源文件之前，在request头信息中先获取浏览器的语言，然后设置。

这样国际化就到此结束了。

这是我第一篇博客，以前总是看别人的博客，后面发现自己遇到的问题，虽然解决了，但过段时间后发现自己就忘记了，一致多次遇到同样的问题，后又忘记怎么解决，又是上网找资料。这是我决定写写博客的直接原因。不过写博客的感觉确实还是不错的，可以记录一下自己的学习过程。希望大伙也可以这样试试。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

优化vue项目步骤详解

JS callback回调函数的使用（附代码）

以上就是怎样使用jQuery.i18n.properties让JS代码国际化的详细内容，更多请关注Gxl网其它相关文章！