设置logo和背景以及语言包切换

因为项目是一个海外项目，所以涉及到一些语言的问题，中文简体已经无法满足客户的小宇宙了，当老大轻松地把js这部分语言切换问题交给我的时候，感觉整个人都不好了。还有设置logo和背景的问题，乍一听感觉高大上的样子，但是真正去做的时候会发现其实并没有那么难，也许仅仅只要你能够搞清思路就可以了。当然我是激情满满的。

下面就开始说一下这两个扛把子。

先来说一下设置logo和背景，其实我们来理一下思路，就是当我设置完背景和logo的时候，我的整个项目的风格就换成了我选中的样子。其实刚开始做出来的时候确实是让人感到很震撼的，有一种小小的成就感。大致的做法是这样的：首先必选要先设置logo和背景，当然背景的平铺方式也可以选择，背景的对齐方式也可以选择。等设置成功后，数据库里面有我存的设置的logo和背景图片的时候，我就可以让后台的小哥哥帮忙进行数据绑定，logo直接就绑定到src上就好了，而与之有一点点区别的背景是直接绑在style上。但是问题来了，你们思考一下，如果让你们绑背景，并且除了登录这样的其他的背景都要换掉，也就是改变全局的背景，你会选择换掉哪一个呢，大部分人会告诉我换掉body，确实是这样的，无论哪个页面都是有body的，所以换body的背景是肯定可以的。但是换body的背景会存在一种问题，就是我们的导航栏和头部会对背景有一部分的遮挡，于是乎这样效果也许就没那么好了。当然如果想要让视觉效果更充分的，我们当然是选择把中间一部分内容的背景全局替换了，这样又美观，没有又了。话说回来，如果想要把中间一部分的背景换掉。那么提取到公共的模板页要写的比较好，整个项目的配合也要非常完美，一般情况像这样的完美情况都是在项目初期构建的时候就有这样打算和思路，那么对于后期的维护和修改就有很大的好处了。当然，我选择的是前者。不过效果依然是可以的。设置背景与之相反的就是不设置背景，也就是恢复默认的背景颜色，这里就是前端怎么把设置这部分做好了，后端的非空与空的判断好了。其他的没有难点，如果有想详情了解的小伙伴可以私聊。

下面来说一下语言包切换的问题，什么是语言包切换，语言包切换要考虑哪些问题，这些都是我要说的。什么是语言包切换呢，也就是有几种语言可以选择，默认没有选择的时候打个比方我们就选择中文简体，当切换成中文繁体的时候，就中文繁体，依次类推。这里要考虑的问题就是：刚开始我想的是如果每个语言不一样，那么我提交的表单的内容也就不一样了，这样后台的数据库岂不是要配置多个吗，到现在这个问题我也还是比较困惑的，如果有了解的小伙伴，也麻烦告知一下。我要做的是js部分的语言切换，也就是说js部分有涉及到语言的，当切换语言的时候都要变成切换的那个语言。具体做法是我们利用了cookie，把选择的语言存进cookie，然后js去取到cookie，如果没有取到cookie值，就默认使用简体中文，如果有就使用那种语言。然后再加一个键，js文字部分直接用键通过方法去取值，把文字都存在配置的文件里面，这样就可以了。也许你会觉得很抽象，那就用代码来说明一切。

var _language_config = {    "en-US":{        "value":"Hello"    },    "zh-CN":{        "value":"你好"    },    "zh-TW":{        "value":"你好"    }};function getLanguageDesByKey(key) {    var lang = getCookie("HbyCompanyOba.Customer.Language");    if(!lang){        return _language_config["zh-CN"][key];    }    return  _language_config[lang][key];}

这个就是配置文件，那么js部分的有语言的地方我要怎么去替换文字呢

$(function(){    $("#value").html("你好");//没有语言替换前的写法    $("#valueBox").html(getLanguageDesByKey("value"));//语言替换后的写法});

这样就算是可以了，其他的类似于字符串拼接那就用字符串拼接的方式。当然这里并不是最重要，最重要的其实还是要搞清cookie的取值设置的问题。关于这个问题，我们要注意的是1.当我们刚进网站的时候首先要初始化得到语言值  2.设置语言值  3.切换语言的时候把cookie值替换掉    像我们这种项目cookie设置的时间一般设为十年。

// 初始化语言选择initLanguages();
//初始化选择语言function initLanguages() {    sendReq("/home/GetLanguages", null, function (result) {        if (!result || !result.Success) {            return;        }        var lang = getCookie("HbyCompanyOba.Customer.Language");        if (lang == null) {            lang = "zh-CN";            setCookie("HbyCompanyOba.Customer.Language", lang, 24 * 365 * 10);        }        var languages = result.Languages;        $.each(languages, function (index, item) {            if (lang == item.LanguageCulture)            {                $("#langChooseList").append('<li class="hide" data-culture="' + item.LanguageCulture + '"><a class="lan-type" href="javascript:setLanguage(\'' + item.LanguageCulture + '\')"> ' + item.LanguageName + '</a></li>');                $("#langChosed span").text(item.LanguageName);            }            else                $("#langChooseList").append('<li data-culture="' + item.LanguageCulture + '"><a class="lan-type" href="javascript:setLanguage(\'' + item.LanguageCulture + '\')"> ' + item.LanguageName + '</a></li>');        });    });}function setLanguage(langCulture){    setCookie("HbyCompanyOba.Customer.Language", langCulture, 24 * 365 * 10);    window.location.reload();}