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

总结

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

有点仓促,有不足的还请各位小哥哥小姐姐指点。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏琦小虾的Binary

程序生成之编译、链接、加载浅析

程序生成之编译、链接、加载浅析 最近笔者看论文烦得慌,便又重新拾起之前没有完全完成的交叉编译,准备在网上找资料,好好研究一下。 讲道理,笔者其实对编译链接的...

2216
来自专栏前端达人

2018年最全面的前端面试题都在这里了

意义:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 注意: 1.尽可能少的...

1604
来自专栏大内老A

认识ASP.NET MVC的5种AuthorizationFilter

在总体介绍了筛选器及其提供机制(《深入探讨ASP.NET MVC的筛选器》)之后,我们按照执行的先后顺序对四种不同的筛选器进行单独介绍,首先来介绍最先执行的Au...

1936
来自专栏Jacklin攻城狮

iOS,面试必看,最全梳理

目前形势,参加到iOS队伍的人是越来越多,甚至已经到供过于求了。今年,找过工作人可能会更深刻地体会到今年的就业形势不容乐观,加之,培训机构一火车地向用人单位输送...

1012
来自专栏海说

vue前端页面跳转参数传递及存储

不同页面间进行参数传递,实现方式有很多种,最简单最直接的方式就是在页面跳转时通过路由传递参数,如下所示。 路由传递参数 this.$router.push({ ...

3800
来自专栏企鹅号快讯

如何深入 Python 虚拟机追查 HTTP 服务 core dump 导致 502 的问题

作者 今日头条技术团队 概述 今日头条目前大部分 Python 的 HTTP 服务都是用 uWSGI 托管 Python 多进程的 Django 或者 Fla...

1917
来自专栏葡萄城控件技术团队

程序员级别鉴定书(.NET面试问答集锦)

作为一个.NET程序员,应该知道的不仅仅是拖拽一个控件到设计时窗口中。就像一个赛车手,一定要了解他的爱车 – 能做什么不能做什么。 本文参考Scott Hans...

2697
来自专栏FreeBuf

WIN10下ROP初体验

* 本文原创作者:与非门salome,本文属FreeBuf原创奖励计划,未经许可禁止转载 首先,在windows10下编写一个具有一定安全机制但又存在漏...

2149
来自专栏PHP实战技术

你应该这个姿势学习php(3)

1、ob_start() 开启文件缓存 2、ob_get_contents() 得到缓存中的内存 3、ob_get_length() 得到缓冲区的长度 4、ob...

2747
来自专栏更流畅、简洁的软件开发方式

ajax的再次封装!

js的动态加载、缓存、更新以及复用 系列有点卡文,放心会继续的。先来点更基础的,为js的加载做点铺垫。   jQuery的ajax本来就很方便了,为啥还要在进一...

1898

扫码关注云+社区