详解使用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头信息中先获取浏览器的语言,然后设置。

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

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

以上所述是小编给大家介绍的使用jQuery.i18n.properties实现js国际化实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Java遍历Properties所有元素的方法实例

    复制代码 代码如下: //初始化properties Properties pro = new Properties(); try {    InputStream inStr = ClassLoader.getSystemResourceAsStream("wahaha.properties");    pro.load(inStr);} catch (FileNotFoundException e) {    e.printStackTrace();} catch (IOExcep

  • java遍历properties文件操作指南

    在java项目开发过程中,使用properties文件作为配置基本上是必不可少的,很多如系统配置信息,文件上传配置信息等等都是以这种方式进行保存. 同时学会操作properties文件也是java基础. 复制代码 代码如下: public class PropertiesUtil { public static Map getFileIO(String fileName){ Properties prop = new Properties(); Map propMap=new HashMap()

  • ajax读取properties资源文件数据的方法

    本文实例讲述了ajax读取properties资源文件数据的方法.分享给大家供大家参考.具体实现方法如下: properties资源文件的内容如下: hello=englishww name=english zk emailEmpty=Field cannot be empty! emailInvalid=Invalid email address! js调用ajax处理代码: $.ajax({ type:'POST', dataType:'json', url:'/jeecms/jeecms/

  • 基于jQuery.i18n实现web前端的国际化

    在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国际化英文单词为:Internationalization,又称 i18n,"i"为单词的第一个字母,"18"为"i"和"n"之间单词的个数,而"n"代表这个单词的最后一个字母.在计算机领域,国际化是指设计能够适应各种区域和语言环境的软件的过程. jQuery.i18n.properties 是一款轻量级的 jQuery

  • java获取properties属性文件示例

    一个属性列表可包含另一个属性列表作为它的"默认值":如果未能在原有的属性列表中搜索到属性键,则搜索第二个属性列表. 因为 Properties 继承于 Hashtable,所以可对 Properties 对象应用 put 和 putAll 方法.但不建议使用这两个方法,因为它们允许调用者插入其键或值不是 String 的项.相反,应该使用 setProperty 方法.如果在"不安全"的 Properties 对象(即包含非 String 的键或值)上调用 stor

  • 详解使用jquery.i18n.properties 实现web前端国际化

    jQuery.i18n.properties 是一款jQuery插件,jQuery.i18n.properties 根据浏览器使用的语言环境来解析资源文件,当然你也可以在使用中指定语言编码. 以下是资源文件示例 Messages.properties # 多余的行会自动忽略 username = 成龙 age = 32 Messages_zh.properties username = 成龙 Messages_zh_CN.properties username = 成龙 {0} jquery.i

  • 详解五种方式让你在java中读取properties文件内容不再是难题

    一.背景 最近,在项目开发的过程中,遇到需要在properties文件中定义一些自定义的变量,以供java程序动态的读取,修改变量,不再需要修改代码的问题.就借此机会把Spring+SpringMVC+Mybatis整合开发的项目中通过java程序读取properties文件内容的方式进行了梳理和分析,先和大家共享. 二.项目环境介绍 Spring 4.2.6.RELEASE SpringMvc 4.2.6.RELEASE Mybatis 3.2.8 Maven 3.3.9 Jdk 1.7 Id

  • Java中Properties的使用详解

    Java中有个比较重要的类Properties(Java.util.Properties),主要用于读取Java的配置文件,各种语言都有自己所支 持的配置文件,配置文件中很多变量是经常改变的,这样做也是为了方便用户,让用户能够脱离程序本身去修改相关的变量设置.今天,我们就开始Properties的使用. Java中Properties的使用 Properties的文档说明: The Properties class represents a persistent set of propertie

  • Java读取properties配置文件时,出现中文乱码的解决方法

    如下所示: public static String getConfig(String key) { Properties pros = new Properties(); String value = ""; try { pros.load(new InputStreamReader(Object.class.getResourceAsStream("/properties.properties"), "UTF-8")); value = pr

  • java读取properties配置文件的方法

    本文实例讲述了java读取properties配置文件的方法.分享给大家供大家参考.具体分析如下: 这两天做java项目,用到属性文件,到网上查资料,好半天也没有找到一个满意的方法能让我读取到.properties文件中属性值,很是郁闷,网上讲的获取属性值大概有以下方法,以下三种方法逐渐优化,以达到最好的效果以下都以date.properties文件为例,该文件放在src目录下,文件内容为: startdate=2011-02-07 totalweek=25 方法一: public class

  • Java中的几种读取properties配置文件的方式

    相信对于一名JAVA开发者开说properties文件一定再熟悉不过了,比如一下配置: config.properties会经常存放一些系统常量,版本号,路径之类的 database.properties存放数据库的连接参数 log4j.properties 日志的一些基本配置 redis.properties 缓存数据库的一些配置 当然前缀是根据用能自行定义的,一般来说文件的内容的格式是"键=值"的格式,文本注释信息可以用"#"来注释,下面来说说开发中如何读写pr

随机推荐