利用 JavaScript 做网站的国际化
随着我们国家的进一步改革开放,越来越多的人发现,和国际接轨的重要性。国外有多种多样的高科技值得我们去学习,同样,具有我们中国特色的产品、技术等等也不得不和国际社会相接轨。常言道,适者才能生存,更何况是在全球一体化后的这样一个大舞台上。
科技的发展,对于我们生活的改变是可想而知的,而互联网的发展也是非常显著的。如今,网页制作者们,也不得不为了适应国际化的发展趋势,开始制作支持多国语言的网站,由此也催生出了各式各样的国际化的框架。而本文将向您介绍一种基于 Web 2.0,利用 Javascript 脚本,通过 AJAX 技术实现无刷新的将您的网页进行国际化转换的方法——L10n By Javascript。
该脚本的设计构思,是来源于 PHP 的 gettext 框架,它可以说是 PHP 下最好的国际化方法,其相关资料大家可以 google 一番,就不再次详述。此外,由于该脚本是用 Javascript 编写的,所以其采用了时下最流行的 Javascript 类库——jQuery,并撰写为一款 jQuery 插件,从而可以方便的使用。
和 PHP gettext 类似,L10n By Javascript 的翻译,将经历如下的步骤:
- 在源文件(网页,如:.html 文件)中直接用英文表述
- 定义各种需要的语言资源文件(.xml 文件)
- 然后通过脚本读取一个事先定义语言资源文件
- 接着对需要翻译的原文进行匹配。如果有匹配的译文,则直接替换为译文;如果没有相应的译文,则保留原文不变。
下面是一个简单的例子:
<html>
<head>
<title>A simple example</title>
<script src="jquery.js" language="JavaScript" type="text/javascript"></script>
<script src="jquery.l10n.js" language="JavaScript" type="text/javascript"></script>
<script type="text/javascript">
$.l10n.init({
"dir": "./languages", // 语言资源文件的访问路径
"lang": "zh_CN", // 翻译的目标语言代码
"cache": true // 是否读取缓存中的数据
});
</script>
</head>
<body>
<script type="text/javascript">
// 直接翻译
document.write($.l10n.__("Words need to be translated"));
// 或者
$.l10n._e("Words need to be translated");
</script>
<!-- 间接翻译 -->
<span>Words need to be translated</span>
<script type="text/javascript">
$("span").l10n(); // 翻译所有 <span> 元素。一般情况下建议在文档完全载入后再执行该方法
</script>
</body>
</html>
虽然目前的 L10n By Javascript 还是个不成熟的插件,但是相信它将来定会成为一个非常不错的国际化程序。
