jQuery國際化插件 實例用法解析

理解國際化

jQuery國際化插件可讓你在JavaScript代碼中輕鬆地處理不一樣文化之間的數字、貨幣和日期格式。例如，你可使用這個插件正確地顯示一個國家的貨幣符號：

你也能夠用這個插件編排日期格式，這樣日期和月份會以正確的順序顯示，而日期和月份的名稱也可以獲得正確的翻譯：

請注意上圖阿拉伯的日期格式中，年份顯示成了1431。這是由於年份已經按照回曆的方式轉換過了。

一些文化差別比較明顯，例如使用不一樣的貨幣或者不一樣的月份名稱等。但另一些差別卻細微而又出人意料。例如，在有一些文化裏，數字不是以均衡的方式分組的。在語言標記爲「te-IN」的文化中（印度東部的泰盧固語），數字先按3位數字分組，而後再每2位數字分組。所以象數字一百萬（1000000）就會被寫成「10,00,000」。而有些文化就根本不對數字進行分組。全部這些細微的差別都可以被jQuery國際化插件自動處理。

要獲得正確的日期可能很是須要技巧。不一樣的文化採用不一樣的歷法，好比公曆和回曆。同一種文化也可能會採用多個曆法，好比日本就同時採用公曆和以天皇年號推算的紀年曆。插件提供了函數將日期在全部這些曆法中相互轉換。

使用語言標記

jQuery國際化插件依據RFC 4646和RFC 5646標準裏定義的語言標記來識別文化，語言標記一般由連字符將多個輔標籤組合而成，好比：

en-AU	英文（澳大利亞）
en-BZ	英文（伯利茲）
en-CA	英文（加拿大）
Id	印度尼西亞文
zh-CHS	中文（簡體）
Zu	祖魯文

請注意單一語言例如英語能夠同時有多個語言標記。同是英語國家，加拿大采用的數字、貨幣和日期格式就不一樣於澳大利亞或者美國。你可使用下面的語言輔標籤查找工具來獲取某個文化的語言標記：http://rishida.net/utils/subtags/。

jQuery國際化插件裏一個叫作globinfo的文件夾包含了這350種文化的信息。實際上，這個文件夾裏有700多個文件，由於它包括了每一個文件的最小化（minify）和原始版本。好比說，在globinfo文件夾，文件jQuery.glob.en-AU.js對應英文（澳大利亞），jQuery.glob.id.js對應印度尼西亞文，而jQuery.glob.zh-CHS對應簡體中文。

假如你要建立一個德文的網站，而且但願在客戶端的JavaScript腳本里使用德語習慣顯示全部的日期、貨幣符號和數字。那頁面的源代碼也許與下面的HTML相似：

注意上面的span標籤，它們標識了全部須要用國際化插件進行格式化的區域：商品的價格、上架的日期以及庫存量。要在網頁裏使用jQuery國際化插件，須要添加三個JavaScript文件：jQuery庫，jQuery國際化插件和指定的文化習慣信息：

在上例中，我將包含了德語文化習慣的jQuery.glob.de-DE.js文件靜態地加入到網頁中，」de-DE」是語言標記，表示在德國使用的德語。既然已經引入了必要的腳本文件，就可使用下面的客戶端JavaScript代碼調用插件來顯示價格、上架的日期以及庫存量等值：

jQuery國際化插件爲jQuery函數庫添加了一些新的函數—包括preferCulture()和format()等新函數。你能夠經過preferCulture()函數設置插件其餘函數調用時使用的默認文化。preferCulture()函數接受一個語言標記做爲參數，這個函數會使用最接近這個語言標記的文化。

$.format()函數纔是真正用來編排貨幣、日期和數字格式的。$.format()函數的第二個參數是格式分類符。例如，傳入「c」表示按貨幣的樣式編排參數值。在githum的ReadMe文件裏詳細描述了全部格式分類符表明的意思：http://github.com/nje/jquery-glob。

當咱們在瀏覽器打開這個頁面的時候，全部的東西都是按照德語習慣正確顯示。貨幣符號採用的是歐元符號，日期採用德語的日期和月份名稱，而且，數字分隔符用的是點號（.），而不是逗號（,）。

你能夠經過運行示例下載中的3_GermanSite.htm文件來了解上述方法。

示例：用戶動態選擇一個區域設置

在前面的例子中，咱們顯式指定使用德語文化習慣（經過引用jQuery.glob.de-DE.js文件）。咱們如今來看看動態設置文化習慣的幾個例子。好比說咱們打算在頁面上加一個包含全部350種文化的下拉框，當用戶在下拉框裏選擇了一個文化，頁面上全部的日期都按照這個文化的習慣顯示。

這是網頁的HTML源代碼：

請留意全部包含了日期的<span>標籤都有一個data-date屬性（data-*屬性是HTML 5裏的新功能，同時在老的瀏覽器上也可使用）。當用戶在下拉框裏選擇了一個文化信息後，咱們的代碼將會格式化data-date屬性裏保存的日期。爲了顯示全部可能的文化信息，咱們要象下面這樣添加一個叫jQuery.glob.all.js 的文件。

