Dataset

首先介绍一下向标签中添加自定义数据的方法。

可以通过添加data-foo属性在HTML的标签上，如：

<div id="id" data-foo="bar"></div>

然后就可以在JS里通过DOM.dataset.foo获取到属性的内容了：

const dom = document.getElementById('id')
console.log(dom.dataset)
console.log(dom.dataset.foo)

输出：

Chrome输出

特别地，如果在HTML中添加如data-foo-bar的属性，在JS中需要通过camelCase的形式访问到值：

dom.dataset.fooBar

JSON资源文件

我的想法是把所有的文本都写到json文件里，之后进行文本填充操作。

  • assets/zh.json

    {
    "msg": "你好"
}

  • assets/en.json

    {
    "msg": "Hello"
}

JS逻辑

首先要获取到我们配置好的json，这里为了方便直接把navigator.language截取了。

而实际应用中可能需要配置简体zh-CN和繁体zh-TW，至于文件名怎么取就不是本文重点了。

async function getI18N() {
    const lang = navigator.language.substring(0, 2)
    
    const res = await fetch(`assets/${lang}.json`)

    return await res.json()
}

getI18N().then(data => {
    document.querySelectorAll('*[data-i18n]').forEach(el => {
        el.innerText = data[el.dataset.i18n]
    }
})

再接下来就只需要在标签里添加data-i18n属性并且把键对应配置完毕即可。

示例数据的键为msg，那么这里需要这么写：

<h1 data-i18n="msg"></h1>

完工!