so easy 前端实现多语言

时间 2019-11-10

标签 easy 前端实现多语言繁體版

原文原文链接

每一个公司业务不同，此解决方案仅作参考。

Git demo地址javascript

前言

其实如今开发者解决多语言广泛三种解决方案：css

第一个是为每一个页面提供每种语言的相关页面。
第二种是把内容从表现形式中分离出来，作不一样语言的内容文件。
第三种是动态翻译页面内容。第三种不多见，并且机器翻译技术还很难达到人们的预期。html

其实第二种相对来讲简单一点，那么开搞。java

实现

思考

翻译公司给的有的excel有的是json文件，我们就统一请求json文件吧;
html中给标签加个lang属性，到时候页面加载时遍历全部这些有lang属性的标签去实现切换语言;
js里的文字用方法实现转换语言;
把用户选择的语言存到cookie里吧，嗯！拿个小本本记下来;
作个缓存，请求过的语言文件就再也不请求了;
暂时就这些吧...

demo

文件目录jquery

index.htmlgit

<!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.jsgithub

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函数这里没有判断
可是咱们的项目本身封装的路由去动态加载页面。每次进来都会从新赋值，这会致使问题。ajax

由于他赋值的是当前元素的值，这个时候你lang的值就和语言包文件里的key对应不上了json

使用方法

html中语言切换：给全部标签加上lang属性
js中语言切换：使用__tr()方法缓存

能够直接把script.js做为一个插件使用放到项目中

总结

条条大路通罗马，根据本身的实际需求与业务场景去作便可。

有点仓促，有不足的还请各位指点。