jQuery國際化插件裏有一個叫作jQuery.glob.all.js的文件，這個文件包含了全部插件支持的350多種文化的國際化信息。即便通過最小化處理，仍是有367k字節。因爲文件很大，除非你的確須要一次性使用全部這些文化信息，咱們建議你只添加所使用到的文化信息對應的JavaScript文件。下一個例子中，我會演示如何在網頁中動態地加載某個語言對應的JavaScript文件。

下一步，把全部支持的文化名稱添加到下拉框的列表裏。能夠用$.cultures這個屬性獲取它們：

最後，再寫幾行代碼把每一個span標籤裏的data-date屬性的日期都抓出來並編排格式：

jQuery國際化插件裏面的parseDate()函數將一個字符串的日期轉換成JavaScript日期，而format()函數則用來編排這些日期的格式。「D」這個格式分類符說明使用長日期格式編排日期。如今，只要頁面瀏覽者選擇這350種語言其中之一，內容都會被正確的國際化。你能夠經過運行示例下載中的4_SelectCulture.htm文件來了解上述方法。

示例：動態加載國際化文件

在上一節說過,你應該儘可能避免在頁面中引用jQuery.glob.all.js文件, 由於它實在是太大了。相反，你能夠動態地加載你所須要的國際化信息。好比說，你要建立一個下拉列表顯示下面這些語言：

下面的代碼會在用戶從下拉框中選擇一個新的語言後執行。這段代碼會先判斷選中的語言對應的國際化腳本文件是否已經加載了。若是尚未加載，則使用jQuery的$.getScript()函數動態加載國際化腳本文件。

當國際化腳本文件被瀏覽器加載之後，就會調用globalizePage()函數，繼而執行客戶端的代碼完成國際化。這個方法的優勢是可讓你避免加載整個jQuery.glob.all.js文件—只要加載使用到的文件，並且只加載一次。示例下載中的5_Dynamic.htm文件演示了這個方法。

示例：自動檢測用戶的經常使用語言設置

大多數網站經過檢測用戶的瀏覽器設置來獲得其經常使用語言，而後根據這種語言文化習慣來國際化網站內容。用戶能夠在瀏覽器中設置一個經常使用語言。這樣，用戶在請求頁面時，經常使用語言設置會包含在請求Http消息頭的Accept-Language字段中。若是使用的是微軟的IE瀏覽器，能夠經過如下步驟設置你經常使用的語言：

1. 在菜單欄裏選擇工具，Internet 選項。

2. 選擇常規標籤。

3. 在外觀裏點擊語言按鈕。

4. 點擊添加在語言列表裏增長新的語言。

5. 而後把你最經常使用的語言放在列表的最頂端。

你能夠在這個對話框中設置多門經常使用語言。所設置語言的順序關係將會體如今HTTP請求的Accept-Language字段中，如：

 
 
 
  
 Accept-Language：fr-FR,id-ID;q=0.7,en-US;q=0.3  
 
 
  
   
 

 

比較奇怪的是，用戶不可以經過客戶端的JavaScript腳本獲得Accept-Language的內容。微軟的IE和Firefox瀏覽器都支持一系列語言相關的屬性，這些屬性能夠經過Window.navigator進行訪問，例如windows.navigator.browserLanguage和window.navigator.language，不過這些屬性中的語言通常指的是操做系統中設置的語言或者是瀏覽器的語言版本。你不能經過這些屬性來獲得用戶設置的經常使用語言。

獲得用戶語言偏好（也就是Accept-Language字段中的內容）的惟一可靠方法就是編寫服務器代碼。例如，下面的ASP.NET頁面就利用了服務器的Request.UserLanguages屬性把用戶的語言偏好設置賦給了客戶端JavaScript的acceptLanguage變量（而後就能夠經過客戶端JavaScipt訪問這些值了）：

爲了使這段代碼可以正常工做，頁面中必須包含與acceptLanguage對應的文化信息。例如若是你的經常使用語言是fr-FR（法語-法國），那就必須在這個頁面中引用jQuery.glob.fr-FR.js或者jQuery.glob.all.js這兩個JavaScript腳本之一，不然沒辦法獲得文化信息。關於這個方法的應用能夠示例下載中的」6_AcceptLanguages.aspx」。

若是對於頁面中用戶的經常使用語言沒有對應的腳本包含其文化信息，那麼$.preferCulture()方法就會引用中立（neutral）的文化信息（例如，使用jQuery.glob.fr.js，而不是jQuery.glob.fr-FR.js）。若是中立文化信息也不可用，那麼$.preferCulture()方法就會回滾到使用默認文化（英語）。

示例：利用國際化插件使JQuery UI DatePicker實現國際化

國際化插件的目的之一就是使開發能適應各類不一樣文化的jQuery小工具的變得更爲簡單。咱們但願確保jQuery國際化插件可以與現有的jQuery的UI插件如DatePicker共存並正常工做。爲了實現這個目標，咱們建立了DatePicker插件的一個整合版本，使它能夠在渲染日曆的時候利用咱們的插件來提供國際化支持。下圖演示了把jQuery國際化插件和整合後的DatePicker插件一塊兒加入到頁面並選擇印度尼西亞語的效果。

注意：一週中每一天的名稱都以印度尼西亞語的縮寫形式顯示。 此外，月份的名字也以印度尼西亞語顯示。你能夠從咱們的github網站下載整合版的JQuery UI DatePicker。你也可使用示例下載中文件7_DatePicker.htm所使用的版本。

原文名：jQuery Globalization Plugin from Microsoft