前端国际化小结
转移地址:http://www.jianshu.com/p/874ee9e541b1
近期在做国际化的改造,做了相应的调研,简单做下项目前端国际化的小结
国际化可以分为前端国际化和后端国际化,也可以是前后端组合的国际化
后端多为spring国际化,这里不做展开,百度一下到处都是
常见型
常见的前端国际化方法步骤如下:(原理)
- 定义国际化配置
- 根据环境读取配置
- 将配置展现在页面上
展开说:
定义国际化配置:
定义的方式有多种,多以文件的形式单独保存,如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暂无插件
插件的基本原理都是做字典查询键值匹配替换。
以上三步任意组合都可以完成国际化的任务,只是效率各有不同,可根据项目做自由组合
优缺点
优点:
- 语言包形式统一管理
- 工程较大时节省资源
- 对于支持多语言项目复用性强
缺点:
- 配置文件配置复杂
- 以键值对的形式定位容易产生混乱
- 可读性差
- 后期维护时定位比较负责易出错
不常见型
不常见的方法步骤如下:(原理)
- 将国际化配置分散在各个文件中如:
<a class='i18n'>登录|登入|Sign in|サインイン|로그인</a>
- 根据环境确定国际化标记:
cn:0, tw:1, en:2, jp:3, kr:4 - 根据国际化标记显示相应信息
全局搜索class=i18n的元素,保留相应信息
优缺点
优点:
- 可读性强
- 易定位
- 配置简单
- 内容较少时效率高
缺点:
- 项目工程量大后会浪费资源
- 随着支持的语言种类繁多后不容易维护
- 复用性差且耦合度高
极端通用型
使用google翻译插件
https://support.google.com/translate/#googtrans/en/zh-CN&topic=7011755
适用项目:
内容庞大且不在乎准确性,时效性强,更新频繁,支持世界语言
实例:
阿里国际卖场 https://www.aliexpress.com/
项目结合:
- 以异步code形式传递信息的,适合做前端国际化
- 同步模板式的项目,可使用后端做国际化,如果想轻后端,也可以做前端国际化或者前后端结合做国际化
两个例子
- 普通异步项目:
nej/jquery项目
如果仅需要支持中文和英文,建议使用第二种形式,如果需要支持多国语言,建议使用第一种形式,code错误码可以添加标记定向到国际版错误信息 - 组件式项目:
Regular/Angular/React…项目
因为数据双向绑定和组件化的特点,可以将国际化版本做在组件里, 通过标记继承控制版本的显示,利用路由系统解析hash值,如:
‘#/cn/s1’ : 中文页面S1
‘#/s1’ : 页面S1
‘#/en/s1’ : 英文页面S1