摘要：
國際化是指將頁面顯示的信息翻譯成不同語言，可以根據不同語言開發多個版本，然后根據用戶選擇的語言顯示不同的頁面。但是這樣需要很高的成本，而且維護起來也很麻煩，一個地方有問題就要修改所有版本。本文主要是分享一種前端國際化解決方法，並且已經應用到自己的項目中。
前端國際化需要將頁面HTML、javascript的提示信息、后端返回的信息翻譯成對應的語言。如果我們能夠將這幾個地方的內容提取出來，然后用一個翻譯函數，根據不同的參數將內容翻譯成不同的語言，這樣就達到我們的目的了。
頁面國際化：
對於標簽里的內容國際化，需要我們在頁面顯示出來之前就做好翻譯。使用i18n插件來完成，先到官網下載插件，然后引到自己的項目中。
1 function localize(lng){ 2 var deferred = $.i18n.init({ 3 lng : lng || 'zh-CN', //翻譯成的語言 4 load : 'current', //加載當前設置的語言包 5 getAsync : false, //是否異步調用語言包 6 cookieName : 'i18n', //cookie的名稱 7 preload : ['zh-CN', 'en-US'], //預加載語言包 8 fallbackLng : ['zh-CN', 'en-US'], //如果沒有設置，則默認為“開發”。如果打開，所有丟失的鍵/值將被翻譯成該語言。 9 resGetPath : '/locale/__lng__/__ns__.json', // 加載資源的路徑 10 ns: { namespaces: ['test'], defaultNs: 'test'}, //加載的語言包 11 useLocalStorage : false, //是否將語言包存儲在localstorage 12 localStorageExpirationTime: 86400000 // 有效周期，單位ms。默認1周 13 }); 14 return deferred; 15 }
對應頁面內容加上data-i18n屬性，如下：
1 <div class="content"> 2 <h2 data-i18n="test.title">測試</h2> 3 <span data-i18n="test.content">這是一個測試</span> 4 </div>
en-US/test.json
1 { 2 "test": { 3 "title": "test", 4 "content": "this is a test" 5 } 6 }
zh-CN/test.json
1 { 2 "test": { 3 "title": "測試", 4 "content": "這是一個測試" 5 } 6 }
對應js
1 localize().done(function(){ $('div.content').i18n();});
javascript文件和后台返回信息的國際化：
我們只需要將內容信息提取到一個JSON或者js文件，然后將其轉換成英文，如下：
i18n.message = {
"success" : "成功",
"fail" : "失敗"
};
然后在js文件中，直接替換"成功"-->i18n.message.success，也可以定義一個通用函數來做翻譯
1 locale.curryGetMsg = function(ns, cl){ 2 return (cl = chopper.locale)[ns] ? 3 function(msg){ 4 return cl[ns][msg] || cl.action[msg] || cl.common[msg] || cl.message[msg] || msg; 5 } : 6 function(msg){ 7 return cl.action[msg] || cl.common[msg] || cl.message[msg] || msg; 8 }; 9 };
在項目中只需要調用這個函數，如下：
1 var test = locale.curryGetMsg("module");// module為對應的模塊 2 3 test.("success");
下面是一個i18n例子：
文件結構為
i18n-->
index.html
i18next-latest.js
locale-->
en-US-->
test.json
zh-CN-->
test.json
代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 5 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 6 <script src="./i18next-latest.js"></script> 7 </head> 8 <body> 9 <div class="content"> 10 <h2 data-i18n="test.title">測試</h2> 11 <span data-i18n="test.content">這是一個測試</span> 12 </div> 13 <script> 14 function localize(lng){ 15 var deferred = $.i18n.init({ 16 lng : lng || 'zh-CN', //翻譯成的語言 17 load : 'current', //加載當前設置的語言包 18 getAsync : false, //是否異步調用語言包 19 cookieName : 'i18n', //cookie的名稱 20 preload : ['zh-CN', 'en-US'], //預加載語言包 21 fallbackLng : ['zh-CN', 'en-US'], //如果沒有設置，則默認為“開發”。如果打開，所有丟失的鍵/值將被翻譯成該語言。 22 resGetPath : './locale/__lng__/__ns__.json', // 加載資源的路徑 23 ns: { namespaces: ['test'], defaultNs: 'test'}, //加載的語言包 24 useLocalStorage : false, //是否將語言包存儲在localstorage 25 localStorageExpirationTime: 86400000 // 有效周期，單位ms。默認1周 26 }); 27 return deferred; 28 } 29 localize('en-US').done(function(){ $('div.content').i18n();}); 30 </script> 31 </body> 32 </html>
注意：上面的例子需要在服務環境上運行！