Chinaunix首页 | 论坛 | 博客
  • 博客访问: 387564
  • 博文数量: 273
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1430
  • 用 户 组: 普通用户
  • 注册时间: 2018-02-02 15:57
文章分类

全部博文(273)

文章存档

2018年(273)

我的朋友

分类: 大数据

2018-06-20 15:33:26

前言

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

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

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

实现

思考

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

demo

文件目录

index.html

 <html> <meta charset="utf-8"> <title>translation testtitle> <script src="">script> <script src="js/script.js">script> <script src="js/index.js">script> head> <body> <div> <a href="#" id="enBtn">Englisha> <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));
    }
  });

}
阅读(1061) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~