详解使用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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 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
融入意大利的咖啡文化
2021/03/03 咖啡文化
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
js 判断 enter 事件
2009/02/12 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
json的使用小结
2016/06/08 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
python实现人工蜂群算法
2020/09/18 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
会计电算化应届生求职信
2013/11/03 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
出国签证在职证明
2014/09/20 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
小学信息技术教学反思
2016/02/16 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android