使用 Dojo 实现站点的跨浏览器本地化支持(1)
 
- UID
- 1066743
|

使用 Dojo 实现站点的跨浏览器本地化支持(1)
简介在全球化的今天,当大公司们不断将产品推向全球各个市场时,软件产品的本地化便显得越来越重要。Dojo 提供了本地化支持的功能,开发者可以利用 Dojo 为自己开发的 Web 站点提供本地化支持。但在某些情况下,Dojo 的本地化在不同的浏览器下的表现不尽相同。本文将简要介绍 Dojo 的本地化特性,然后分析出现不同浏览器下差异的原因,进而根据 Web 站点自身技术特点提出两种不同的解决思路。通过本文读者可以加深对 Dojo 本地化的理解,并发现适合自己的方案。
Dojo 的本地化支持简介Dojo 可以指定 Web 应用程序的本地语言环境,并在页面加载时根据语言环境的设置加载特定语言的资源文件。
Dojo 提供了两种方式来指定 Web 应用程序本地语言环境。一种是编程方式,另一种是借助浏览器的默认本地语言环境设置。
编程方式即通过编程的方式指定 dojoConfig 对象内"locale"属性的值。既可以在生成页面时在 Server 端设置好此属性,也可以在 Client 端由 JavaScript 在运行时设置此属性。
清单 1. 编程方式设置本地语言环境示例1
| <script type="text/javascript" src="dojo.js" data-dojo-config ="locale:'en-us'"></script>
|
另一种方式是借助浏览器的默认本地语言环境设置,此时 Dojo 会从浏览器的 navigator 对象中读取语言环境属性,并将此属性设置为本地语言环境。
在了解了如何设置 Web 应用程序的本地语言设置之后,就需要学习如何提供本地化所需要的一组资源文件,资源文件中存储了要显示在页面中的字符串。这些资源文件的命名相同,每个文件对应一种语言环境。不同的文件放置在对应语言的文件目录下,如图 1 所示。
图 1. 资源文件目录结构 资源文件是一个 js 文件,其中保存的是所有需要在页面中显示的文本,以 Key 和 Value 的形式保存在文件中。
本例中我们将资源文件命名为 message.js。en-us 目录下的 message.js 代码如清单 2 所示:
清单 2. en-us 目录下的 message.js1
2
3
4
5
6
| (
{
"pageHeader":"Dojo Localization Demo",
"content":"This is a demo for Dojo localization."
}
)
|
zh-cn 目录下的 message.js 代码如清单 3 所示:
清单 3. zh-cn 目录下的 message.js1
2
3
4
5
6
| (
{
"pageHeader":"Dojo 本地化示例",
"content":"这是一个 Dojo 本地化的示例。"
}
)
|
在 Web 页面中调用如下代码便完成了页面的本地化。
清单 4. 利用 Dojo 实现了本地化支持的页面1
2
3
4
5
6
7
8
9
10
| <script type="text/javascript" src="dojo/dojo/dojo.js" data-dojo-config="locale: 'en-us'">
</script>
<script>
dojo.registerModulePath("locale", "../../demo/locale");
dojo.requireLocalization("locale", "message");
var resource = dojo.i18n.getLocalization("locale", "message");
dojo.byId("demoH1").innerHTML = resource.pageHeader;
dojo.byId("contentDiv").innerHTML = resource.content;
......
</script>
|
|
|
|
|
|
|