? 每個公司業(yè)務(wù)不一樣，此解決方案僅做參考 。
前言
其實(shí)現(xiàn)在開發(fā)者解決多語言普遍三種解決方案：
第一個是為每個頁面提供每種語言的相關(guān)頁面蚌成。
第二種是把內(nèi)容從表現(xiàn)形式中分離出來芭析，做不同語言的內(nèi)容文件。
第三種是動態(tài)翻譯頁面內(nèi)容攀甚。第三種很少見箩朴，而且機(jī)器翻譯技術(shù)還很難達(dá)到人們的預(yù)期。
其實(shí)第二種相對來說簡單一點(diǎn)秋度，那么開搞炸庞。
實(shí)現(xiàn)
思考
- 翻譯公司給的有的excel有的是json文件，咱們就統(tǒng)一請求json文件吧;
- html中給標(biāo)簽加個
lang屬性荚斯，到時候頁面加載時遍歷所有這些有lang屬性的標(biāo)簽去實(shí)現(xiàn)切換語言; - js里的文字用方法實(shí)現(xiàn)轉(zhuǎn)換語言;
- 把用戶選擇的語言存到cookie里吧埠居，嗯！拿個小本本記下來;
- 做個緩存事期，請求過的語言文件就不再請求了;
- 暫時就這些吧...
demo
image
文件目錄
image
index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>translation test</title>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div>
<a href="#" id="enBtn">English</a>
<a href="#" id="zhBtn">簡體中文</a>
</div>
<div><a lang>click here:</a></div>
<div><input type="button" value="apply" lang id="applyBtn"></div>
</body>
</html>
script.js
var dict = {};
$(function () {
registerWords();
if(getCookieVal("lang")=="en"){
setLanguage("en");
}else if(getCookieVal("lang")=="zh"){
setLanguage("zh");
}else{
setLanguage("en");
}
// 切換語言事件 根據(jù)自己業(yè)務(wù)而定
$("#enBtn").bind("click", function () {
setLanguage("en");
//這里也可以寫一些其他操作滥壕，比如加載語言對應(yīng)的css
});
$("#zhBtn").bind("click", function () {
setLanguage("zh");
});
});
function setLanguage(lang) {
setCookie("lang=" + lang + "; path=/;");
translate(lang);
}
function getCookieVal(name) {
var items = document.cookie.split(";");
for (var i in items) {
var cookie = $.trim(items[i]);
var eqIdx = cookie.indexOf("=");
var key = cookie.substring(0, eqIdx);
if (name == $.trim(key)) {
return $.trim(cookie.substring(eqIdx + 1));
}
}
return null;
}
function setCookie(cookie) {
var Days = 30; //此 cookie 將被保存 30 天
var exp = new Date(); //new Date("December 31, 9998");
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
document.cookie = cookie+ ";expires=" + exp.toGMTString();
}
function translate(lang) {
if(sessionStorage.getItem(lang + "Data") != null){
dict = JSON.parse(sessionStorage.getItem(lang + "Data"));
}else{
loadDict();
}
$("[lang]").each(function () {
switch (this.tagName.toLowerCase()) {
case "input":
$(this).val(__tr($(this).attr("lang")));
break;
default:
$(this).text(__tr($(this).attr("lang")));
}
});
}
function __tr(src) {
return (dict[src] || src);
}
function loadDict() {
var lang = (getCookieVal("lang") || "en");
$.ajax({
async: false,
type: "GET",
url: "/lang/"+lang + ".json",
success: function (msg) {
dict = msg;
sessionStorage.setItem(lang + 'Data', JSON.stringify(dict));
}
});
}
// 遍歷所有l(wèi)ang屬性的標(biāo)簽賦值
function registerWords() {
$("[lang]").each(function () {
switch (this.tagName.toLowerCase()) {
case "input":
if($(this).attr("lang")==""){
$(this).attr("lang", $(this).val());
}
break;
default:
if($(this).attr("lang")==""){
$(this).attr("lang", $(this).text());
}
}
});
}
之前弄demo的時候，registerWords函數(shù)這里沒有判斷
但是我們的項(xiàng)目自己封裝的路由去動態(tài)加載頁面兽泣。每次進(jìn)來都會重新賦值绎橘，這會導(dǎo)致問題。
因?yàn)樗x值的是當(dāng)前元素的值唠倦，這個時候你lang的值就和語言包文件里的key對應(yīng)不上了
使用方法
html中語言切換：給所有標(biāo)簽加上lang屬性
js中語言切換：使用__tr()方法
可以直接把script.js作為一個插件使用放到項(xiàng)目中
總結(jié)
條條大路通羅馬称鳞，根據(jù)自己的實(shí)際需求與業(yè)務(wù)場景去做即可。
有點(diǎn)倉促稠鼻，有不足的還請各位小哥哥小姐姐指點(diǎn)冈止。
