国际化

前言

什么是国际化

国际化这个英文单词为：Internationalization，又称 i18n，“i”为单词的第一个字母，“18”为“i”和“n”之间单词的个数，而“n”代表这个单词的最后一个字母。在计算机领域，国际化是指设计能够适应各种区域和语言环境的软件的过程。

为什么要国际化

每个团队都希望自己的产品能够让来自全世界的用户都能使用，那么，就必须让自己的产品走上国际化的路线。如何能让世界各地的用户都能较为顺利使用我们的产品？首要解决的最大问题，就是语言的显示。为用户提供多种语言，让用户能够减少障碍去解到自己的产品。这是国际化的第一步，也是最重要的一步。

实施对象

国际化实施的对象为：组件，页面，导航，面包屑，货币，时间。 其中组件由组件库(Ant-Design)提供国际化支持，其余由前端框架（Angular/Vue/React）提供国际化支持。

优秀实践

为了便于语言条目的维护，从以下三个条目整理了优秀实践。

• 目录结构
• 语言包划分
• 语言条目的组织

目录结构

一个层次分明的目录结构，能让我们快速定位到需要查找的语言条目。

src
│─  i18n
│   ├─  en_GB                            // 英文 语言包
│   ├─  ja_JP                            // 日文 语言包
│   ├─  zh_CN                            // 中文 语言包
│   │   ├─ index.ts                      // 中文语言包 配置文件
│   │   ├─ common.json                   // 共通部分语言文件，用于存放全局共通的语言条目
│   │   ├─ modules                       // 业务模块语言包目录，用于存放各个业务模块语言文件
│   │        └─ user.json                // 用户管理模块语言文件
│   │        └─ statistic.json           // 统计模块语言文件
│   │        └─ <业务模块名>.json          // 其他业务模块 语言文件

• common.json： 用于存放全局共通的语言条目
• modules： 业务模块语言包目录，用于存放各个业务模块语言文件
• <业务模块名>.json： 用于存放业务模块中的语言条目

语言包划分

方案	灵活性	维护成本
方案一：每个页面单独一个语言文件	高	高
方案二：每个业务模块一个语言文件 + 共通语言文件	中	低
方案三：整个应用一个语言文件	低	高

基于灵活性与维护成本的综合考量，我们选择方案二。

语言条目的组织

语言条目的组织分为两个部分，common 部分和模块部分。

common.json

用于存放全局共通的语言条目，我们总结了一些经常会使用到的操作、提示、分页参数以供参考。

类别	常用条目(key)	常用条目(value)
操作(actions)	new	新建
	add	添加
	delete	删除
	edit	编辑
	search	查询
	refresh	刷新
	detail	详情
	confirm	确认
	cancel	取消
	save	保存
	submit	提交
	export	导出
	import	导入
	next	下一步
	previous	上一步
提示信息(messages)	success	操作成功
	failed	操作失败
其他(others)	pagination	共 0 条，每页显示 1 条

具体结构如下8

{
  // 操作
  "actions": {
    "new": "新建",
    "add": "添加"
  },
  // 提示信息
  "messages": {
    "success": "操作成功",
    "delete": "删除成功"
  },
  // 其他
  "others": {
    "pagination": "共 { 0 } 条，每页显示 { 1 } 条"
  }
}

<业务模块名>.json

在<业务模块名>.json中，分为两部分：common 部分和页面部分。

common部分

用于存储业务模块内的共通部分，我们从项目中总结了一些常用的类别：

• columns // 列表项
• labels // 表单项
• extra // 表单提示
• status // 状态
• actions // 操作

页面部分

在实际项目中，一个模块下往往会有多个页面，我们的优秀实践是按照页面划分，其中共通的部分采用在语言文件内引用。

比较项目	页面上直接使用	在语言文件内引用
便利性	高	低
维护性	低	高

基于使用上的便利性和后期的可维护性，我们选择了共通的部分在语言文件内引用的方式。

语言条目命名规范

• 列表项（columns）的命名，应与columns-options.ts中的key相同。
• 其他条目命名方法需要：见名知意、驼峰命名法、精简表达，以订单号为例：orderNo。

具体结构如下

{
  // common部分
  "common": {
    // 列表项
    "columns": {
      "time": "操作时间",
      "orderNo": "订单编号",
      "...": "..."
    },
    // 表单项
    "labels": {},
    // 状态
    "status": {},
    // 提示         
    "extra": {},
    // 操作
    "action": {}     
  },
  // 页面部分
  "list": {               // 列表页    
    "columns": {
      "time": "@:modules.demo.common.columns.time",
      "orderNo": "@:modules.demo.common.columns.orderNo",
      "...": "..."
    }
  },            
  "detail": {},           // 详情页
  "add": {},              // 添加页
  "edit": {}              // 编辑页
}

安装与配置

• Vue
• React