微軟發(fā)布最新jQuery國際化插件 實例用法解析
近日微軟發(fā)布了一款新的jQuery國際化插件，該插件涵蓋了超過350種文化的國際化信息，你可以在JavaScript程序中引用這個插件添加國際化功能。同時可以在Github代碼庫下載插件的原型版本：http://github.com/nje/jquery-glob。
更多jQuery內(nèi)容，歡迎訪問： jQuery從入門到精通
理解國際化
jQuery國際化插件可以讓你在JavaScript代碼中輕松地處理不同文化之間的數(shù)字、貨幣和日期格式。例如，你可以使用這個插件正確地顯示一個國家的貨幣符號：
你也可以用這個插件編排日期格式，這樣日期和月份會以正確的順序顯示，而日期和月份的名稱也能夠得到正確的翻譯：
請注意上圖阿拉伯的日期格式中，年份顯示成了1431。這是因為年份已經(jīng)按照回歷的方式轉換過了。
一些文化差異比較明顯，例如使用不同的貨幣或者不同的月份名稱等。但另外一些差異卻細微而又出人意料。例如，在有一些文化里，數(shù)字不是以均衡的方式分組的。在語言標記為“te-IN”的文化中（印度東部的泰盧固語），數(shù)字先按3位數(shù)字分組，然后再每2位數(shù)字分組。因此象數(shù)字一百萬（1000000）就會被寫成“10,00,000”。而有些文化就根本不對數(shù)字進行分組。所有這些細微的差異都能夠被jQuery國際化插件自動處理。
要得到正確的日期可能非常需要技巧。不同的文化采用不同的歷法，比如公歷和回歷。同一種文化也可能會采用多個歷法，比如日本就同時采用公歷和以天皇年號推算的紀年歷。插件提供了函數(shù)將日期在所有這些歷法中相互轉換。
使用語言標記
jQuery國際化插件依據(jù)RFC 4646和RFC 5646標準里定義的語言標記來識別文化，語言標記通常由連字符將多個輔標簽組合而成，比如：
| en-AU | 英文（澳大利亞） |
| en-BZ | 英文（伯利茲） |
| en-CA | 英文（加拿大） |
| Id | 印度尼西亞文 |
| zh-CHS | 中文（簡體） |
| Zu | 祖魯文 |
請注意單一語言例如英語可以同時有多個語言標記。同是英語國家，加拿大采用的數(shù)字、貨幣和日期格式就不同于澳大利亞或者美國。你可以使用下面的語言輔標簽查找工具來獲取某個文化的語言標記：http://rishida.net/utils/subtags/。
jQuery國際化插件里一個叫做globinfo的文件夾包含了這350種文化的信息。實際上，這個文件夾里有700多個文件，因為它包括了每個文件的最小化（minify）和原始版本。比如說，在globinfo文件夾，文件jQuery.glob.en-AU.js對應英文（澳大利亞），jQuery.glob.id.js對應印度尼西亞文，而jQuery.glob.zh-CHS對應簡體中文。
#p#
示例：指定某種文化
假如你要創(chuàng)建一個德文的網(wǎng)站，并且希望在客戶端的JavaScript腳本里使用德語習慣顯示所有的日期、貨幣符號和數(shù)字。那頁面的源代碼也許與下面的HTML類似：
注意上面的span標簽，它們標識了所有需要用國際化插件進行格式化的區(qū)域：商品的價格、上架的日期以及庫存量。要在網(wǎng)頁里使用jQuery國際化插件，需要添加三個JavaScript文件：jQuery庫，jQuery國際化插件和指定的文化習慣信息：
在上例中，我將包含了德語文化習慣的jQuery.glob.de-DE.js文件靜態(tài)地加入到網(wǎng)頁中，”de-DE”是語言標記，表示在德國使用的德語。既然已經(jīng)引入了必要的腳本文件，就可以使用下面的客戶端JavaScript代碼調用插件來顯示價格、上架的日期以及庫存量等值：
jQuery國際化插件為jQuery函數(shù)庫添加了一些新的函數(shù)—包括preferCulture()和format()等新函數(shù)。你可以通過preferCulture()函數(shù)設置插件其他函數(shù)調用時使用的默認文化。preferCulture()函數(shù)接受一個語言標記作為參數(shù)，這個函數(shù)會使用最接近這個語言標記的文化。
$.format()函數(shù)才是真正用來編排貨幣、日期和數(shù)字格式的。$.format()函數(shù)的第二個參數(shù)是格式分類符。例如，傳入“c”表示按貨幣的樣式編排參數(shù)值。在githum的ReadMe文件里詳細描述了所有格式分類符代表的意思：http://github.com/nje/jquery-glob。
當我們在瀏覽器打開這個頁面的時候，所有的東西都是按照德語習慣正確顯示。貨幣符號采用的是歐元符號，日期采用德語的日期和月份名稱，并且，數(shù)字分隔符用的是點號（.），而不是逗號（,）。
你可以通過運行示例下載中的3_GermanSite.htm文件來了解上述方法。
#p#
示例：用戶動態(tài)選擇一個區(qū)域設置
在前面的例子中，我們顯式指定使用德語文化習慣（通過引用jQuery.glob.de-DE.js文件）。我們現(xiàn)在來看看動態(tài)設置文化習慣的幾個例子。比如說我們打算在頁面上加一個包含所有350種文化的下拉框，當用戶在下拉框里選擇了一個文化，頁面上所有的日期都按照這個文化的習慣顯示。
這是網(wǎng)頁的HTML源代碼：
請留意所有包含了日期的<span>標簽都有一個data-date屬性（data-*屬性是HTML 5里的新功能，同時在老的瀏覽器上也可以使用）。當用戶在下拉框里選擇了一個文化信息后，我們的代碼將會格式化data-date屬性里保存的日期。為了顯示所有可能的文化信息，我們要象下面這樣添加一個叫jQuery.glob.all.js 的文件。
jQuery國際化插件里有一個叫做jQuery.glob.all.js的文件，這個文件包含了所有插件支持的350多種文化的國際化信息。即使經(jīng)過最小化處理，還是有367k字節(jié)。由于文件很大，除非你的確需要一次性使用所有這些文化信息，我們建議你只添加所使用到的文化信息對應的JavaScript文件。下一個例子中，我會演示如何在網(wǎng)頁中動態(tài)地加載某個語言對應的JavaScript文件。
下一步，把所有支持的文化名稱添加到下拉框的列表里。可以用$.cultures這個屬性獲取它們：
最后，再寫幾行代碼把每個span標簽里的data-date屬性的日期都抓出來并編排格式：
jQuery國際化插件里面的parseDate()函數(shù)將一個字符串的日期轉換成JavaScript日期，而format()函數(shù)則用來編排這些日期的格式。“D”這個格式分類符說明使用長日期格式編排日期。現(xiàn)在，只要頁面瀏覽者選擇這350種語言其中之一，內(nèi)容都會被正確的國際化。你可以通過運行示例下載中的4_SelectCulture.htm文件來了解上述方法。
#p#
示例：動態(tài)加載國際化文件
在上一節(jié)說過,你應該盡量避免在頁面中引用jQuery.glob.all.js文件, 因為它實在是太大了。相反，你可以動態(tài)地加載你所需要的國際化信息。比如說，你要創(chuàng)建一個下拉列表顯示下面這些語言：
下面的代碼會在用戶從下拉框中選擇一個新的語言后執(zhí)行。這段代碼會先判斷選中的語言對應的國際化腳本文件是否已經(jīng)加載了。如果還沒有加載，則使用jQuery的$.getScript()函數(shù)動態(tài)加載國際化腳本文件。
當國際化腳本文件被瀏覽器加載以后，就會調用globalizePage()函數(shù)，繼而執(zhí)行客戶端的代碼完成國際化。這個方法的優(yōu)點是可以讓你避免加載整個jQuery.glob.all.js文件—只要加載使用到的文件，而且只加載一次。示例下載中的5_Dynamic.htm文件演示了這個方法。
示例：自動檢測用戶的常用語言設置
大多數(shù)網(wǎng)站通過檢測用戶的瀏覽器設置來得到其常用語言，然后根據(jù)這種語言文化習慣來國際化網(wǎng)站內(nèi)容。用戶可以在瀏覽器中設置一個常用語言。這樣，用戶在請求頁面時，常用語言設置會包含在請求Http消息頭的Accept-Language字段中。如果使用的是微軟的IE瀏覽器，可以通過以下步驟設置你常用的語言：
1. 在菜單欄里選擇工具，Internet 選項。
2. 選擇常規(guī)標簽。
3. 在外觀里點擊語言按鈕。
4. 點擊添加在語言列表里增加新的語言。
5. 然后把你最常用的語言放在列表的最頂端。
你可以在這個對話框中設置多門常用語言。所設置語言的順序關系將會體現(xiàn)在HTTP請求的Accept-Language字段中，如：
- Accept-Language：fr-FR,id-ID;q=0.7,en-US;q=0.3
比較奇怪的是，用戶不能夠通過客戶端的JavaScript腳本得到Accept-Language的內(nèi)容。微軟的IE和Firefox瀏覽器都支持一系列語言相關的屬性，這些屬性可以通過Window.navigator進行訪問，例如windows.navigator.browserLanguage和window.navigator.language，不過這些屬性中的語言一般指的是操作系統(tǒng)中設置的語言或者是瀏覽器的語言版本。你不能通過這些屬性來得到用戶設置的常用語言。
得到用戶語言偏好（也就是Accept-Language字段中的內(nèi)容）的唯一可靠方法就是編寫服務器代碼。例如，下面的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()方法就會回滾到使用默認文化（英語）。
#p#
示例：利用國際化插件使JQuery UI DatePicker實現(xiàn)國際化
國際化插件的目的之一就是使開發(fā)能適應各種不同文化的jQuery小工具的變得更為簡單。我們希望確保jQuery國際化插件能夠與現(xiàn)有的jQuery的UI插件如DatePicker共存并正常工作。為了實現(xiàn)這個目標，我們創(chuàng)建了DatePicker插件的一個整合版本，使它可以在渲染日歷的時候利用我們的插件來提供國際化支持。下圖演示了把jQuery國際化插件和整合后的DatePicker插件一起加入到頁面并選擇印度尼西亞語的效果。
注意：一周中每一天的名稱都以印度尼西亞語的縮寫形式顯示。 此外，月份的名字也以印度尼西亞語顯示。你可以從我們的github網(wǎng)站下載整合版的JQuery UI DatePicker。你也可以使用示例下載中文件7_DatePicker.htm所使用的版本。
原文地址：http://weblogs.asp.net/scottgu/archive/2010/06/10/jquery-globalization-plugin-from-microsoft.aspx
原文名：jQuery Globalization Plugin from Microsoft
【編輯推薦】
