前端国际化：一种巧妙的内容多语言实现思路
Bobi.ink
2023-10-31
除了程序本身支持多语言，内容多语言也是国际化的重要部分。
本文就简单介绍一种改造现有程序以支持内容多语言的思路。我们希望对于前/后端都是最小改造，尽量不侵入已有的业务代码和底层存储、向下兼容，不影响现有的业务。
内容输入
说一说我的思路
在未改造之前，我们的输入框输入什么就会在数据库里面保存什么。
现在运营需要对该字段内容扩展其他语言的支持，他可以点击切换语言悬浮窗
当这个字段有了其他语言的内容后， 前端会对该字段存储内容进行升级，保存的结构大概如下：
代码语言：javascript复制__i18n_what_ever__(Hello, 1b9d6bcd-bbfd)
^
一个特殊的前缀
^
原本的内容
^
UUIDUUID: 全局唯一的 ID, 可以前端生成(可以使用 uuid 库)， 或者向后端请求生成。 这个 唯一 ID 是一个哈希表的 key, 用来关联存储该字段多语言内容。__i18n_what_ever__()这个命名没有实际的意义，只是为了避免冲突，方便正则检索和替换。下文会讲到- Hello 是默认语言的内容。
这样做的好处是可以维持原有的数据库搜索功能，对字段的大小影响也不大。后端基本不需要改造。
生成 UUID、存储多语言内容这个过程，是不是有点像文件上传？
至于前端的实现呢，可以编写一个包装组件，包装已有的 Input、Textarea、富文本组件。
代码示例：
代码语言：javascript复制<I18nSwitcher target={Input} />
// 或者
<I18nSwitcher>
<Input placeholder="Enter some thing" />
</I18nSwitcher>I18nSwitcher 包装组件会拦截被包装控件的 value/onChange Props, 控制它的回显和输入。
为了避免产生不必要的垃圾数据，比如你新建操作，后面又取消了。我们可以再设计一个 I18nSwictherProvider 组件，负责缓存子孙待保存的状态，最后在保存时刻统一提交。伪代码示例：
const {Provider, flush} = useI18nSwitcherProvider()
const handleSave = async () => {
await validate() // 表单验证
await flush() // 保存缓存状态
await saveForm() // 保存表单
}
return (<Provider>
<Form>...</Form>
</Provider>)内容回显
内容回显则使用拦截器方案，可以在前端实现，也可以在后端实现。后端直出性能和体验都会好很多
- 忽略机制。默认所有接口都会被拦截替换，但是我们前端在内容编辑时需要进行回显和切换，因此部分接口前端需要显式标记为跳过替换，比如在 API 请求的 URL 中添加特殊的查询字符串、或者添加特殊的 Header 来实现 。
- 源语言：即默认语言。因为
__i18n_what_ever__(Hello, 1b9d6bcd-bbfd)直接内联的就是默认语言的内容了，所以在替换时可以直接跳过查找的过程
