在开发一种国际化系统时,多语言是必须的。
总的来说处理方式有两种,一种是后端处理,另一种是前端处理。呵呵,有点废话~~
后端处理没用过,猜猜是在标记需要处理语言的地方进行替换。
前端处理是要先把语言文件加载过来,再对各个需要翻译的DOM节点进行翻译。
<label id="user"></label>
<script>
var i18n = {
En: {user: 'User'},
Zh: {user: '用户'}
} var lang = 'Zh'; function tranlation(str){
return i18n[lang][str] || str;
} $('#user').html(translation('user'));
</script>
当然这是最笨的方法,因为这个修改起来很不方便,特别是在翻译量很大的时候。
一种更通用的方法是把翻译字段写在指定的attr上。比如我们约定t为要翻译的DOM节点,那上面的例子就可以写成:
<label t="user"></label> <script>
$('[t]').each(function(){
var key = $(this).attr('t');
$(this).html(transltion(key);
})
</script>
这样的话JS代码就可以不用修改了,在需要翻译的地方只需要加上T属性即可。
当然做得更好一点就是把translation封装成一个通用方法。
<script>
$.fn.transtion = function(){
...
} $('[t]').transtion();
</script>