Robust 第 017 期:彻底解决前端国际化和本地化问题

我在多次节目中都提到,国际化应该早做,在系统设计之初就应该设计好,避免后续需要上国际化时,导致系统大改。那么,对于前端项目而言,国际化都要解决那些问题,具体实施时要考虑那些因素呢?本期聊一聊前端国际化问题。

在线收听

网易云音乐:点击播放

喜马拉雅:点击播放

你还可以在苹果自带的podcast应用中搜“Robust”找到我们的节目收听。

捐赠支持

求打赏🙇如果你觉得 Robust 这样一档技术类的谈话节目还不错,希望我继续做下去,不妨打赏支持。。

内容大纲

一、概念
国际化:产品层面,同一产品,将在不同国家市场推广运营。技术层面,要在一套系统中,能够让产品在不同国家运行,同时解决不同国家对产品的不同需要。前端层面,同一套代码能够实现多语言,同时预留不同国家定制的能力。
本地化:为不同地区文化的特殊需要在视觉上、操作体验上、运营商进行不同呈现。
关系,国际化是本地化的基础,本地化是产品实现国际化的具体落实。国际化一般是前期工作,主要是系统整体层面能够提供本地化的能力。本地化一般是当产品在具体地区开拓市场时的工作,主要是在前期系统预留的扩展能力基础上,根据地区文化或特定国情制定看上去独特(本质上还是一套系统)的产品。举个例子,腾讯有很多出海业务,在产品系统层面,是提供了实施本地化的能力,但是具体到某个国家实施时,需要单独靠本地团队根据本地情况进行深度开发。举个例子,东南亚国家,在日期格式、货币符号、颜色喜好上,都和中国不一样,比如中国人喜欢红色蓝色,但是泰国马来西亚地区可能更喜欢绿色,爱尔兰国庆节也是绿色为主题色,但在中国,绿色显然又是不好的颜色。
二、前端国际化和本地化
从前端技术层面而言,其实,我们只能解决国际化本地化中的部分问题,单纯靠前端,是无法解决全部问题的,比如不同地区的CDN怎么去部署,这不是靠单纯前端可以解决的。那么,前端可以解决哪些问题呢?实际上,在前端实际开发中,你可以简单粗暴这么理解,国际化就是支持多语言,本地化就是支持根据当地习惯格式化数字、日期、货币等文本。
1. 语言包
  • 怎么写语言包比较好?
  • 如何加载语言包比较合理?(同步异步)
  • 关于语言包工作模式的设想(csv->json)
  • 语言包中的占位符(插值)
2. 语言切换
  • 直接通过脚本进行切换,还是通过url跳转到另一个语言的站点?
  • 重新渲染问题
  • 自动根据浏览器判断语言(html[lang] navigator.language || navigator.browserLanguage)
3. 日期/货币/数字分隔符
  • 902 300   (法国),或   902.300   (德国),又或者   902,300   (美国)
  • locale 的前半部分表示语言,通常由 2 或 3 位小写字母组成,符合 ISO 639
  • locale 的后半部分表示地区,由符合 ISO 3166标准的 2 或 3 位大写字母,或符合   UN M.49   标准的 3 位数字组成。
  • 用浏览器内置的Intl接口,不需要自己去写一大堆格式化逻辑
4. 几种市面上最流行的国际化方案
  • i18next
  • Intl封装
  • vue-i18n
  • react-intl, react-i18next
  • angular-translate
三、其他前端国际化问题
1. React SSR 怎么国际化?
  • 根据请求来源判断访问者当地语言 (Accept-Language 或 IP 地址)
2. 普通第三方库怎么国际化?
  • 静态常量的多语言问题
3. 本地化时区问题(包含夏令时问题)
  • 存储UTC-0+Z,使用时再根据实际使用者的时区转回来
4. 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 字体变化等等
  • 参考 https://segmentfault.com/a/1190000022549455 这篇文章
5. 谷歌翻译插件带来的问题
  • 由于谷歌翻译插件会在替换文本时修改标签(DOM结构)会导致vue、react这种基于virtual dom的框架产生问题

2020-07-12 111

为价值买单

本文价值1.11RMB