so easy 前端实现多语言-白红宇

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

前言

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

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

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

实现

思考

翻译公司给的有的excel有的是json文件，咱们就统一请求json文件吧;

html中给标签加个lang属性，到时候页面加载时遍历所有这些有lang属性的标签去实现切换语言;

js里的文字用方法实现转换语言;

把用户选择的语言存到cookie里吧，嗯！拿个小本本记下来;

做个缓存，请求过的语言文件就不再请求了;

暂时就这些吧...

demo

文件目录

index.html


      translation test                
              
     English          
     简体中文      
    
      
    
     click here:
    
      
    
     
    
       复制代码

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

总结

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

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