jQuery.i18n.properties實現js國際化

當我們在做前臺頁面開發時,由於頁面內容過多,過於繁雜,有的時候一個頁面上千行的(當然這樣的頁面也就算一般的),爲了減少頁面的內容,我們將頁面的js文件提取出去,放入一個特定的js文件中,然後在頁面中導入進來。這樣做當我們需要做應用程序的國際化的時候,就需要考慮js的國際化,這裏介紹一下使用JQuery.i18n.properties來實現js的國際化。

PS: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。

那麼如何使用jQuery.i18n.properties實現js國際化呢?

第一步:創建properties資源文件。

properties資源文件命名規則爲:string_瀏覽器語言簡碼.properties,例如簡體中文:string_zh-CN.properties這裏需要注意是中劃線而不是下劃線,如圖我創建了三個資源文件

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文件。



導入紅色部分的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() {// 加載成功後設置顯示內容

                               //alert(jQuery.i18n.prop("theme_manage.js_activity"));

                           }

                       });

        });

</script>

其中:name後面的值爲你定義的資源文件中語言簡碼前面的字符串,因爲我的資源文件爲js_xxx.properties,所以這個值就爲js

     path後面的值爲你資源文件的相對路徑。即相對於工程結構WebContent下的路徑所在



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

callback爲回調函數。

是怎樣根據不同的語言環境加載不同的資源文件的呢?其實,jQuery.i18n.properties實現的原理就是,根據name後面的值,加上瀏覽器的語言簡碼,再加上.properties找到對應的資源文件。這個過程是自動的,只需要進行上面的配置即可。

propertites中鍵值對如下:(在properties文件中中文會自動轉換成相對應的ASCII值,當然這裏是可以設置的,也可以通過插件進行更改的,我這就沒做了反正這些中文是從頁面上覆製出來的,不管了),等號前的爲key,等號後的爲值(注意一點的是,不同的資源文件中key必須保持一致,是自定義的)。

 


這樣資源文件中的內容已經加載完成了。

第四步:js文件中根據key找對應的值。

 

紅色部分就是取值的方式,引號中的字符串對應着上面資源文件中的key值。

需要注意的地方:

此上方法在谷歌和火狐的瀏覽器中實現完全沒有問題。但在IE瀏覽器中會出現問題,問題在使用IE瀏覽器每次獲取到的語言環境爲系統的語言,而不是瀏覽器的語言。

這個問題我也糾結了很久,網上提供了一些方法來獲得瀏覽器的語言,但是在IE中卻不起作用,最後我的解決方法是:在使用jQuery.i18n.properties加載資源文件之前,在request頭信息中先獲取瀏覽器的語言,然後設置。

 

這樣國際化就到此結束了。

這是我第一篇博客,以前總是看別人的博客,後面發現自己遇到的問題,雖然解決了,但過段時間後發現自己就忘記了,一致多次遇到同樣的問題,後又忘記怎麼解決,又是上網找資料。這是我決定寫寫博客的直接原因。不過寫博客的感覺確實還是不錯的,可以記錄一下自己的學習過程。希望大夥也可以這樣試試。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章