每個 Web 開發者應該知道的 jQuery i18n 知識

2016-12-18    分類：WEB開發、程式設計開發、首頁精華0人評論發表於2016-12-18
WebjQuery

本文由碼農網 – 小峰原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

在設計網站時，一個重要的考慮是國際化。世界上每個地區和國家對於文字、訊息、數字和日期應該如何出現有不同的期望。特定應用程式的每個使用者期望所有文字和訊息以熟悉的格式顯示。JavaScript有一個很好的國際化解決方案稱為jQuery.i18n。jQuery i18n用於MediaWiki和許多其他國際網站的本地化。

JQuery I18n的特性

  • 保持程式碼與i18n內容分離。此功能保持程式碼的模組化，並允許開發人員載入他們需要的i18n功能。
  • 使用JSON格式。
  • 允許不重新整理網頁而更改語言。
  • 處理複數形式不使用附加訊息。規則處理使用Unicode Consortium的通用區域設定資料儲存庫（Common Locale Data Repository，CLDR）完成。
  • 通過傳遞性別值來根據性別更正句子。
  • 支援語法形式。

JQuery I18n目錄

使用jQuery i18n格式化目錄的常規方法是對儲存在此目錄中的每種語言程式碼都有一個JSON檔案的i18n資料夾。Figure 1中顯示了一個示例目錄。

Figure 1.每種語言程式碼的JSON檔案的目錄。

JQuery I18n訊息檔案格式

jQuery i18n使用JSON檔案，這允許使用者以輕量級格式儲存資訊以進行資料交換。 JSON檔案非常有益，因為：

  • 它們允許翻譯人員輕鬆地訪問要翻譯的文字。如果需要傳送JSON檔案用於翻譯服務，這將非常有用。
  • 它們阻止對資料庫的直接訪問。

JSON檔案由一系列名稱-值對或值的有序列表組成。在用於國際化的JSON檔案中，訊息鍵-訊息對包含所有語言對的名稱和值。每個鍵都是小寫字母，使用“ – ”分隔單詞，並與所選語言中的值相關聯。JSON檔案可以包含@metadata，儲存關於檔案的非訊息資訊，例如版權和作者資訊。通常為每種語言型別建立單獨的JSON檔案；然而，所有的翻譯也可以放在一個單一的檔案中。單獨JSON檔案的優點是檔案不那麼複雜。但是，單個JSON檔案有助於確保在嵌入多語言資料時欄位不會重複。下面提供了一個包含單一語言和@metadata的JSON檔案示例：

{
"@metadata": { 
"author": "Colleen", 
"description": "An example JSON file",
"last-updated": "2016-09-21",
"message-documentation": "qqq"
},
"greeting": "Hello",
"bye": "Goodbye"
}

下面提供了一個包含多種語言和@metadata的JSON檔案示例：

{ 
"@metadata": {
"author": "Fred",
"description": "An example JSON file",
"last-updated": "2016-09-21",
"message-documentation": "qqq",
"arrayGroups": {
"label": {
"en": "label_en",
"fr": "label_fr"
}
}
},
"en": {
"greeting": “Hello”,
"bye": "Goodbye"
}
"fr": {
"greeting": “Bonjour”,
"bye": "Au revoir"
} 
 }

用法

jquery.i18n的一些使用方法如下表所示。

使用區域 說明
切換區域設定 可以使用locale選項獲取網頁的區域設定： 
$.i18n( {

   locale: ‘fr’ // Locale is French

} );

在外掛初始化後切換到另一個區域設定：

$.i18n ().locale = ‘ml’;
訊息載入 可以為特定區域設定或多個區域設定載入訊息。 
$.i18n().load( {

} );
資料API 本地化訊息可以不使用JavaScript顯示。 
<li data-i18n=”message-key”></li>
訊息格式 – 佔位符 這些引數在訊息中通過$1，$2，$3表示，語法為{{PLURAL:$1|pluralform1|pluralform2|…}} ，並由執行時替換。
訊息格式 – 複數 在英語中，只有兩個複數形式，但在許多其他語言中，有兩個以上的複數形式。
訊息格式 – 性別 {{GENDER…}}語法使用佔位符的性別，動態更改語法。

翻譯

有幾種方法來翻譯一個jquery.i18n應用程式：

  1. 編輯JSON檔案。這適用於語言數量有限的小型應用程式。
  2. 有一個應用程式的翻譯介面。此選項適用於具有許多翻譯器的專有或專用應用程式。

JQuery.I18n.Properties

jQuery.i18n.properties是一個用於國際化的jQuery外掛。與Java類似，jquery i18n使用資源軟體集（’.properties’檔案）。資源軟體集用於儲存特定於區域的資訊，例如文字訊息。它們允許輕鬆訪問特定於區域的資訊並通過新增額外的資源軟體集來輕鬆新增區域。 ‘.properties’檔案包含特定於區域的鍵-值對，並根據語言和國家/地區程式碼解析這些檔案。

