so easy 前端實現多語言

遊魂Andy發表於2018-05-17
前端

​ 每個公司業務不一樣，此解決方案僅做參考 。

Git demo地址

前言

其實現在開發者解決多語言普遍三種解決方案：

第一個是為每個頁面提供每種語言的相關頁面。 第二種是把內容從表現形式中分離出來，做不同語言的內容檔案。 第三種是動態翻譯頁面內容。第三種很少見，而且機器翻譯技術還很難達到人們的預期。

其實第二種相對來說簡單一點，那麼開搞。

實現

思考

  • 翻譯公司給的有的excel有的是json檔案，我們們就統一請求json檔案吧;
  • html中給標籤加個lang屬性，到時候頁面載入時遍歷所有這些有lang屬性的標籤去實現切換語言;
  • js裡的文字用方法實現轉換語言;
  • 把使用者選擇的語言存到cookie裡吧，嗯！拿個小本本記下來;
  • 做個快取，請求過的語言檔案就不再請求了;
  • 暫時就這些吧...

demo

so easy 前端實現多語言

檔案目錄

so easy 前端實現多語言

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作為一個外掛使用放到專案中

總結

條條大路通羅馬，根據自己的實際需求與業務場景去做即可。

有點倉促，有不足的還請各位指點。

相關文章