jQuery國際化插件 jQuery.i18n.properties 【輕量級】

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數組

1、jQuery.i18n.properties API

jQuery.i18n.properties的API只有幾個:瀏覽器

jQuery.i18n.properties()、緩存

jQuery.i18n.prop()、函數

jQuery.i18n.browserLang(),測試

固然也能夠採用$.i18n.properties()、$.i18n.properties()、$.i18n.prop()、$.i18n.browserLang()的形式使用這些API。

一、jQuery.i18n.properties(settings)

該方法加載資源文件,其中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 }

二、jQuery.i18n.prop(key)

該方法以map方式使用資源文件中的值,其中key指的是資源文件中的key。當key指定的值含有佔位符時,可用使用jQuery.i18n.prop(key,val1,val2……)的形式,其中val1,val2……對點位符進行順序替換。

三、jQuery.i18n.browserLang()

用於獲取瀏覽器的語言信息。

 

四、使用的方式

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 有一下一些特色:

  1. 使用 Java 標準的 .properties 文件做爲資源文件,資源文件命名有如下三種格式:
     basename_properties 
     basename_language.properties 
     basename_language_country.properties
  2. 使用 ISO-639 做爲語言編碼標準,ISO-3166 做爲國家名稱編碼標準
  3. 按順序加載默認資源文件和指定語言環境的資源文件,保證默認值始終可用
  4. 未指定語言環境時使用瀏覽器提供的語言
  5. 能夠在資源字符串中使用佔位符(例如:hello= 你好 {0}! 今天是 {1}。)
  6. 資源文件中的 Key 支持命名空間(例如:com.company.msgs.hello = Hello!)
  7. 支持跨行的值
  8. 能夠以 JavaScript 變量(或函數)或 Map 的方式使用資源文件中的 Key

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 插件加載資源文件的步驟以下:

  1. 加載默認資源文件即 strings.properties,成功。
  2. 加載名稱爲 strings_zh.properties 的資源文件,失敗。
  3. 加載名稱爲 stirngs_zh-CN.properties 的資源文件,失敗。

因爲第 2 步和第 3 步都失敗,因此 jQuery.i18n.properties 使用默認資源文件 strings.properties 中的翻譯,也就是英文翻譯。同理,繁體中文也不能正常顯示。解決該問題有 3 種方法:

  1. 採用 strings_zh-CN.properties 的方式命名資源文件。這是最簡單的方法,但這種命名方式和 Java 標準的資源文件命名方式不一致;
  2. 使用默認的資源文件命名方式,並在調用 jQuery.i18n.properties() 方法以前使用 var lang = jQuery.i18n.browserLang()的方式顯式獲取瀏覽器的語言,而後將 lang 中的「-」替換爲」_」,並在使用 jQuery.i18n.properties() 方法時將 lang 做爲參數。
  3. 更改 jQuery.i18n.properties 的源碼。

這裏咱們採用最簡單的第一種方式,將簡體中文對應的資源文件 string_zh_CN.properties 重命名爲 stirngs_zh-CN.properties,並將繁體中文對應的資源文件 strings_zh_TW.properties 重命名爲 strings_zh-TW.properties。如今,程序就能夠根據瀏覽器語言設置自動區分簡體中文和繁體中文了,繁體中文的運行效果如圖 4 所示。

相關文章
相關標籤/搜索