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

jQuery.i18n.properties是一款輕量級的jQuery國際化插件，能實現Web前端的國際化。

國際化英文單詞為：Internationalization，又稱i18n，“i”為單詞的第一個字母，“18”為“i”和“n”之間單詞的個數，而“n”代表這個單詞的最后一個字母。jQuery.i18n.properties采用.properties文件對JavaScript進行國際化。jQuery.i18n.properties插件首先加載默認的資源文件（strings.properties），然后加載針對特定語言環境的資源文件（strings_zh.properties），這就保證了在未提供某種語言的翻譯時，默認值始終有效。

資源文件命名有以下三種格式：

basename.properties

basename_language.properties

basname_language_country.properties

一、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。

1、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() {
            jQuery.i18n.properties({//加載資瀏覽器語言對應的資源文件
                name : 'strings', //資源文件名稱
                path : '/i18n/', //資源文件路徑
                mode : 'map', //用Map的方式使用資源文件中的值
                language : 'zh',
                callback : function() {//加載成功后設置顯示內容
                    $('.l-btn-text').each(function() {
                        $(this).text($.i18n.prop($(this).text()));
                    });
                }
            });
        }

2、jQuery.i18n.prop(key)

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

3、jQuery.i18n.browserLang()

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

 

4、使用的方式

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>

<div id="content"> 
     <div> 
         <label id="label_username"></label> 
         <input type="text" id="username"></input> 
     </div> 
     <div> 
         <label id="label_password"></label> 
         <input type="password" id="password"></input> 
     </div> 
     <input type="button" id="button_login"/> 
 </div>

<script type="text/javascript">
    $(function(){
        jQuery.i18n.properties({
            name : 'strings', //資源文件名稱
            path : '/i18n/', //資源文件路徑
            mode : 'map', //用Map的方式使用資源文件中的值
            language : 'zh',
            callback : function() {//加載成功后設置顯示內容
                $('#button-login').html($.i18n.prop('Login'));
                $('#label-username').html($.i18n.prop('User Name'));
                $('#label-password').html($.i18n.prop('Password'));
            }
        });
    });
</script>

5、總結及問題改進

總的來說，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 所示。