文档 桥接模式

桥接模式

在添加 i1n 的类型安全自动补全、AI 翻译和文件管理的同时,保留您现有的 i18n 库。

什么是桥接模式?

桥接模式允许您保留现有的 i18n 库(i18next, react-intl, vue-i18n, ngx-translate, i18n-js),同时使用 i1n 来管理翻译文件、AI 翻译和类型生成。

使用 registerI1n() 以单行连接您的库。i1n t() 函数会在后台委托给您的库,但具有严格的类型检查以及来自生成的 i1n.d.ts 的完整 IDE 自动完成功能。

通过库设置

每库一行。调用 registerI1n() 并传入您库的翻译函数即可完成 — i1n 会处理其余部分。请参阅下面的代码示例以了解您的具体设置。

vue-i18n: registerI1n((key, params) => i18n.global.t(key, params)). ngx-translate (Angular): registerI1n((key, params) => translateService.instant(key, params)). i18n-js (React Native): registerI1n((key, params) => i18n.t(key, params)).

自定义函数:registerI1n((key, params) => yourLookup(key, params))。桥接模式适用于任何接受键和可选参数并返回字符串的函数。

工作原理

调用 registerI1n() 后,对 i1n t() 函数的每次调用都会转发到您注册的回调。i1n 在此基础上增加了类型安全 — 如果某个键在您的翻译文件中不存在,TypeScript 会在编译时捕获该错误。

i1n 继续管理翻译文件(推送、拉取、AI 翻译)并生成 i1n.d.ts。您的库继续处理运行时加载、插值和复数形式。两个系统无缝协同工作。

何时使用桥接模式与独立模式

当您有一个现有项目,其中已包含成熟的 i18n 库,并且不希望重写应用程序代码时,请使用桥接模式。桥接模式提供了一条零成本的迁移路径 — вы можете采用 i1n 的基础设施,而无需更改任何组件。

对新项目或希望完全替换现有 i18n 库的项目,请使用独立模式。i1n SDK 可原生处理初始化、插值、复数化和语言环境切换,无需任何外部依赖。

i18next (React, Next.js, Remix)
import { registerI1n } from 'i1n'
import i18next from 'i18next'

registerI1n((key, params) => i18next.t(key, params))
react-intl (FormatJS)
import { registerI1n } from 'i1n'
import { useIntl } from 'react-intl'

const intl = useIntl()
registerI1n((key, params) => intl.formatMessage({ id: key }, params))
vue-i18n
import { registerI1n } from 'i1n'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
registerI1n((key, params) => t(key, params))
ngx-translate (Angular)
import { registerI1n } from 'i1n'
import { TranslateService } from '@ngx-translate/core'

constructor(private translate: TranslateService) {
  registerI1n((key, params) => this.translate.instant(key, params))
}
i18n-js (React Native)
import { registerI1n } from 'i1n'
import { I18n } from 'i18n-js'

const i18n = new I18n(translations)
registerI1n((key, params) => i18n.t(key, params))
Custom function
import { registerI1n } from 'i1n'

// Works with any function: (key, params?) => string
registerI1n((key, params) => myCustomLookup(key, params))

相关