需要注意的点
1 .最基本的要求:文字替换.label,placeholder,字段校验提示信息,超链接
2 .页面文案样式处理,不同语言的文字,会有不同的表现,他这个文字都是相同的页签包起来的,这样不是可以在里面根据语言文字来设置样式吗/就不需要玩家自己操心了
3 .日期,数字格式
4 .LTR,RTL,中东国家的语言习惯都是RTL,需要direction,tranfform来解决
5 .图片的国际化
6
基本思路
image.png
1 .提取文案
2 .翻译团队翻译
3 .拿到各国语言版本
4 .每种语言对应一个资源文件
5 .开发人员替换
青铜时代
1 .需要一个工具,能够扫描指定的文件,识别出其中的字符串,然后根据字符串的含义生成变量名,并用变量表达式替换掉原来的字符串,最后能将提取出来的变量自动追加到资源文件中
image.png
黄金时器
1 .前端开发-提取的文案直接上传到"文案配置平台",翻译团队直接在"文案配置平台"上进行文案翻译,前端直接从文案配置平台获取翻译后的最新文案
2 .需求
面向前端开发人员：文案录入、输出
面向翻译团队：文案翻译、发布
其他：文案版本控制
语言切换方式
直接通过脚本进行切换，还是通过url跳转到另一个语言的站点？
重新渲染问题
自动根据浏览器判断语言（html[lang] navigator.language || navigator.browserLanguage）
日期/货币/数字分隔符
902 300 (法国)，或 902.300 (德国)，又或者 902,300 (美国)
locale 的前半部分表示语言，通常由 2 或 3 位小写字母组成，符合 ISO 639
locale 的后半部分表示地区，由符合 ISO 3166标准的 2 或 3 位大写字母，或符合 UN M.49 标准的 3 位数字组成。
用浏览器内置的Intl接口，不需要自己去写一大堆格式化逻辑
CSS 中也可以做国际化
属性选择器[lang=zh]
:lang(zh) 伪类
writing-mode: horizontal-tb(横), vertical-lr(竖从左到右), vertical-rl(竖从右到左)
sideways-lr 和 sideways-rl 侧转
text-orientation: text-combine-upright 合并字符为一个字符
text-emphasis: dot 着重号
font-variant-east-asian 字体变化等等
由于谷歌翻译插件会在替换文本时修改标签（DOM结构）会导致vue、react这种基于virtual dom的框架产生问题
1 .https://www.tangshuang.net/8099.html
翻译网站
语言相关样式
1 .lang .浏览器根据这个来决定是否要翻译网页,谷歌浏览器
2 .<html lang="zh">
3 .<p>The fourth animal in the Chinese Zodiac is Rabbit (<span lang="zh">兔子</span>).</p>
4 .这种思路是一次全部渲染,然后根据lang动态切换,但是这种感觉有点浪费
5 .writing mode
1 .writing-mode:vertical-lr:垂直,从左到右 蒙古文字
2 .writing-mode:vertical-rl:垂直,从右到左.日文,韩文
3 .text-orientaion:改变字符的方向,竖着排列插入横向排列的文字,需要这样转一下
4 .text-combine-upright:将字母压缩到一个字符空间,一个NBA,可以压成在一个字符的空间显示
日期
1 .比如在中文中通常是年月日格式：2019-05-13，英语中日期格式是日月年 13-05-2019
2 .超长语言的处理
3 ..将每个语言打包成一个页面（index-en_US.html,index-fr_FR.html.通常使用在对于性能和白屏时间有要求的网站首页，采用后端渲染根据对应的语言去加载
或者每个语言的差异比较大，不能通过模版语法简单的key-value对应上
4 .同一个页面，根据_locale参数或cookie加载不同的语言包(en_US.json,fr_FR.json)
样式
1 .不同语言长度造成的样式错乱
1 .超出内容宽度之后省略号表示
2 .tips在别的地方显示. 加一个title属性,鼠标hover上去可以看到.
3 .根据字的数量进行缩小
2 .样式错乱解决办法
1 .包裹容器尽量不要写死宽高
2 .溢出隐藏:overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
3 .自适应布局
4 .自动缩小,每一种语言单独定制class,实际渲染的时候使用对应的class
3 .图片替换
时区问题
1 .应该有一个绝对时间吧,时间戳,从时间戳转为本地时间
2 .这种问题一般数据库的时区设置为UTC时间，前端传的数据增加时区的字段，标识自己是哪个时区，后端将这个时间转为UTC时区传给数据库，同时，数据库返回的时间再转为前端需要的时区传递出去，这样会有效避免时区问题
3 .既然我们的数据库已经是当地的时区，无法改变，那一种有效的做法时，登录页面前做个选择时区的页面，用户选择切换到对应的时区，访问对应的数据源。
基础套路
定义国际化配置：
定义的方式有多种，多以文件的形式单独保存，如json，js，properties 等，
并且将配置信息以键值对的形式保存备用
根据环境读取配置：
所谓环境说白了就是用户选择的标志，形式如下：
hash型：#cn; #en; #us
saerch型：?lan=cn; ?lan=en; ?lan=us
url/meta型： 163.com/cn/; 163.com/en
缓存型：缓存形式多为cookie，默认cn，用户重新设定后将缓存更新
将配置展现在页面上：
使用三方插件或者自己编写插件将配置信息映射到页面上，
可以使用，juery.i18n.js 或 react、angular国际化插件等regular暂无插件
插件的基本原理都是做字典查询键值匹配替换。
网友评论