欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-10 11:51:49
在介绍 jquery.i18n.properties 之前,我们先来看一下什么是国际化。国际化英文单词为:internationalization,又称 i18n,“i”为...

在介绍 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前端的国际化

参考: