欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解使用jQuery.i18n.properties實(shí)現(xiàn)js國(guó)際化

 更新時(shí)間:2018年05月04日 13:22:00   作者:leox_2010  
這篇文章主要介紹了使用jQuery.i18n.properties實(shí)現(xiàn)js國(guó)際化,具有一定的參考價(jià)值,感興趣的可以隨小編看一看

當(dāng)我們?cè)谧銮芭_(tái)頁(yè)面開(kāi)發(fā)時(shí),由于頁(yè)面內(nèi)容過(guò)多,過(guò)于繁雜,有的時(shí)候一個(gè)頁(yè)面上千行的(當(dāng)然這樣的頁(yè)面也就算一般的),為了減少頁(yè)面的內(nèi)容,我們將頁(yè)面的js文件提取出去,放入一個(gè)特定的js文件中,然后在頁(yè)面中導(dǎo)入進(jìn)來(lái)。這樣做當(dāng)我們需要做應(yīng)用程序的國(guó)際化的時(shí)候,就需要考慮js的國(guó)際化,這里介紹一下使用JQuery.i18n.properties來(lái)實(shí)現(xiàn)js的國(guó)際化。

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

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

那么如何使用jQuery.i18n.properties實(shí)現(xiàn)js國(guó)際化呢?

第一步:創(chuàng)建properties資源文件。

properties資源文件命名規(guī)則為:string_瀏覽器語(yǔ)言簡(jiǎn)碼.properties,例如簡(jiǎn)體中文:string_zh-CN.properties這里需要注意是中劃線(xiàn)而不是下劃線(xiàn),如圖我創(chuàng)建了三個(gè)資源文件

js_en-US.properties(美國(guó)英語(yǔ)),js_ja.properties(日語(yǔ)),js_zh-CN.properties(簡(jiǎn)體中文)。

 

第二步:在js文件中引入jQuery.i18n.properties所需js文件。

因?yàn)閖Query.i18n.properties是依賴(lài)于Jquery框架的,所以需要在你的js文件中引入jQuery.i18n.properties所需js文件。

導(dǎo)入紅色部分的js即可使用jQuery.i18n.properties了。

第三步:使用jQuery.i18n.properties API

<script type="text/javascript">
  $(document).ready(function(){
  //國(guó)際化加載屬性文件
   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后面的值為你定義的資源文件中語(yǔ)言簡(jiǎn)碼前面的字符串,因?yàn)槲业馁Y源文件為js_xxx.properties,所以這個(gè)值就為js

path后面的值為你資源文件的相對(duì)路徑。即相對(duì)于工程結(jié)構(gòu)WebContent下的路徑所在

mode后面的值為加載模式;"vars"表示以JavaScript變量或函數(shù)的形式加載資源文件中的key值(默認(rèn)為這種),“map”表示以map的方式加載資源文件中的key值。“both表示可以同時(shí)使用這兩種方式”。我這里使用的是map。

callback為回調(diào)函數(shù)。

是怎樣根據(jù)不同的語(yǔ)言環(huán)境加載不同的資源文件的呢?其實(shí),jQuery.i18n.properties實(shí)現(xiàn)的原理就是,根據(jù)name后面的值,加上瀏覽器的語(yǔ)言簡(jiǎn)碼,再加上.properties找到對(duì)應(yīng)的資源文件。這個(gè)過(guò)程是自動(dòng)的,只需要進(jìn)行上面的配置即可

propertites中鍵值對(duì)如下:(在properties文件中中文會(huì)自動(dòng)轉(zhuǎn)換成相對(duì)應(yīng)的ASCII值,當(dāng)然這里是可以設(shè)置的,也可以通過(guò)插件進(jìn)行更改的,我這就沒(méi)做了反正這些中文是從頁(yè)面上復(fù)制出來(lái)的,不管了),等號(hào)前的為key,等號(hào)后的為值(注意一點(diǎn)的是,不同的資源文件中key必須保持一致,是自定義的)。

 

這樣資源文件中的內(nèi)容已經(jīng)加載完成了。

第四步:js文件中根據(jù)key找對(duì)應(yīng)的值。

 

紅色部分就是取值的方式,引號(hào)中的字符串對(duì)應(yīng)著上面資源文件中的key值。

需要注意的地方:

此上方法在谷歌和火狐的瀏覽器中實(shí)現(xiàn)完全沒(méi)有問(wèn)題。但在IE瀏覽器中會(huì)出現(xiàn)問(wèn)題,問(wèn)題在使用IE瀏覽器每次獲取到的語(yǔ)言環(huán)境為系統(tǒng)的語(yǔ)言,而不是瀏覽器的語(yǔ)言。

這個(gè)問(wèn)題我也糾結(jié)了很久,網(wǎng)上提供了一些方法來(lái)獲得瀏覽器的語(yǔ)言,但是在IE中卻不起作用,最后我的解決方法是:在使用jQuery.i18n.properties加載資源文件之前,在request頭信息中先獲取瀏覽器的語(yǔ)言,然后設(shè)置。

 

這樣國(guó)際化就到此結(jié)束了。

這是我第一篇博客,以前總是看別人的博客,后面發(fā)現(xiàn)自己遇到的問(wèn)題,雖然解決了,但過(guò)段時(shí)間后發(fā)現(xiàn)自己就忘記了,一致多次遇到同樣的問(wèn)題,后又忘記怎么解決,又是上網(wǎng)找資料。這是我決定寫(xiě)寫(xiě)博客的直接原因。不過(guò)寫(xiě)博客的感覺(jué)確實(shí)還是不錯(cuò)的,可以記錄一下自己的學(xué)習(xí)過(guò)程。希望大伙也可以這樣試試。

以上所述是小編給大家介紹的使用jQuery.i18n.properties實(shí)現(xiàn)js國(guó)際化實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

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

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

    這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)站banner圖片無(wú)縫輪播效果,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合時(shí)間函數(shù)實(shí)現(xiàn)圖片定時(shí)輪播切換相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01
  • 最新評(píng)論