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

$(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头信息中先获取浏览器的语言，然后设置。

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

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

jQuery.i18n.properties实现js国际化相关推荐

jQuery.i18n.properties 中文说明文档
jQuery.i18n.properties 版本 : 1.2.2 关于 jQuery.i18n.properties是一个轻量级的jQuery插件,用于从.properties文件中提供javasc ...
使用 jQuery.i18n.properties 实现 Web 前端的国际化
jQuery.i18n.properties 简介在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国际化英文单词为:Internationalization, ...
基于jQuery.i18n.properties插件实现前端页面国家化
一.简介在介绍jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国家化英文单词为:Internationalization,又称 i18n,"i"为 ...
JQuery Dialog UI按钮文字国际化
在使用JQuery Dialog UI插件时,也许你会遇到这样的问题:怎样动态改变按钮显示的文字?特别是在做国际化的时候.我们知道,在JQuery Dialog中可以自定义按钮Button $(&qu ...
JEECG 前端JS国际化实现，采用i18n新技术方案
JEECG 前端JS国际化实现,采用i18n新技术方案 JEECG平台已全面实现了国际化,从后台代码提示到页面表单,使用方法简单易用: 后台配置国际化语言,java或者jsp层通过引用国际化标签,即 ...
使用jquery.i18n实现国际化多语言显示
问题描述: 有时候你写的页面需要兼容多国语言,不同的国家浏览不同的语言.这种方法并不需要重新请求数据库拿数据,只需要更改文案之后页面会自动根据浏览器语言自动切换. 实现方法: 1,首先需要获取到浏览器 ...
jquery.i18n实现国际化
导入jquery.i18n.js文件 jquery-i18n-properties 文件目录结构: 准备翻译文件通过阅读源码可知,翻译一种语言至多需要三个propoties文件基本文件,所有语言均 ...
每个 Web 开发者应该知道的 jQuery i18n 知识！——爱创课堂
在设计网站时,一个重要的考虑是国际化.世界上每个地区和国家对于文本.消息.数字和日期应该如何出现有不同的期望.特定应用程序的每个用户期望所有文本和消息以熟悉的格式显示.JavaScript有一个很好的 ...
多语言切换jquery.i18n.min.js
项目需求,切换多语言,采用 jQuery.i18n.min.js文件内容如下 ------------------------------------------------- /*! * jque ...

jQuery.i18n.properties实现js国际化

jQuery.i18n.properties实现js国际化相关推荐

最新文章

热门文章