【整理】前端国际化小结

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

国际化能够分为前端国际化和后端国际化，也能够是先后端组合的国际化
后端多为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