jQuery.i18n.properties是一款輕量級的jQuery國際化插件,能實現Web前端的國際化。javascript
國際化英文單詞爲:Internationalization,又稱i18n,「i」爲單詞的第一個字母,「18」爲「i」和「n」之間單詞的個數,而「n」表明這個單詞的最後一個字母。jQuery.i18n.properties採用.properties文件對JavaScript進行國際化。jQuery.i18n.properties插件首先加載默認的資源文件(strings.properties),而後加載針對特定語言環境的資源文件(strings_zh.properties),這就保證了在未提供某種語言的翻譯時,默認值始終有效。html
資源文件命名有如下三種格式:前端
basename.propertiesjava
basename_language.propertiesjquery
basname_language_country.properties數組
jQuery.i18n.properties的API只有幾個:瀏覽器
jQuery.i18n.properties()、緩存
jQuery.i18n.prop()、函數
jQuery.i18n.browserLang(),測試
固然也能夠採用$.i18n.properties()、$.i18n.properties()、$.i18n.prop()、$.i18n.browserLang()的形式使用這些API。
該方法加載資源文件,其中settings是配置加載選項的一系列鍵值對。各項配置項的具體描述以下:
選項 | 描述 | 類型 | 可選 |
name | 資源文件的名稱,例如strings或[strings1,strings2],前者表明一個資源文件,後者表明資源文件數組 | string或string[] | 否 |
path | 資源文件所在路徑 | string | 是 |
mode | 加載模式: 「vars」表示以JavaScript變量或函數的形式使用資源文件中的Key 「map」表示以Map的方式使用資源文件中的Key 「both」表示以同時使用兩種方式。若是資源文件中的Key包含JavaScript關鍵字,則只能採用「map」。默認值是「vars」。 |
string | 是 |
language | ISO-639指定的語言編碼(例如「en」表示英文,「zh」表示中文),或者同時使用ISO-639和ISO-3166編碼(例如:「en_US」,「zh_CN」)。若是不指定,則採用瀏覽器報告的語言編碼。 |
string | 是 |
cache | 指定瀏覽器是否對資源文件進行緩存,默認值爲false |
boolean | 是 |
encoding | 加載資源文件時使用的編碼。默認值爲UTF-8 |
string | 是 |
callback | 代碼執行完成時運行的回調函數 |
FOR EXAMPLE :
1 function loadProperties() { 2 jQuery.i18n.properties({//加載資瀏覽器語言對應的資源文件 3 name : 'strings', //資源文件名稱 4 path : '/i18n/', //資源文件路徑 5 mode : 'map', //用Map的方式使用資源文件中的值 6 language : 'zh', 7 callback : function() {//加載成功後設置顯示內容 8 $('.l-btn-text').each(function() { 9 $(this).text($.i18n.prop($(this).text())); 10 }); 11 } 12 }); 13 }
該方法以map方式使用資源文件中的值,其中key指的是資源文件中的key。當key指定的值含有佔位符時,可用使用jQuery.i18n.prop(key,val1,val2……)的形式,其中val1,val2……對點位符進行順序替換。
用於獲取瀏覽器的語言信息。
4.1 項目組織結構
在i18n目錄下,strings.properties對應默認翻譯,strings_zh.properties對應中文翻譯。
4.2 strings.properties 配置文件
User Name=User Name
Password=Password
Login=Login
4.3 strings_zh.properties 配置文件
User Name=用戶名
Password=密碼
Login=登錄
4.4 FOR EXAMPLE 例子
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/js/jquery.i18n.properties-1.0.9.js"></script>
1 <div id="content"> 2 <div> 3 <label id="label_username"></label> 4 <input type="text" id="username"></input> 5 </div> 6 <div> 7 <label id="label_password"></label> 8 <input type="password" id="password"></input> 9 </div> 10 <input type="button" id="button_login"/> 11 </div>
1 <script type="text/javascript"> 2 $(function(){ 3 jQuery.i18n.properties({ 4 name : 'strings', //資源文件名稱 5 path : '/i18n/', //資源文件路徑 6 mode : 'map', //用Map的方式使用資源文件中的值 7 language : 'zh', 8 callback : function() {//加載成功後設置顯示內容 9 $('#button-login').html($.i18n.prop('Login')); 10 $('#label-username').html($.i18n.prop('User Name')); 11 $('#label-password').html($.i18n.prop('Password')); 12 } 13 }); 14 }); 15 </script>
總的來講,jQuery.i18n.properties 有一下一些特色:
5.1 特色
總的來講,jQuery.i18n.properties 有一下一些特色:
basename_properties basename_language.properties basename_language_country.properties
5.2 資源文件命名
在上面的示例中,咱們的程序只自動識別中文和英文兩種翻譯,而不能進一步區分簡體中文與繁體中文。爲了使上面的示例可以根據瀏覽器語言設置自動區分簡體中文和繁體中文,咱們將簡體中文對應的資源文件 strings_zh.properties 重命名爲 strings_zh_CN.properties,並添加繁體中文資源文件 strings_zh_TW.properties。
運行程序,分別將瀏覽器語言設置爲「中文(簡體中文)」和「中文(繁體中文)」進行測試,發現程序並不能如咱們預期顯示簡體中文和繁體中文,而是都以英文顯示。分析後發現,形成這種現象的緣由,是 jQuery.i18n.properties 插件默認的資源文件命名方式與瀏覽器上報的語言區域編碼不一致,從而致使插件加載資源文件失敗。以簡體中文爲例,jQuery.i18n.properties 默認的資源文件命名方式爲「zh_CN」的形式,而瀏覽器上報的語言區域編碼爲 zh-CN」的形式,此時 jQuery.i18n.properties 插件加載資源文件的步驟以下:
因爲第 2 步和第 3 步都失敗,因此 jQuery.i18n.properties 使用默認資源文件 strings.properties 中的翻譯,也就是英文翻譯。同理,繁體中文也不能正常顯示。解決該問題有 3 種方法:
的方式
顯式獲取瀏覽器的語言,而後將 lang 中的「-」替換爲」_」,並在使用 jQuery.i18n.properties() 方法時將 lang 做爲參數。這裏咱們採用最簡單的第一種方式,將簡體中文對應的資源文件 string_zh_CN.properties 重命名爲 stirngs_zh-CN.properties,並將繁體中文對應的資源文件 strings_zh_TW.properties 重命名爲 strings_zh-TW.properties。如今,程序就能夠根據瀏覽器語言設置自動區分簡體中文和繁體中文了,繁體中文的運行效果如圖 4 所示。