web系统国际化方案

web系统国际化方案

前言

很多时候一个系统发展到一定环境，就需要兼容到各种各样的国家。而这种兼容除了语言，还包含时区，数据，还有服务器速度等。
其实需要考虑的东西也蛮多的，我最近因为做外国服系统，所以有一套成熟的方案。整理出来，让大家借鉴。

---

国际化目的

让不同国家和时区都能正常使用该系统，且体验差别不大，都能正常服务。那具体要做什么我列了一个图。分为系统，服务器，地域文化（词不能直接翻译就行，有时候直译会产生歧义，而且可能违法到当地法律、宗教和文化就不好，建议找当地环境生活过的人翻译为好）。如下：

---

如何交互

客户端端和服务端都要做对语言数据字典，服务端通过当地服务器把语言和时区发给客户端，客户端读取请求响应的字典，而且对时间进行当地时区调整。还要记录用户的语言切换习惯，让用户下一次登录网站的时候，直接显示上次所选的语言。最后当地服务器和国内服务器，做好数据备份，同步好数据。具体方案就这样。

---

如何开发？

1.web-控制篇

核心这套方案需要后端根据当地服务器配置来传递“时区”和“语言”2个字段来控制。我使用window.localStorage.language，window.localStorage.timezone来运用。

---

2.web-语言篇

web端可以使用jQuery.i18n.properties，把文字提取出来做一个语言数据字典。

案例：
在i18n目录下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.i18n.properties-1.0.9.js"></script>
    </head>
     <div id="content"> 
     <div> 
         <label id="label_username"></label> 
         <input type="text" id="username"></input> 
     </div> 
     <div> 
         <label id="label_password"></label> 
         <input type="password" id="password"></input> 
     </div> 
     <input type="button" id="button_login"/> 
 </div>


    <script type="text/javascript">
    $(function(){
        jQuery.i18n.properties({
            name : 'strings', //资源文件名称
            path : '/i18n/', //资源文件路径
            mode : 'map', //用Map的方式使用资源文件中的值
            language : 'zh',
            callback : function() {//加载成功后设置显示内容
                $('#button-login').html($.i18n.prop('Login'));
                $('#label-username').html($.i18n.prop('User Name'));
                $('#label-password').html($.i18n.prop('Password'));
            }
        });
    });
</script>
</html>

---

3.web-时区篇

时区用moment.js，切记存入数据库是utc,客户端展示是当地时区。这样时区问题就可以正常显示。

北京时间转UTC:

moment("2017-04-22 19:50:16").utc().format("YYYY-MM-DD HH:mm:ss")

UTC转北京时间：

moment("2017-04-22 11:50:16").zone(+8).format("YYYY-MM-DD HH:mm:ss")

---

4.web-样式和图片篇

图片我是通过改变语言包css来，全部带文字的图片都放在这个包里面来控制。当然有其他很多方法。我只是提供一种我使用的方案而已。

案例

<link rel = "stylesheet" type="text/css" id="lang" href="zh-cn.css" />

<span on click="javascript:document.getElementById('lang').href = 'en-hk.css'">点我改变语言</span>

---

其他问题：

1.web国际化除了上述问题之外，浏览器兼容要按照当地用户使用习惯来定。

2.由于使用js动态国际化，搜索引擎爬虫只能采集到html文件中的字符串，如果你用英文作为html母语的话，搜索引擎采集到的片段就只能是英文。对于SEO来说是大忌，但这是不可避免的。

3.为了方便操作把字符串全部保存在js文件中，好像这么做不符合web标准。