【整理】前端国际化小结
转自：https://www.cnblogs.com/homehtml/p/12209027.html
近期在做国际化的改造，做了相应的调研，简单做下项目前端国际化的小结
国际化可以分为前端国际化和后端国际化，也可以是前后端组合的国际化
后端多为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/tr...
适用项目：
内容庞大且不在乎准确性，时效性强，更新频繁，支持世界语言
实例：
阿里国际卖场 https://www.aliexpress.com/
项目结合：
- 以异步code形式传递信息的，适合做前端国际化
- 同步模板式的项目，可使用后端做国际化，如果想轻后端，也可以做前端国际化或者前后端结合做国际化
两个例子
-
普通异步项目：
**nej/jquery项目** 如果仅需要支持中文和英文，建议使用第二种形式，如果需要支持多国语言，建议使用第一种形式，code错误码可以添加标记定向到国际版错误信息 -
组件式项目：
**Regular/Angular/React...项目** 因为数据双向绑定和组件化的特点，可以将国际化版本做在组件里， 通过标记继承控制版本的显示，利用路由系统解析hash值，如： '#/cn/s1' : 中文页面S1 '#/s1' : 页面S1 '#/en/s1' : 英文页面S1
