部门有个Web UI产品,里面有项功能是语言切换。之前同事的做法是把每个页面都做另做一份,语言切换时改变URL即可。简单的页面还好,如果遇到更多语言和复杂页面难免会增加维护难度。后来另一个同事用jQuery+AJAX+json+cookie的方式加以改进,我学习了一下代码,做了个自己的版本。
首先,页面不需要复制多个语言版本了,我们为每个需要翻译的文本标签加上一个自定义的lang属性,如<div lang>login</div>、<input type=”button” value=”apply” lang>,不用为它赋值。一个HTML页面示例如下:
假如要实现英文和中文两种版本,可以在网页文件的同级目录下分别添加一个en.json和zh.json文件:
接着,为这个页面添加以下js脚本:
注意,页面加载完成后首先要统计翻译词条registerWords(),它会把每个待翻译标签里的文本记录到lang属性中,这个方法调用一次即可。
如果学过Qt,就会知道里面的语言包机制:每个词条可以指定一个context,这个单词一直被人蹩脚地翻译成“上下文”,我觉得这里解释为“名空间”更好,为解决一个单词或句子在不同地方产生不同翻译的问题。我还没有做到这一点,考虑到这种情况比较少见,并可加以避免,就偷个懒啦。
这就是我实现的思路,当然改进的地方还有不少,比如cookie的读写,语言包和页面文件的如何对应等等。在HTML上我只是个新手,就当抛块引玉了。
首先,页面不需要复制多个语言版本了,我们为每个需要翻译的文本标签加上一个自定义的lang属性,如<div lang>login</div>、<input type=”button” value=”apply” lang>,不用为它赋值。一个HTML页面示例如下:
<!doctype html>
<head>
<meta charset="utf-8">
<title>translation test</title>
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div>
<a href="#" id="enBtn">English</a>
<a href="#" id="zhBtn">简体中文</a>
</div>
<div><a lang>click here:</a></div>
<div><input type="button" value="apply" lang id="applyBtn"></div>
</body>
</html>
假如要实现英文和中文两种版本,可以在网页文件的同级目录下分别添加一个en.json和zh.json文件:
en.json
{
"click here:" : "Please click here:",
"apply" : "Apply!",
"a translation test!" : "A Translation test!!"
}
zh.json
{
"click here:" : "点击这里",
"apply" : "应用",
"a translation test!" : "翻译示例!"
}
接着,为这个页面添加以下js脚本:
var dict = {};
$(function() {
registerWords();
setLanguage("en");
$("#enBtn").bind("click", function() {
setLanguage("en");
});
$("#zhBtn").bind("click", function() {
setLanguage("zh");
});
$("#applyBtn").bind("click", function() {
alert(__tr("a translation test!"));
});
});
function setLanguage(lang) {
setCookie("lang=" + lang + "; path=/;");
translate();
}
function getCookieVal(name) {
var items = document.cookie.split(";");
for (var i in items) {
var cookie = $.trim(items[i]);
var eqIdx = cookie.indexOf("=");
var key = cookie.substring(0, eqIdx);
if (name == $.trim(key)) {
return $.trim(cookie.substring(eqIdx+1));
}
}
return null;
}
function setCookie(cookie) {
document.cookie = cookie;
}
function translate() {
loadDict();
$("[lang]").each(function() {
switch (this.tagName.toLowerCase()) {
case "input":
$(this).val( __tr($(this).attr("lang")) );
break;
default:
$(this).text( __tr($(this).attr("lang")) );
}
});
}
function __tr(src) {
return (dict[src] || src);
}
function loadDict() {
var lang = (getCookieVal("lang") || "en");
$.ajax({
async: false,
type: "GET",
url: lang + ".json",
success: function(msg) {
dict = eval("(" + msg + ")");
}
});
}
function registerWords() {
$("[lang]").each(function() {
switch (this.tagName.toLowerCase()) {
case "input":
$(this).attr("lang", $(this).val());
break;
default:
$(this).attr("lang", $(this).text());
}
});
}
可以看到,js代码中的语言翻译用__tr()解决。若要动态切换语言,调用setLanguage()方法。
注意,页面加载完成后首先要统计翻译词条registerWords(),它会把每个待翻译标签里的文本记录到lang属性中,这个方法调用一次即可。
如果学过Qt,就会知道里面的语言包机制:每个词条可以指定一个context,这个单词一直被人蹩脚地翻译成“上下文”,我觉得这里解释为“名空间”更好,为解决一个单词或句子在不同地方产生不同翻译的问题。我还没有做到这一点,考虑到这种情况比较少见,并可加以避免,就偷个懒啦。
这就是我实现的思路,当然改进的地方还有不少,比如cookie的读写,语言包和页面文件的如何对应等等。在HTML上我只是个新手,就当抛块引玉了。