一个简单的国际化Javascript翻译工具

原创已于 2022-05-06 23:35:24 修改 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2022-05-06 23:32:45 首次发布

JavaScript 同时被 3 个专栏收录

6 篇文章

订阅专栏

React

3 篇文章

订阅专栏

面试

3 篇文章

订阅专栏

intl-hmessage是一个JavaScript框架，配合style-i18n-loader，用于实现国际化语言转换。它基于intl-messageformat库，提供Lang和Message两个类，分别处理语言包获取和参数转换。Lang利用navigator.language获取语言并监听变化，Message负责转换。对于不同框架，如Vue和Angular，可以直接显示转换后的文本，而React则需手动创建虚拟DOM。项目已开源在GitHub。

📖阅读分享

我的人生就像在白夜里走路。— 《白夜行》 [日] 高野和明

简介

intl-hmessage是为style-i18n-loader所配套的JavaScript框架，提供转换国际化语言的功能。

底层使用intl-messageformat来封装功能。

实现

整体实现了两个类，一个是Lang，一个是Message

Lang: 通过插件的方式获取当前语言包，并监听语言变化，然后通知Message

这里默认只提供浏览器通用的方法, navigator.language 获取语言包和 window.onlanguagechange 监听语言变化

Message: 保存每个语言包，然后通过intl-messageformat类库来处理参数转换的问题。

//例如:
top: Top{num}
message.get('top', { num: 3 }) // Top3

由于返回的只是string类型的文字，对于vue和angular来说可以有v-html和innerHtml的方法去设置转换成node节点。但对于react来说，需要手动传入方法去创建虚拟DOM，所以需要在构造函数的时候传入创建React.createElement，然后通过dangerouslySetInnerHTML来让react转换成虚拟DOM后进行diff比较，然后通过getHtml去获取对应的语言包。

Lang.use(DefaultPlugin);

const lang = new Lang("en");

const new Message(
  {
    metas: {
      en: {
        t1: "<p>test</p>",
      },
      zh: {
        t1: "<p>测试</p>",
      },
    },
  },
  lang,
  React.createElement // pass it!!!
);

function App() {
  return <>{intl.getHtml("t1")}</>;
}
// 这里就会显示 p标签包含test

github地址：GitHub - MNISHoward/intl-hmessage

style-i18n-loader文章地址