使用Jquery.I18n.Properties

jquery.i18n.properties.js外掛可以從https://github.com/jquery-i18n-properties/jquery-i18n-properties下載。外掛應包含在HTML頁面的<head>部分中。你使用的jquery的版本應如下所示在原始檔中指定。<wbr><wbr><wbr><wbr><wbr>

<HEAD>       
  <script type="text/JavaScript" src="js/jquery-1.10.2.js"></script>        
  <script type="text/JavaScript" src="js/jquery.i18n.properties.js"></script> </
</HEAD>

JQuery.I18n.Properties的特性

  • 像Java i18n一樣工作。使用資源軟體集（’.properties’檔案）進行翻譯。使用ISO-639作為語言程式碼，使用ISO-3166作為國家程式碼。
  • 如果未指定語言，則使用預設瀏覽器語言。始終首先使用資源軟體集中的預設語言。接下來載入使用者指定的語言。
  • 資源軟體集字串允許佔位符替換，並且支援鍵中的名稱空間。

語言控制

為了使程式碼更有效率，減少404錯誤，應使用languages.json檔案。languages.json檔案定義了可以使用的語言和屬性檔案。languages.json應該放置在與語言屬性檔案相同的目錄中。languages.json檔案的示例如下：

{    
  "languages": [
    "en_GB",
    "es_ES",
    "pt_BR",
    "sv_SE"    
  ] 
}

使用JQuery.I18n.Properties的示例

要使用jquery.i18n.properties.js建立HTML頁面，第一步是建立一個目錄，其中包含JavaScript檔案和屬性檔案所需的資料夾。對於這個例子，我們將使用Figure 2中的目錄。

Figure 2.使用屬性檔案的目錄。

接下來，建立HTML程式碼。HTML包含允許使用者選擇語言的下拉選單。下拉選單下面的訊息根據所選語言進行本地化。

<HTML>   
<HEAD>        
  <script src="js/jquery-3.1.0.js" ></script>
  <script type="text/JavaScript" src="js/jquery.i18n.properties.js"></script> 
 </HEAD>   
  <BODY>        
    <h2>Internationalization Example Using jQuery.i18n.properties</h2>
    <div id="langBox">
      Language:            
      <select id="lang">                
        <option value="en" selected>English</option>                
        <option value="tr">Turkish</option>                
        <option value="fr">French</option>            
      </select>        
    </div><br>        
    <div id="lWelcome">Thank you for reading this example</div><br>        
    <div id="lSelLang">Your Selected Language is: en </div>   
</BODY>   
</HTML>

定義.Properties檔案

jquery.i18n.properties.js外掛使用.properties檔案作為翻譯文字。在此示例中使用三個屬性檔案：（1）Messages.properties，（2）Messages_fr.properties以及（3）Messages_tr.properties。每個屬性檔案中的文字如下所示：

Messages.properties 
lWelcome = Thank you for reading this example
lSelLang = Your Selected Language is: {0}     
Messages_fr.properties 
lWelcome = Merci d'avoir lu cet exemple 
lSelLang = Votre langue sélectionnée est : {0}     
Messages_tr.properties 
lWelcome = Bu örnek okumak için teşekkür ederiz 
lSelLang = Sizin Seçili Dil geçerli: {0}

從.Properties載入本地化字串

要從屬性檔案載入訊息，請將jquery.i18n.properties.js檔案儲存在js資料夾中。下面的jquery.i18n.properties.js程式碼是顯示如何載入屬性檔案的簡單示例。

選項

選項 說明 備註
name 表示資源軟體集的檔名或檔名的一部分。 可選字串或String []
language ISO-639語言程式碼（’en’，’fr’）以及可選的ISO-3166國家程式碼（’en_US’，’pt_BR’）。如果未指定，將使用瀏覽器報告的預設語言。 可選字串
path 包含要載入的“.properties”檔案的目錄路徑。 可選字串
mode 將資源軟體集金鑰作為JavaScript vars / 作為對映functions OR使用的選項。 可選字串
cache 軟體集通過瀏覽器快取或強制重新載入。預設為強制重新載入。 可選布林值
encoding 對軟體集編碼的型別。屬性檔案資源軟體集以ISO-8859-1格式指定。預設為UTF-8格式。 可選字串
callback 當指令碼執行完成時呼叫回撥函式。 可選function()

譯文連結：http://www.codeceo.com/article/jquery-u18n-web-dev.html
英文原文：What Every Developer Should Know About JQuery I18n
翻譯作者：碼農網 – 小峰
[ 轉載必須在正文中標註並保留原文連結、譯文連結和譯者等資訊。]

相關文章