詳解使用jQuery.i18n.properties實現(xiàn)js國際化
當(dāng)我們在做前臺頁面開發(fā)時,由于頁面內(nèi)容過多,過于繁雜,有的時候一個頁面上千行的(當(dāng)然這樣的頁面也就算一般的),為了減少頁面的內(nèi)容,我們將頁面的js文件提取出去,放入一個特定的js文件中,然后在頁面中導(dǎo)入進(jìn)來。這樣做當(dāng)我們需要做應(yīng)用程序的國際化的時候,就需要考慮js的國際化,這里介紹一下使用JQuery.i18n.properties來實現(xiàn)js的國際化。
PS:jQuery.i18n.properties 是一款輕量級的 jQuery 國際化插件。與 Java 里的資源文件類似,jQuery.i18n.properties 采用 .properties 文件對 JavaScript 進(jìn)行國際化。jQuery.i18n.properties 插件根據(jù)用戶指定的(或瀏覽器提供的 )語言和國家編碼(符合 ISO-639 和 ISO-3166 標(biāo)準(zhǔn))來解析對應(yīng)的以“.properties”為后綴的資源文件。
利用資源文件實現(xiàn)國際化是一種比較流行的方式,例如 Android 應(yīng)用就可以采用以語言和國家編碼命名的資源文件來實現(xiàn)國際化。jQuery.i18n.properties 插件中的資源文件以“.properties”為后綴,包含了區(qū)域相關(guān)的鍵值對。我們知道,Java 程序也可以使用以 .properties 為后綴的資源文件來實現(xiàn)國際化,因此,當(dāng)我們要在 Java 程序和前端 JavaScript 程序中共享資源文件時,這種方式就顯得特別有用。jQuery.i18n.properties 插件首先加載默認(rèn)的資源文件(例如:strings.properties),然后加載針對特定語言環(huán)境的資源文件(例如:strings_zh.properties),這就保證了在未提供某種語言的翻譯時,默認(rèn)值始終有效。開發(fā)人員可以以 JavaScript 變量(或函數(shù))或 Map 的方式使用資源文件中的 key。
那么如何使用jQuery.i18n.properties實現(xiàn)js國際化呢?
第一步:創(chuàng)建properties資源文件。
properties資源文件命名規(guī)則為:string_瀏覽器語言簡碼.properties,例如簡體中文:string_zh-CN.properties這里需要注意是中劃線而不是下劃線,如圖我創(chuàng)建了三個資源文件
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文件。
導(dǎo)入紅色部分的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() {// 加載成功后設(shè)置顯示內(nèi)容 //alert(jQuery.i18n.prop("theme_manage.js_activity")); } }); }); </script>
其中:name后面的值為你定義的資源文件中語言簡碼前面的字符串,因為我的資源文件為js_xxx.properties,所以這個值就為js
path后面的值為你資源文件的相對路徑。即相對于工程結(jié)構(gòu)WebContent下的路徑所在
mode后面的值為加載模式;"vars"表示以JavaScript變量或函數(shù)的形式加載資源文件中的key值(默認(rèn)為這種),“map”表示以map的方式加載資源文件中的key值。“both表示可以同時使用這兩種方式”。我這里使用的是map。
callback為回調(diào)函數(shù)。
是怎樣根據(jù)不同的語言環(huán)境加載不同的資源文件的呢?其實,jQuery.i18n.properties實現(xiàn)的原理就是,根據(jù)name后面的值,加上瀏覽器的語言簡碼,再加上.properties找到對應(yīng)的資源文件。這個過程是自動的,只需要進(jìn)行上面的配置即可。
propertites中鍵值對如下:(在properties文件中中文會自動轉(zhuǎn)換成相對應(yīng)的ASCII值,當(dāng)然這里是可以設(shè)置的,也可以通過插件進(jìn)行更改的,我這就沒做了反正這些中文是從頁面上復(fù)制出來的,不管了),等號前的為key,等號后的為值(注意一點的是,不同的資源文件中key必須保持一致,是自定義的)。
這樣資源文件中的內(nèi)容已經(jīng)加載完成了。
第四步:js文件中根據(jù)key找對應(yīng)的值。
紅色部分就是取值的方式,引號中的字符串對應(yīng)著上面資源文件中的key值。
需要注意的地方:
此上方法在谷歌和火狐的瀏覽器中實現(xiàn)完全沒有問題。但在IE瀏覽器中會出現(xiàn)問題,問題在使用IE瀏覽器每次獲取到的語言環(huán)境為系統(tǒng)的語言,而不是瀏覽器的語言。
這個問題我也糾結(jié)了很久,網(wǎng)上提供了一些方法來獲得瀏覽器的語言,但是在IE中卻不起作用,最后我的解決方法是:在使用jQuery.i18n.properties加載資源文件之前,在request頭信息中先獲取瀏覽器的語言,然后設(shè)置。
這樣國際化就到此結(jié)束了。
這是我第一篇博客,以前總是看別人的博客,后面發(fā)現(xiàn)自己遇到的問題,雖然解決了,但過段時間后發(fā)現(xiàn)自己就忘記了,一致多次遇到同樣的問題,后又忘記怎么解決,又是上網(wǎng)找資料。這是我決定寫寫博客的直接原因。不過寫博客的感覺確實還是不錯的,可以記錄一下自己的學(xué)習(xí)過程。希望大伙也可以這樣試試。
以上所述是小編給大家介紹的使用jQuery.i18n.properties實現(xiàn)js國際化實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- 詳解使用jquery.i18n.properties 實現(xiàn)web前端國際化
- 基于jQuery.i18n實現(xiàn)web前端的國際化
- java讀取properties配置文件的方法
- Java遍歷Properties所有元素的方法實例
- java獲取properties屬性文件示例
- Java讀取properties配置文件時,出現(xiàn)中文亂碼的解決方法
- 詳解五種方式讓你在java中讀取properties文件內(nèi)容不再是難題
- Java中Properties的使用詳解
- java遍歷properties文件操作指南
- ajax讀取properties資源文件數(shù)據(jù)的方法
- Java中的幾種讀取properties配置文件的方式
相關(guān)文章
jQuery中[attribute^=value]選擇器用法實例
這篇文章主要介紹了jQuery中[attribute^=value]選擇器用法,實例分析了[attribute^=value]選擇器的功能、定義及匹配以某些值開始的元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12jQuery實現(xiàn)圖片與文字描述左右滑動自動切換的方法
這篇文章主要介紹了jQuery實現(xiàn)圖片與文字描述左右滑動自動切換的方法,涉及jquery實現(xiàn)圖文滑動切換效果的方法,涉及jquery針對頁面元素與樣式的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07jquery根據(jù)一個值來選中select下的option實例代碼
下面小編就為大家?guī)硪黄猨query根據(jù)一個值來選中select下的option實例代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08

jQuery實現(xiàn)的網(wǎng)站banner圖片無縫輪播效果完整實例