基于jQuery.i18n實(shí)現(xiàn)web前端的國際化

更新時(shí)間：2018年05月04日 11:55:40 作者：小小_一路走一路成長

這篇文章主要介紹了基于jQuery.i18n實(shí)現(xiàn)web前端的國際化，具有很好的參考價(jià)值，希望對大家有所幫助

在介紹 jQuery.i18n.properties 之前，我們先來看一下什么是國際化。國際化英文單詞為：Internationalization，又稱 i18n，“i”為單詞的第一個(gè)字母，“18”為“i”和“n”之間單詞的個(gè)數(shù)，而“n”代表這個(gè)單詞的最后一個(gè)字母。在計(jì)算機(jī)領(lǐng)域，國際化是指設(shè)計(jì)能夠適應(yīng)各種區(qū)域和語言環(huán)境的軟件的過程。

jQuery.i18n.properties 是一款輕量級的 jQuery 國際化插件。與 Java 里的資源文件類似，jQuery.i18n.properties 采用.properties 文件對 JavaScript 進(jìn)行國際化。jQuery.i18n.properties 插件根據(jù)用戶指定的（或?yàn)g覽器提供的）語言和國家編碼（符合 ISO-639 和 ISO-3166 標(biāo)準(zhǔn)）來解析對應(yīng)的以“.properties”為后綴的資源文件。

利用資源文件實(shí)現(xiàn)國際化是一種比較流行的方式，例如 Android 應(yīng)用就可以采用以語言和國家編碼命名的資源文件來實(shí)現(xiàn)國際化。jQuery.i18n.properties 插件中的資源文件以“.properties”為后綴，包含了區(qū)域相關(guān)的鍵值對。我們知道，Java 程序也可以使用以 .properties 為后綴的資源文件來實(shí)現(xiàn)國際化，因此，當(dāng)我們要在 Java 程序和前端 JavaScript 程序中共享資源文件時(shí)，這種方式就顯得特別有用。jQuery.i18n.properties 插件首先加載默認(rèn)的資源文件（例如：strings.properties），然后加載針對特定語言環(huán)境的資源文件（例如：strings_zh.properties），這就保證了在未提供某種語言的翻譯時(shí)，默認(rèn)值始終有效。開發(fā)人員可以以 JavaScript 變量（或函數(shù)）或 Map 的方式使用資源文件中的 key。

下面介紹一下如何在項(xiàng)目中如何使用i18n，說明一下，我這里與官網(wǎng)并不相同，i18n的一些方法我并沒有用，只是用到了很少的一部分，而且找出了比較適合我們項(xiàng)目使用的方式。

1.首先，建立資源文件：

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字符內(nèi)的郵箱地址 
  } else { 
   if(isEmail(email, $("#email"))) { 
    checkemailForServer(email); 
   } else { 
    setDivInfo("emaildiv", i18n.t('activeRegist.enterEmailAddressLikeThis'), 1);//請輸入郵箱地址，格式為abc@abc.com 
   } 
  } 
 } 
}

4.測試