【整理】前端国际化小结

转自：https://www.cnblogs.com/homehtml/p/12209027.html

近期在做国际化的改造，做了相应的调研，简单做下项目前端国际化的小结

国际化可以分为前端国际化和后端国际化，也可以是前后端组合的国际化
后端多为spring国际化，这里不做展开，百度一下到处都是

常见型

常见的前端国际化方法步骤如下：（原理）

1. 定义国际化配置
2. 根据环境读取配置
3. 将配置展现在页面上

展开说：

1. 定义国际化配置：
   定义的方式有多种，多以文件的形式单独保存，如json，js，properties 等，
   并且将配置信息以键值对的形式保存备用
2. 根据环境读取配置：
   所谓环境说白了就是用户选择的标志，形式如下：
   hash型：#cn; #en; #us
   saerch型：?lan=cn; ?lan=en; ?lan=us
   url/meta型： 163.com/cn/; 163.com/en
   缓存型：缓存形式多为cookie，默认cn，用户重新设定后将缓存更新
3. 将配置展现在页面上：
   使用三方插件或者自己编写插件将配置信息映射到页面上，
   可以使用，juery.i18n.js 或 react、angular国际化插件等regular暂无插件
   插件的基本原理都是做字典查询键值匹配替换。

   以上三步任意组合都可以完成国际化的任务，只是效率各有不同，可根据项目做自由组合

优缺点

优点：

1. 语言包形式统一管理
2. 工程较大时节省资源
3. 对于支持多语言项目复用性强

缺点：

1. 配置文件配置复杂
2. 以键值对的形式定位容易产生混乱
3. 可读性差
4. 后期维护时定位比较负责易出错

不常见型

不常见的方法步骤如下：（原理）

1. 将国际化配置分散在各个文件中如：

   `<a class='i18n'>登录|登入|Sign in|サインイン|로그인</a>`

2. 根据环境确定国际化标记：

   cn:0, tw:1, en:2, jp:3, kr:4

3. 根据国际化标记显示相应信息

   全局搜索class=i18n的元素，保留相应信息
   

优缺点

优点：

1. 可读性强
2. 易定位
3. 配置简单
4. 内容较少时效率高

缺点：

1. 项目工程量大后会浪费资源
2. 随着支持的语言种类繁多后不容易维护
3. 复用性差且耦合度高

极端通用型

使用google翻译插件

https://support.google.com/tr...

适用项目：

内容庞大且不在乎准确性，时效性强，更新频繁，支持世界语言

实例：

阿里国际卖场 https://www.aliexpress.com/

项目结合：

1. 以异步code形式传递信息的，适合做前端国际化
2. 同步模板式的项目，可使用后端做国际化，如果想轻后端，也可以做前端国际化或者前后端结合做国际化

两个例子

1. 普通异步项目：

   **nej/jquery项目**
   如果仅需要支持中文和英文，建议使用第二种形式，如果需要支持多国语言，建议使用第一种形式，code错误码可以添加标记定向到国际版错误信息

2. 组件式项目：

   **Regular/Angular/React...项目**
   因为数据双向绑定和组件化的特点，可以将国际化版本做在组件里，    通过标记继承控制版本的显示，利用路由系统解析hash值，如： 
       '#/cn/s1' : 中文页面S1
       '#/s1' : 页面S1
       '#/en/s1' : 英文页面S1