0.基本思路
使用jQuery根据不同字典替换元素的原有文本,以达到多语言的效果。
首先,字典是一个json文件。
之后,通过ajax获取不同的字典,替换文本。
1.实现源码
;(function($){
$.extend({
langto: function(url){
$.getJSON(url,function(data){
$('.langto').each(function(){
var text = data[$(this).text()];
if (text != null){
$(this).text(text);
}
});
});
}
});
})(jQuery);
很简短的一个函数拓展,命名为langto,从函数实现可以看用到了langto的CSS类。
当获取字典成功时,查找字典中与langto类元素的文本一致时替换之。
2.应用场景
首先是提供字典的JSON文件,这个完全可以是静态文件,例如lang/zh-CN.json:
{
"File": "文件",
"Edit": "编辑"
}
以及lang/en-US.json:
{
"File": "It's File",
"Edit": "Edit it"
}
这样的文件根据语言可以多个,利用文件名区分。
HTML元素类似下面:
<ul>
<li class="langto">File</li>
<li class="langto">Edit</li>
</ul>
使用时调用langto来替换文本(需要先载入jQuery):
$.langto('/lang/'+navigator.language+'.json');
最好确保在所有需要翻译的元素(例如通过Ajax加载的其他元素)都载入后再调用,不然后加载的不能被翻译。记住,langto是接收一个url的,所以你可以采用另外的对照关系来获得字典文件。比如获取html元素的lang属性值,然后更具lang的属性值得到字典的url也是可行的。
3.总结
其实很多后端框架早就实现了多语言功能,我这么做反而多了一个HTTP请求,不过少了后端的处理。
这里还有个问题,就是需要确保所有需要翻译的元素都加载完在调用langto。
最后说说我为什么写这么一个jQuery拓展。因为github.io的博客提供了一个静态服务器,不能用后端脚本。