怎样使自己的js代码国际化

答案 这次给大家带来怎样使自己的js代码国际化,使js代码国际化的注意事项有哪些,下面就是实战案例,一起来看一下。当我们在做前台页面开发时,由于页面内容过多,过于繁杂,有的时候一个页面上千行的(当然这样的页面也就算一般的),为了减少页面的内容,我们将页面的js文件提取出去,放入一个

怎样使自己的js代码国际化

这次给大家带来怎样使自己的js代码国际化,使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三层嵌套路由

如何使用Vue.js计算属性与侦听器


  • 国际

  • 怎样
  • 免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理,本文部分文字与图片资源来自于网络,转载此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请立即通知我们,情况属实,我们会第一时间予以删除,并同时向您表示歉意,谢谢!

    图片声明:本站部分配图来自人工智能系统AI生成,国外stocksnap摄影无版权图库。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

    内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国外贸事业出一份力,发布内容不收取任何费用也不接任何广告!
     

    • 热门焦点
    • 江苏省泰州市泰兴市过船镇仁寿村邮编是多少

      邮编查询为您提供江苏省泰州市泰兴市过船镇仁寿村邮编,江苏省泰州市泰兴市过船镇仁寿村的邮编,江苏省泰州市泰兴市过船镇仁寿村的邮政编码,江苏省泰州市泰兴市过船镇仁寿村的邮政编码是多少,江苏省泰州市泰兴市过船镇仁寿村的邮政编码查询,江苏省泰州市泰兴市过船镇仁寿村的邮政编码快速查询。
      01-09
    • 江苏省泰州市泰兴市宁界镇龙王村邮编是多少

      邮编查询为您提供江苏省泰州市泰兴市宁界镇龙王村邮编,江苏省泰州市泰兴市宁界镇龙王村的邮编,江苏省泰州市泰兴市宁界镇龙王村的邮政编码,江苏省泰州市泰兴市宁界镇龙王村的邮政编码是多少,江苏省泰州市泰兴市宁界镇龙王村的邮政编码查询,江苏省泰州市泰兴市宁界镇龙王村的邮政编码快速查询。
      01-09
    • 江苏省泰州市泰兴市黄桥镇文明南村邮编是多少

      邮编查询为您提供江苏省泰州市泰兴市黄桥镇文明南村邮编,江苏省泰州市泰兴市黄桥镇文明南村的邮编,江苏省泰州市泰兴市黄桥镇文明南村的邮政编码,江苏省泰州市泰兴市黄桥镇文明南村的邮政编码是多少,江苏省泰州市泰兴市黄桥镇文明南村的邮政编码查询,江苏省泰州市泰兴市黄桥镇文明南村的邮政编码快速查询。
      01-09
    • 江苏省泰州市泰兴市古溪镇宝塔路邮编是多少

      邮编查询为您提供江苏省泰州市泰兴市古溪镇宝塔路邮编,江苏省泰州市泰兴市古溪镇宝塔路的邮编,江苏省泰州市泰兴市古溪镇宝塔路的邮政编码,江苏省泰州市泰兴市古溪镇宝塔路的邮政编码是多少,江苏省泰州市泰兴市古溪镇宝塔路的邮政编码查询,江苏省泰州市泰兴市古溪镇宝塔路的邮政编码快速查询。
      01-09
    • 江苏省泰州市泰兴市横垛镇横垛村邮编是多少

      邮编查询为您提供江苏省泰州市泰兴市横垛镇横垛村邮编,江苏省泰州市泰兴市横垛镇横垛村的邮编,江苏省泰州市泰兴市横垛镇横垛村的邮政编码,江苏省泰州市泰兴市横垛镇横垛村的邮政编码是多少,江苏省泰州市泰兴市横垛镇横垛村的邮政编码查询,江苏省泰州市泰兴市横垛镇横垛村的邮政编码快速查询。
      01-09
    • 江苏省泰州市泰兴市横垛镇育才路邮编是多少

      邮编查询为您提供江苏省泰州市泰兴市横垛镇育才路邮编,江苏省泰州市泰兴市横垛镇育才路的邮编,江苏省泰州市泰兴市横垛镇育才路的邮政编码,江苏省泰州市泰兴市横垛镇育才路的邮政编码是多少,江苏省泰州市泰兴市横垛镇育才路的邮政编码查询,江苏省泰州市泰兴市横垛镇育才路的邮政编码快速查询。
      01-09
    • 江苏省泰州市泰兴市黄桥镇永丰后园邮编是多少

      邮编查询为您提供江苏省泰州市泰兴市黄桥镇永丰后园邮编,江苏省泰州市泰兴市黄桥镇永丰后园的邮编,江苏省泰州市泰兴市黄桥镇永丰后园的邮政编码,江苏省泰州市泰兴市黄桥镇永丰后园的邮政编码是多少,江苏省泰州市泰兴市黄桥镇永丰后园的邮政编码查询,江苏省泰州市泰兴市黄桥镇永丰后园的邮政编码快速查询。
      01-09
    • 江苏省泰州市泰兴市泰兴镇羌溪花园邮编是多少

      邮编查询为您提供江苏省泰州市泰兴市泰兴镇羌溪花园邮编,江苏省泰州市泰兴市泰兴镇羌溪花园的邮编,江苏省泰州市泰兴市泰兴镇羌溪花园的邮政编码,江苏省泰州市泰兴市泰兴镇羌溪花园的邮政编码是多少,江苏省泰州市泰兴市泰兴镇羌溪花园的邮政编码查询,江苏省泰州市泰兴市泰兴镇羌溪花园的邮政编码快速查询。
      01-09
    • 江苏省泰州市泰兴市古溪镇邮编是多少

      邮编查询为您提供江苏省泰州市泰兴市古溪镇邮编,江苏省泰州市泰兴市古溪镇的邮编,江苏省泰州市泰兴市古溪镇的邮政编码,江苏省泰州市泰兴市古溪镇的邮政编码是多少,江苏省泰州市泰兴市古溪镇的邮政编码查询,江苏省泰州市泰兴市古溪镇的邮政编码快速查询。
      01-09
    • 江苏省泰州市泰兴市泰兴镇保健巷邮编是多少

      邮编查询为您提供江苏省泰州市泰兴市泰兴镇保健巷邮编,江苏省泰州市泰兴市泰兴镇保健巷的邮编,江苏省泰州市泰兴市泰兴镇保健巷的邮政编码,江苏省泰州市泰兴市泰兴镇保健巷的邮政编码是多少,江苏省泰州市泰兴市泰兴镇保健巷的邮政编码查询,江苏省泰州市泰兴市泰兴镇保健巷的邮政编码快速查询。
      01-09
    • 江苏省泰州市泰兴市泰兴镇华泰公寓邮编是多少

      邮编查询为您提供江苏省泰州市泰兴市泰兴镇华泰公寓邮编,江苏省泰州市泰兴市泰兴镇华泰公寓的邮编,江苏省泰州市泰兴市泰兴镇华泰公寓的邮政编码,江苏省泰州市泰兴市泰兴镇华泰公寓的邮政编码是多少,江苏省泰州市泰兴市泰兴镇华泰公寓的邮政编码查询,江苏省泰州市泰兴市泰兴镇华泰公寓的邮政编码快速查询。
      01-09
    • 江苏省泰州市泰兴市泰兴镇中华巷邮编是多少

      邮编查询为您提供江苏省泰州市泰兴市泰兴镇中华巷邮编,江苏省泰州市泰兴市泰兴镇中华巷的邮编,江苏省泰州市泰兴市泰兴镇中华巷的邮政编码,江苏省泰州市泰兴市泰兴镇中华巷的邮政编码是多少,江苏省泰州市泰兴市泰兴镇中华巷的邮政编码查询,江苏省泰州市泰兴市泰兴镇中华巷的邮政编码快速查询。
      01-09
    • 江苏省泰州市泰兴市泰兴镇西鞠家巷邮编是多少

      邮编查询为您提供江苏省泰州市泰兴市泰兴镇西鞠家巷邮编,江苏省泰州市泰兴市泰兴镇西鞠家巷的邮编,江苏省泰州市泰兴市泰兴镇西鞠家巷的邮政编码,江苏省泰州市泰兴市泰兴镇西鞠家巷的邮政编码是多少,江苏省泰州市泰兴市泰兴镇西鞠家巷的邮政编码查询,江苏省泰州市泰兴市泰兴镇西鞠家巷的邮政编码快速查询。
      01-09
    • 江苏省泰州市泰兴市泰兴镇三泰新村邮编是多少

      邮编查询为您提供江苏省泰州市泰兴市泰兴镇三泰新村邮编,江苏省泰州市泰兴市泰兴镇三泰新村的邮编,江苏省泰州市泰兴市泰兴镇三泰新村的邮政编码,江苏省泰州市泰兴市泰兴镇三泰新村的邮政编码是多少,江苏省泰州市泰兴市泰兴镇三泰新村的邮政编码查询,江苏省泰州市泰兴市泰兴镇三泰新村的邮政编码快速查询。
      01-09
    • 江苏省泰州市泰兴市南沙镇唐港村邮编是多少

      邮编查询为您提供江苏省泰州市泰兴市南沙镇唐港村邮编,江苏省泰州市泰兴市南沙镇唐港村的邮编,江苏省泰州市泰兴市南沙镇唐港村的邮政编码,江苏省泰州市泰兴市南沙镇唐港村的邮政编码是多少,江苏省泰州市泰兴市南沙镇唐港村的邮政编码查询,江苏省泰州市泰兴市南沙镇唐港村的邮政编码快速查询。
      01-09