技术成就梦想

web系统国际化方案 转 web系统国际化方案 xiaomin0322



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")
  • 1

UTC转北京时间:

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

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
  • 2
  • 3

其他问题:

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

这里写图片描述

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

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

 

 

https://blog.csdn.net/rth362147773/article/details/73698632

http://taobaofed.org/blog/2016/03/21/internationalization/