web多語言的一種處理方式

在開發一種國際化系統時，多語言是必須的。

總的來講處理方式有兩種，一種是後端處理，另外一種是前端處理。呵呵，有點廢話~~

後端處理沒用過，猜猜是在標記須要處理語言的地方進行替換。

前端處理是要先把語言文件加載過來，再對各個須要翻譯的DOM節點進行翻譯。

 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>

固然這是最笨的方法，由於這個修改起來很不方便，特別是在翻譯量很大的時候。

一種更通用的方法是把翻譯字段寫在指定的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>