web多语言的一种处理方式

在开发一种国际化系统时,多语言是必须的。html

总的来讲处理方式有两种,一种是后端处理,另外一种是前端处理。呵呵,有点废话~~前端

后端处理没用过,猜猜是在标记须要处理语言的地方进行替换。后端

前端处理是要先把语言文件加载过来,再对各个须要翻译的DOM节点进行翻译。this

 1 <label id="user"></label>
 2 <script>
 3 var i18n = {
 4    En: {user: 'User'},
 5    Zh: {user: '用户'} 
 6 }
 7 
 8 var lang = 'Zh';
 9 
10 function tranlation(str){
11     return i18n[lang][str] || str;
12 }
13 
14 $('#user').html(translation('user'));
15 </script>

固然这是最笨的方法,由于这个修改起来很不方便,特别是在翻译量很大的时候。spa

一种更通用的方法是把翻译字段写在指定的attr上。好比咱们约定t为要翻译的DOM节点,那上面的例子就能够写成:翻译

<label t="user"></label>

<script>
    $('[t]').each(function(){
        var key = $(this).attr('t');
        $(this).html(transltion(key);
    })
</script>

这样的话JS代码就能够不用修改了,在须要翻译的地方只须要加上T属性便可。code

固然作得更好一点就是把translation封装成一个通用方法。htm

<script>
    $.fn.transtion = function(){
        ...
    }

    $('[t]').transtion();
</script>
相关文章
相关标签/搜索