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(Defa
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
