i18n-dom - 浏览器中最省心的多语言工具

发表于 2022-04-27

介绍 i18n-dom 是如何使用魔法拯救开发者于繁琐的多语言开发中

为什么需要 i18n-dom

做业务开发的时候，如果需要支持多语言是一件另人很头疼的事情。

假设现在已有一份英文的交互设计稿，此时因为多语言的文案还没给到，开发一般只有两种选择（假设多语言用的是 i18next）：

1、在开发的页面中直接使用英文文案进，等多语言文案准备好了再使用多语言工具进行替换
2、直接在代码中使用多语言工具，并在多语言配置文件中先用自己翻译的文本占位，等多语言文案准备好了再统一替换配置中的多语言文本即可

无论哪一种方案，都会有漫长的替换、校对过程，很让人暴躁，即使编写脚本自动完成部分工作，但是主要的问题是一定会存在的，就是文档结构中会被插入大量的 i18n.t(xxxx) 或者 <span data-lang="xxxx"></span>

这些传统的方案都有以下问题：

需要为不同的文案定义一个唯一的 key，以在代码中引用
多语言工具对代码的侵入程度很高。当代码出问题时，甚至没办法根据页面显示的内容快速定位到对应的代码位置

总而言之，一个多语言功能，大大的降低了写代码的体验，这就是 i18n-dom 想要解决的问题

i18n-dom 的魔法

我们先直接看一下用 i18n-dom 实现多语言功能，是多么的轻松愉快

首先，你需要提供一些数据供 I18nDOM 实例化，主要提供多语言文案 resource 就可以了

import I18nDOM from "i18n-dom";

const i18n = new I18nDOM({
  htmlLanguage: "en", // The language in which the web page is written
  resource: {
    en: ["Hello World!", "Second paragraph of text"],
    zh: ["你好世界！", "第二段文本"],
    ru: ["Привет, мир!", "Второй абзац текста"],
  },
});

可以看到，在 resource 中并不需要定义额外的 key，只需要按照相同的顺序提供不同的语言的文案就可以了。因为该结构非常简单且不需要 key，所以可以使用脚本轻松的由其他多语言的文件生成。

初始换之后，如果没有特殊需求，就什么都不用做了！像下面这个例子：

<p>Hello World!</p>
<p><span></span></p>
<script>
  i18n.changeLanguage("zh"); // Change the language to zh
  document.querySelector("span").innerText = "Second paragraph of text"; // "第二段文本" will automatically appear on the page!
</script>

在代码中的直接使用英文文本开发就可以了，工具会在后台使用魔法将其显示为对应的语言！