so easy 前端简单实现多语言-阿里云开发者社区

开发者社区> 开发与运维> 正文

so easy 前端简单实现多语言

简介: 其实现在开发者解决多语言普遍三种解决方案:第一个是为每个页面提供每种语言的相关页面。第二种是把内容从表现形式中分离出来,做不同语言的内容文件。第三种是动态翻译页面内容。第三种很少见,而且机器翻译技术还很难达到人们的预期。

前言

其实现在开发者解决多语言普遍三种解决方案:

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

其实第二种相对来说简单一点,那么开搞。

实现

思考

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

demo


55f3e8761881e14b0b4ae45232f4cc447ead493a
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作为一个插件使用放到项目中

总结

条条大路通罗马,根据自己的实际需求与业务场景去做即可。

有点仓促,不过不失为一个办法。


原文发布时间为:2018年06月20日
原文作者:掘金
本文来源: 掘金 如需转载请联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章