基于jQuery.i18n實(shí)現(xiàn)web前端的國(guó)際化
在介紹 jQuery.i18n.properties 之前,我們先來看一下什么是國(guó)際化。國(guó)際化英文單詞為:Internationalization,又稱 i18n,“i”為單詞的第一個(gè)字母,“18”為“i”和“n”之間單詞的個(gè)數(shù),而“n”代表這個(gè)單詞的最后一個(gè)字母。在計(jì)算機(jī)領(lǐng)域,國(guó)際化是指設(shè)計(jì)能夠適應(yīng)各種區(qū)域和語言環(huán)境的軟件的過程。
jQuery.i18n.properties 是一款輕量級(jí)的 jQuery 國(guó)際化插件。與 Java 里的資源文件類似,jQuery.i18n.properties 采用.properties 文件對(duì) JavaScript 進(jìn)行國(guó)際化。jQuery.i18n.properties 插件根據(jù)用戶指定的(或?yàn)g覽器提供的 )語言和國(guó)家編碼(符合 ISO-639 和 ISO-3166 標(biāo)準(zhǔn))來解析對(duì)應(yīng)的以“.properties”為后綴的資源文件。
利用資源文件實(shí)現(xiàn)國(guó)際化是一種比較流行的方式,例如 Android 應(yīng)用就可以采用以語言和國(guó)家編碼命名的資源文件來實(shí)現(xiàn)國(guó)際化。jQuery.i18n.properties 插件中的資源文件以“.properties”為后綴,包含了區(qū)域相關(guān)的鍵值對(duì)。我們知道,Java 程序也可以使用以 .properties 為后綴的資源文件來實(shí)現(xiàn)國(guó)際化,因此,當(dāng)我們要在 Java 程序和前端 JavaScript 程序中共享資源文件時(shí),這種方式就顯得特別有用。jQuery.i18n.properties 插件首先加載默認(rèn)的資源文件(例如:strings.properties),然后加載針對(duì)特定語言環(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);//請(qǐng)輸入50字符內(nèi)的郵箱地址 } else { if(isEmail(email, $("#email"))) { checkemailForServer(email); } else { setDivInfo("emaildiv", i18n.t('activeRegist.enterEmailAddressLikeThis'), 1);//請(qǐng)輸入郵箱地址,格式為abc@abc.com } } } }
4.測(cè)試
參考:
- 詳解使用jquery.i18n.properties 實(shí)現(xiàn)web前端國(guó)際化
- java讀取properties配置文件的方法
- Java遍歷Properties所有元素的方法實(shí)例
- java獲取properties屬性文件示例
- Java讀取properties配置文件時(shí),出現(xiàn)中文亂碼的解決方法
- 詳解五種方式讓你在java中讀取properties文件內(nèi)容不再是難題
- Java中Properties的使用詳解
- java遍歷properties文件操作指南
- ajax讀取properties資源文件數(shù)據(jù)的方法
- Java中的幾種讀取properties配置文件的方式
- 詳解使用jQuery.i18n.properties實(shí)現(xiàn)js國(guó)際化
相關(guān)文章
JQuery 構(gòu)建客戶/服務(wù)分離的鏈接模型中Table中的排序分析
從上篇文章,我們實(shí)現(xiàn)了Table分頁代碼的高效性,咱們繼續(xù)沿著這個(gè)思路,探討Table表格數(shù)據(jù)中另外一個(gè)很常見的排序問題。說到排序,我記得在asp.net中 GridView中提供了這樣的方便,只需在展示字段上加上 Sorting 這樣的屬性,基本就完成了,剩下就是服務(wù)端cs代碼的寫法了。2010-01-01jquery中封裝函數(shù)傳遞當(dāng)前元素的方法示例
這篇文章主要給大家介紹了關(guān)于jquery中封裝函數(shù)傳遞當(dāng)前元素的方法,文中給出了詳細(xì)的示例代碼,對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-05-05JQuery日歷插件My97DatePicker日期范圍限制
這篇文章主要介紹了JQuery日歷插件My97DatePicker日期范圍限制的相關(guān)資料,需要的朋友可以參考下2016-01-01iframe中使用jquery進(jìn)行查找的方法【案例分析】
這篇文章主要介紹了iframe中使用jquery進(jìn)行查找的方法,結(jié)合實(shí)際案例形式較為詳細(xì)的分析了jQuery結(jié)合iframe查找的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06jquery.mobile 共同布局遇到的問題小結(jié)
這篇文章主要介紹了jquery.mobile 共同布局遇到的問題小結(jié),需要的朋友可以參考下2015-02-02基于jQuery實(shí)現(xiàn)點(diǎn)擊同時(shí)更改兩個(gè)iframe的網(wǎng)址
最近寫了兩個(gè)管理后臺(tái)的前端頁面,其中有一個(gè)管理后臺(tái),左側(cè)菜單導(dǎo)航和右側(cè)內(nèi)容頁是兩個(gè)iframe,需求是,點(diǎn)擊上面的主導(dǎo)航時(shí),左側(cè)iframe和右側(cè)iframe調(diào)用不同的鏈接.2010-07-07jQuery插件擴(kuò)展實(shí)例【添加回調(diào)函數(shù)】
這篇文章主要介紹了jQuery插件擴(kuò)展的方法,結(jié)合實(shí)例形式分析了jQuery插件添加回調(diào)函數(shù)與事件觸發(fā)機(jī)制的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11