详解使用jQuery.i18n.properties实现js国际化


Posted in jQuery onMay 04, 2018

当我们在做前台页面开发时,由于页面内容过多,过于繁杂,有的时候一个页面上千行的(当然这样的页面也就算一般的),为了减少页面的内容,我们将页面的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(简体中文)。

 详解使用jQuery.i18n.properties实现js国际化

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

因为jQuery.i18n.properties是依赖于Jquery框架的,所以需要在你的js文件中引入jQuery.i18n.properties所需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下的路径所在

详解使用jQuery.i18n.properties实现js国际化

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

callback为回调函数。

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

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

 详解使用jQuery.i18n.properties实现js国际化

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

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

 详解使用jQuery.i18n.properties实现js国际化

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

需要注意的地方:

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

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

 详解使用jQuery.i18n.properties实现js国际化

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

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

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

jQuery 相关文章推荐
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jquery实现上传图片功能
Jun 29 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 #jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 #jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 #jQuery
基于jquery实现左右上下移动效果
May 02 #jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 #jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 #jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 #jQuery
You might like
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
Python自动登录126邮箱的方法
2015/07/10 Python
Python制作简单的网页爬虫
2015/11/22 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
新闻专业本科生的自我评价分享
2013/11/20 职场文书
创先争优活动方案
2014/02/12 职场文书
党员自我剖析材料
2014/08/31 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
英文升职感谢信
2015/01/23 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
健康教育主题班会
2015/08/14 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis