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


Posted in jQuery onMay 04, 2018

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

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。

下面介绍一下如何在项目中如何使用i18n,说明一下,我这里与官网并不相同,i18n的一些方法我并没有用,只是用到了很少的一部分,而且找出了比较适合我们项目使用的方式。

1.首先,建立资源文件:

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

locales/en-us/ns.jsp.json:

{ 
 "reSendMail": { 
  "emailSendFail": "Failed to send the email", 
  "emailHasSendToYourEmail": "The email has be sent to your email address. " 
 }, 
 "login": { 
  "pleaseWriteUserName": "Please input your username", 
  "pleaseWritePassword": "Please input your password " 
 }, 
 "activeRegist": { 
  "thisUserEmailHasUsed":"Email has already been used", 
  "thisUserNameHasUsed":"User Name has already been used", 
  "4to30Char":"Please enter 4-30 characters", 
  "1to50Char":"Please enter 1-50 characters", 
  "1to16Linkman":"Please enter 1-16 characters", 
  "loginPage":"Login Page", 
  "EmailMustNotEmpty": "Email can't be blank", 
  "PWDNotEmpty": "Password can't be blank", 
  "nameNotEmpty":"Name can't be blank", 
  "conpanyNotEmpty":"Company can't be blank", 
  "qqNotEmpty":"QQ can not be blank", 
  "phoneNotEmpty":"Mobile can not be blank", 
  "least50charEmailAddress":"No more than 50 characters for email address", 
  "enterEmailAddressLikeThis":"Email address format 'abc@abc.com'", 
  "enter6To32Character":"Please enter 6-32 characters", 
  "NameMost30Character":"No more than 30 characters for name", 
  "QQTypeIsWrong":"Incorrent QQ format", 
  "phoneTypeNotCorrect":"Incorrent mobile format", 
  "thisEmailHasRegistered":"Email address has already been registered", 
  "registerFail":"Registration failed!", 
   "TwoTimesPWDIsDifferent":"The passwords you entered do not match. Please try again." 
 } 
}

中文配置文件就不写了,格式一样,用了map的形式份模块来写。

2.在jsp页面上引入i18n.js并初始化i18n

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/i18next.js"></script> 
<script type="text/javascript"> 
i18n.init({ 
 lng:'${sessionScope.language }', 
 ns: { namespaces: ['ns.jsp'], defaultNs: 'ns.jsp'}, 
 useLocalStorage: false 
}); 
</script>

3.js引用

var emailflag = false; 
function checkemail() { 
 check('email', 'emailmessage'); 
 var email = $("#email").attr("value"); 
 if(email != null && email != "") { 
  if(email.length > 50) { 
   setDivInfo("emaildiv", i18n.t('activeRegist.least50charEmailAddress'), 1);//请输入50字符内的邮箱地址 
  } else { 
   if(isEmail(email, $("#email"))) { 
    checkemailForServer(email); 
   } else { 
    setDivInfo("emaildiv", i18n.t('activeRegist.enterEmailAddressLikeThis'), 1);//请输入邮箱地址,格式为abc@abc.com 
   } 
  } 
 } 
}

4.测试

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

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

参考:

http://i18next.com/

jQuery 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
jQuery实现电梯导航模块
Dec 22 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
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 #jQuery
You might like
解析PHP 5.5 新特性
2013/07/02 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
Python FTP操作类代码分享
2014/05/13 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
装饰资料员岗位职责
2013/12/30 职场文书
如何写你的创业计划书
2014/01/07 职场文书
环境建设实施方案
2014/03/14 职场文书
企业法人代表任命书
2014/06/06 职场文书
师德先进个人材料
2014/12/20 职场文书
深入理解python协程
2021/06/15 Python
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
德劲DE1102数字调谐收音机机评
2022/04/07 无线电
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers