项目心路

前端国际化系列：（二）获取语言环境

    上一篇介绍文案替换，文案替换完成了，但是具体要展示中文or英文，对前端来说，需要处理两种情景。

1、显示英文html

    我们有的产品线，做了前后端分离，html由前端部署，这样的话，在上午已经介绍，我们使用代码，生成了英文版的html，跟后台协调了一下，根据产品线的不同，分为两种方式部署。

  • 1、与中文界面使用同一个域名，只多了一层 en/目录
    我们界面嵌入的css、js地址，都是cdn上的绝对地址，这个直接上传到固定地址就OK了，不需要改动太多。
    如果有相对地址的css、js，那就需要在相对地址上，多一层../了
  • 2、英文系统使用单独的域名 如之前某个系统的中文版域名为xx.lecloud.com，现在部署一个英文版，域名为usxx.lecloud.com
    这样也需要具体分析css、js地址的依赖，绝对地址就不用管了，相对地址的话，需要把全部的静态文件都新部署一遍。

2、JS动态显示

    英文版、中文版，都需要嵌入我们相同的JS，所以，要获取当前的语言环境，我写了一个LCTU的工具类，暴露了一个getLanguage的全局方法，用于获取语言版本。
    因为产品线众多，而且一开始没拍板如何部署英文的系统，我做了四种方式的兼容

  • 根据域名判断
    我们的北美英文版的域名，是以us开头的，我只需要判断location.hostname.indexOf('us') === 0即可
  • 根据参数判断
    如http://xx.lecloud.com是中文版，http://xx.lecloud.com?language=en为英文版，我拿到这个参数即可
  • 根据cookie判断
    取当前域的languagekey值的cookie，无或者值为zh-CN的话，是中文版，en就是英文版了
  • 根据url路径判断
    如http://xx.lecloud.com是中文版,http://xx.lecloud.com/en是英文文版

    具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
getLanguage: function() {
	// return "en";
	var langArr = ["zh_cn", "en", "zh_tw"];
	//获取当前的语言环境
	//0.取域名首位数，北美的为us
	//1.根据url关键字获取,关键字：language
	//2.根据cookie获取，关键字:language
	//3.根据url路径获取
	//4.保留功能，通过浏览器语言版本选择
	var language = "zh_cn",
		temp = "";
	if (window.location.hostname.indexOf("us") === 0) {
		language = "en";
	} else if (temp = getQueryString("language")) {
		if (langArr.indexOf(temp) > -1) {
			language = temp;
		}
	} else if (temp = getCookieByKey("language")) {
		if (langArr.indexOf(temp) > -1) {
			language = temp;
		}
	} else {
		language = getLanguageByPath();
	}
	return language;
	……

    考虑到cookie、path、参数的操作风险性与商业价值，后来大部分的业务线，使用了北美单独的域名，以us开头的，OK，那就是使用第一种方法就OK了，不过，我还保留了通过url关键字获取的方式，用于测试环境上调试中英文版本。

3、自定义的域名

    上面的代码，本来以为可以处理全部的情况，后来发现还少了一种情景，我们有一个saas的业务线，客户可以使用我们的saas系统，配置自己的网站，也可以解析到自己的域名上，这样的话，以上四种方式，一下子都不适合了。
    没办法，我跟后台协商了一下，使用saas英文业务线生成的网站，会在每个界面上，存一个local_area的全局变量，简单粗暴的解决了问题。

1
2
3
if(typeof local_area == "string" && local_area == "us"){
	……
}

4、多考虑的

    后来使用着国外的vpn逛天猫的时候，发现天猫直接跳转到了国际版，这个根据dns判断一下，倒是很简单。

分享
返回顶部