使用 JQuery Globalization 函数库开发全球化网页应用程序（2）
|
- UID
- 1066743
|
使用 JQuery Globalization 函数库开发全球化网页应用程序（2）
全球化需求的编码实现 在本节中，我们将就前文中讨论的两个重要的全球化需求撰写两段编码实现。其一实现如何依照用户需求提供适宜的接口语言。其二则是对不同的数据提供该语言下合适的表现格式。
示例一 JQuery 信息模块以下的示例说明了如何使用 JQuery globalization 的信息模块，以及如何使用该模块加载 Json 格式的文件以实现接口语言的本地化。
程序代码如清单 2 所示，它可以读取信息文件(messages.json)，依照程序中指定的语系（locale）打印出该语言下的讯息内容。( 清单 2 为节录的程序代码， )
清单 2. 示例程序源代码1
2
3
4
5
6
7
8
9
10
11
12
13
| <script>
function initMessages(){
$.when(
$.get( "/messages.json" )，
$.get( "/cldr/supplemental/likelySubtags.json" )
).done(function(messages， likelySubtags) {
// Load all the required CLDR data
Globalize.load(likelySubtags[0]);
Globalize.loadMessages(messages[0]);
$('#enHello')[0].value = Globalize("en").messageFormatter( "greetings/hello" )("World");
$('#ptHello')[0].value = Globalize("pt").messageFormatter( "greetings/hello" )("World");
});
}
|
信息文件如清单 3 所示，它是一个 json 的文本文件,最外层是语言,后面可以放分类(＂greetings＂, "hello")，读取时用分类的阶层可以存取信息 (greetings/hello)，函数库会依照指定的语言传回该语言的翻译内容。
清单 3. 示例程序的信息文件(messages.json)与格式1
2
3
4
5
6
7
8
9
10
11
12
13
14
| {
"en": {
"greetings": {
"hello": "hello， {0}"，
"bye": "bye"
}
}，
"pt": {
"greetings": {
"hello": "Ola， {0}"，
"bye": "Tchau"
}
}
}
|
示例二 JQuery 格式模块 接下来的这个示例中，将说明对不同型态的信息的格式转换。需要加载必要的代码模块来转换日期的时间格式，表 1 中列出了常用格式所需的代码模块。
表 1. 常用格式所需的代码模块格式说明 数字 使用 JQuery globalize 数字 API， 至少需要加载"jquery.js"， "cldr.js"， "cldr/event.js"， "cldr/supplemental.js"， "globalize.js"， "globalize/number.js"几个 Javascript 模块，并须依照顺序加载。 日期
使用日期格式需要依序加载所有数字格式转换用到的模块，并加上。"globalize/date.js" 模块。
"/cldr/supplemental/likelySubtags.json" 对 jquery globalize API 是一个必备的模块。 复数
使用复数格式需要依序加载"jquery.js"， "cldr.js"， "cldr/event.js"， "cldr/supplemental.js"， "globalize.js"， "globalizeplural.js" 模块。
货币
使用货币格式需要依序加载所有数字格式转换用到的模块并加上"globalize/currency.js" 模块。
值得注意的是不同格式间有一个共通的特性。JQuery globalize API 本身不包含任何 CLDR 数据内容，各对应功能以及语系所需要用到的 CLDR 数据需另外加载。最基本一定要加载的是 likelySubtags .json 文档( "/cldr/supplemental/likelySubtags.json")。表 2 中列出了常用格式所需的 Json 模块。
表 2. 所需 JSON 模块格式CDLR json 文档 数字
cldr/main/locale/numbers.json
cldr/supplemental/numberingSystems.json 日期
cldr/main/locale/ca-gregorian.json
cldr/main/locale/timeZoneNames.json
cldr/supplemental/timeData.json
cldr/supplemental/weekData.json
以及数字模块所需的 CLDR JSON 文件 复数(Plural)
cldr/supplemental/plurals.json (基本款的复数，比如说:一个两个三个)
cldr/supplemental/ordinals.json (顺序的复数，比如说:第一个，第二个)。 货币
cldr/main/locale/currencies.json
cldr/supplemental/currencyData.json
数字模块所需的 CLDR JSON 文件
以及复数模块所需的 CLDR JSON 档案(用来支持货币名称型态)
在下列的示例程序中我们将示范数字、货币、时间与复数型态的格式如何用 JQuery Globalization 函数库做转换。
代码清单摘录如清单 4( )：
清单 4. 常见格式转换代码范例1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| <script>
var globalize;
var locale="en";
function displaynew(){
$.when(
$.get( "/cldr/main/" + locale + "/ca-gregorian.json"),
$.get( "/cldr/main/" + locale + "/timeZoneNames.json"),
$.get( "/cldr/main/" + locale + "/numbers.json"),
$.get( "/cldr/main/" + locale + "/currencies.json"),
$.get( "/cldr/supplemental/timeData.json" ),
$.get( "/cldr/supplemental/weekData.json" ),
$.get( "/cldr/supplemental/numberingSystems.json" ),
$.get( "/cldr/supplemental/currencyData.json" ),
$.get( "/cldr/supplemental/likelySubtags.json"),
$.get( "/cldr/supplemental/plurals.json" ),
$.get( "/cldr/supplemental/ordinals.json" )
).done(function(result1,result2,result3,result4,result5, result6, result7, result8, result9, result10, result11) {
/*载入所有函数库*/
Globalize.load(result1 [0]);
……
globalize = Globalize(locale);
var plural=globalize.pluralGenerator();
var pluralordinal=globalize.pluralGenerator({ type: "ordinal" });
var numFormatter = Globalize(locale).numberFormatter({ maximumFractionDigits: 5} );
var dateFormatter = Globalize(locale).dateFormatter({datetime: "medium"});
var currencyFormatter=Globalize(locale).currencyFormatter("CNY",{style:"name"});
var content = "<p>";
content = content + "***** Number format *****<br>";
content = content + "Number(1234.5678): "+numFormatter(1234.5678) +"<p>";
content = content + "***** Currency format *****<br>";
content = content + "Currency(1234.5678): "+currencyFormatter(1234.5678) +"<p>";
content = content + "***** Time format *****<br>";
content = content + "Current Time: "+dateFormatter(new Date()) +"<p>";
content = content + "***** Plural format *****<br>";
content = content + "<table border='1' width='400'>";
content = content + "<tr><td>Number</td><td>Cardinals</td><td>Ordinal</td></tr>";
/*传入不同数值, 观察在不同语言下复数的格式*/
content = content + "<tr><td>3.5</td><td>" + plural(3.5) + "</td><td>";
……
content = content + pluralordinal(3.5)+ "</td></tr>";
content = content + "<tr><td>0</td><td>" + plural(0) + "</td><td>";
content = content + "</p>"
$("div#test").empty();
$("div#test").append(content);
});
}
|
运行示例程序 接着我们可以验证示例程序执行的结果。使用浏览器连接到在示例程序接口上，切换不同的语言选项(locale), 结果将如下图 2、图 3 所示，各种格式在不同语言环境下,会按照 CLDR 提供的格式数据做不同的呈现。
图 2. 简中 JQuery 格式转换结果预览(数字/货币/时间) 图 3. 波兰文 JQuery 格式转换结果预览(数字/货币/时间) 从运行结果可以看出，各个数据格式依照所选的 locale 可以提供符合各地使用者所需要的呈现。 |
|
|
|
|
|
