Dataset {#Dataset}

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

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

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

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

|---------------|---------------------------------------------------------------------------------------------------------| | 1 2 3 | const dom = document.getElementById('id') console.log(dom.dataset) console.log(dom.dataset.foo) |

输出：

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

|-----------|----------------------------| | 1 | dom.dataset.fooBar |

JSON资源文件 {#JSON资源文件}

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

• assets/zh.json

  |---------------|-------------------------| | 1 2 3 | { "msg": "你好" } |

• assets/en.json

  |---------------|----------------------------| | 1 2 3 | { "msg": "Hello" } |

JS逻辑 {#JS逻辑}

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

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

|---------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 | 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，那么这里需要这么写：

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

完工!