so easy 前端實作多語言
每個公司業務不一樣，此解決方案僅做參考 。Git demo位址
前言
其實作在開發者解決多語言普遍三種解決方案：
第一個是為每個頁面提供每種語言的相關頁面。
第二種是把内容從表現形式中分離出來，做不同語言的内容檔案。
第三種是動态翻譯頁面内容。第三種很少見，而且機器翻譯技術還很難達到人們的預期。
其實第二種相對來說簡單一點，那麼開搞。
實作
思考
- 翻譯公司給的有的excel有的是json檔案，咱們就統一請求json檔案吧;
- html中給标簽加個
lang
lang
- js裡的文字用方法實作轉換語言;
- 把使用者選擇的語言存到cookie裡吧，嗯！拿個小本本記下來;
- 做個緩存，請求過的語言檔案就不再請求了;
- 暫時就這些吧...
demo
檔案目錄
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");
}
// 切換語言事件 根據自己業務而定
$("#enBtn").bind("click", function () {
setLanguage("en");
//這裡也可以寫一些其他操作，比如加載語言對應的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));
}
});
}
// 周遊所有lang屬性的标簽指派
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
函數這裡沒有判斷
但是我們的項目自己封裝的路由去動态加載頁面。每次進來都會重新指派，這會導緻問題。
因為他指派的是目前元素的值，這個時候你
lang
的值就和語言封包件裡的
key
對應不上了
使用方法
html中語言切換：給所有标簽加上
lang
屬性
js中語言切換：使用
__tr()
方法
可以直接把
script.js
作為一個插件使用放到項目中
總結
條條大路通羅馬，根據自己的實際需求與業務場景去做即可。
有點倉促，不過不失為一個辦法。
![JavaScript的那些坑之事件代理事件代理事件階段[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)