so easy 前端实现多语言
每个公司业务不一样，此解决方案仅做参考 。
前言
其实现在开发者解决多语言普遍三种解决方案：
第一个是为每个页面提供每种语言的相关页面。 第二种是把内容从表现形式中分离出来，做不同语言的内容文件。
其实第二种相对来说简单一点，那么开搞。
实现
思考
- 翻译公司给的有的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作为一个插件使用放到项目中
总结
条条大路通罗马，根据自己的实际需求与业务场景去做即可。
有点仓促，有不足的还请各位小哥哥小姐姐指点。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-5-17 1，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
