每個Web開發者應該知道的jQuery i18n 知識
在設計網站時，一個重要的考慮是國際化。世界上每個地區和國家對于文本、消息、數字和日期應該如何出現有不同的期望。特定應用程序的每個用戶期望所有文本和消息以熟悉的格式顯示。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應用程序：
-
編輯JSON文件。這適用于語言數量有限的小型應用程序。
-
有一個應用程序的翻譯界面。此選項適用于具有許多翻譯器的專有或專用應用程序。
JQuery.I18n.Properties
jQuery.i18n.properties是一個用于國際化的jQuery插件。與Java類似，jquery i18n使用資源軟件集（’.properties’文件）。資源軟件集用于存儲特定于區域的信息，例如文本消息。它們允許輕松訪問特定于區域的信息并通過添加額外的資源軟件集來輕松添加區域。 ‘.properties’文件包含特定于區域的鍵-值對，并根據語言和國家/地區代碼解析這些文件。
使用Jquery.I18n.Properties
jquery.i18n.properties.js插件可以從https://gith
<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
翻譯作者：碼農網 – 小峰
