前端國(guó)際化
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
摘要：國(guó)際化是指將頁(yè)面顯示的信息翻譯成不同語(yǔ)言，可以根據(jù)不同語(yǔ)言開(kāi)發(fā)多個(gè)版本，然后根據(jù)用戶(hù)選擇的語(yǔ)言顯示不同的頁(yè)面。但是這樣需要很高的成本，而且維護(hù)起來(lái)也很麻煩，一個(gè)地方有問(wèn)題就要修改所有版本。本文主要是分享一種前端國(guó)際化解決方法，并且已經(jīng)應(yīng)用到自己的項(xiàng)目中。 前端國(guó)際化需要將頁(yè)面HTML、javascript的提示信息、后端返回的信息翻譯成對(duì)應(yīng)的語(yǔ)言。如果我們能夠?qū)⑦@幾個(gè)地方的內(nèi)容提取出來(lái)，然后用一個(gè)翻譯函數(shù)，根據(jù)不同的參數(shù)將內(nèi)容翻譯成不同的語(yǔ)言，這樣就達(dá)到我們的目的了。 頁(yè)面國(guó)際化：對(duì)于標(biāo)簽里的內(nèi)容國(guó)際化，需要我們?cè)陧?yè)面顯示出來(lái)之前就做好翻譯。使用i18n?插件來(lái)完成，先到官網(wǎng)下載插件，然后引到自己的項(xiàng)目中。 1 function localize(lng){ 2 var deferred = $.i18n.init({ 3 lng : lng || 'zh-CN', //翻譯成的語(yǔ)言 4 load : 'current', //加載當(dāng)前設(shè)置的語(yǔ)言包 5 getAsync : false, //是否異步調(diào)用語(yǔ)言包 6 cookieName : 'i18n', //cookie的名稱(chēng) 7 preload : ['zh-CN', 'en-US'], //預(yù)加載語(yǔ)言包 8 fallbackLng : ['zh-CN', 'en-US'], //如果沒(méi)有設(shè)置，則默認(rèn)為“開(kāi)發(fā)”。如果打開(kāi)，所有丟失的鍵/值將被翻譯成該語(yǔ)言。 9 resGetPath : '/locale/__lng__/__ns__.json', // 加載資源的路徑 10 ns: { namespaces: ['test'], defaultNs: 'test'}, //加載的語(yǔ)言包 11 useLocalStorage : false, //是否將語(yǔ)言包存儲(chǔ)在localstorage 12 localStorageExpirationTime: 86400000 // 有效周期，單位ms。默認(rèn)1周 13 }); 14 return deferred; 15 } 對(duì)應(yīng)頁(yè)面內(nèi)容加上data-i18n屬性，如下： 1 <div class="content"> 2 <h2 data-i18n="test.title">測(cè)試</h2> 3 <span data-i18n="test.content">這是一個(gè)測(cè)試</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": "測(cè)試", 4 "content": "這是一個(gè)測(cè)試" 5 } 6 } 對(duì)應(yīng)js 1 localize().done(function(){ $('div.content').i18n();}); javascript文件和后臺(tái)返回信息的國(guó)際化：我們只需要將內(nèi)容信息提取到一個(gè)JSON或者js文件，然后將其轉(zhuǎn)換成英文，如下：
然后在js文件中，直接替換"成功"-->i18n.message.success，也可以定義一個(gè)通用函數(shù)來(lái)做翻譯 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 }; 在項(xiàng)目中只需要調(diào)用這個(gè)函數(shù)，如下： 1 var test = locale.curryGetMsg("module");// module為對(duì)應(yīng)的模塊 2 3 test.("success");
下面是一個(gè)i18n例子：文件結(jié)構(gòu)為
代碼： 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">測(cè)試</h2> 11 <span data-i18n="test.content">這是一個(gè)測(cè)試</span> 12 </div> 13 <script> 14 function localize(lng){ 15 var deferred = $.i18n.init({ 16 lng : lng || 'zh-CN', //翻譯成的語(yǔ)言 17 load : 'current', //加載當(dāng)前設(shè)置的語(yǔ)言包 18 getAsync : false, //是否異步調(diào)用語(yǔ)言包 19 cookieName : 'i18n', //cookie的名稱(chēng) 20 preload : ['zh-CN', 'en-US'], //預(yù)加載語(yǔ)言包 21 fallbackLng : ['zh-CN', 'en-US'], //如果沒(méi)有設(shè)置，則默認(rèn)為“開(kāi)發(fā)”。如果打開(kāi)，所有丟失的鍵/值將被翻譯成該語(yǔ)言。 22 resGetPath : './locale/__lng__/__ns__.json', // 加載資源的路徑 23 ns: { namespaces: ['test'], defaultNs: 'test'}, //加載的語(yǔ)言包 24 useLocalStorage : false, //是否將語(yǔ)言包存儲(chǔ)在localstorage 25 localStorageExpirationTime: 86400000 // 有效周期，單位ms。默認(rèn)1周 26 }); 27 return deferred; 28 } 29 localize('en-US').done(function(){ $('div.content').i18n();}); 30 </script> 31 </body> 32 </html>
轉(zhuǎn)自https://www.cnblogs.com/xiyangbaixue/p/4069681.html 該文章在 2025/9/8 10:38:55 編輯過(guò) |
關(guān)鍵字查詢(xún)
相關(guān)文章
正在查詢(xún)... 
|
400 186 1886
