需求目标
html页面中实现国际化思路
1.确定需要改变内容的dom节点
2.定义国际化json文件
3.通过innerText赋值改变节点内容
部分html
<body>
<div i18n="a">姓名</div>
<div>
<span i18n="b">班级</span>
</div>
<div i18n="c">成绩</div>
<select name="" id="select">
<option value="en">en</option>
<option value="cn">cn</option>
</select>
</body>实现方法
1.先给dom中需要动态切换的文本设置自定义属性i18n="属性值"（这里的属性值对应json文件中的键值）
2.获取json文件（这里采用的是原生ajax的方式获取）
var i18n = 'cn';
var lang = {};
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status == 200) {
let response = xhr.responseText;
lang = JSON.parse(response);
//遍历获取dom设置值
getI18nDom(document.body);
}
};
xhr.open('get', './index.json');
xhr.send();
3.遍历dom找出需要设置国际化的dom节点,设置值
function getI18n(key) {
return lang[i18n][key] || '';
}
function getI18nDom(el) {
if (el.childElementCount == 0) {
if (el.getAttribute('i18n')) {
el.innerText = getI18n(el.getAttribute('i18n'));
}
} else {
[].forEach.call(el.children, (item) => {
getI18nDom(item);
});
}
}
4.通过监听select的change事件改变
document.getElementById('select').onchange = function(val) {
i18n = val.target.value;
getI18nDom(body);
};
JSON文件
{
"en": { "a": "name", "b": "class", "c": "score", "en": "English", "cn": "Chinese" },
"cn": { "a": "姓名", "b": "班级", "c": "成绩", "en": "英语", "cn": "中文" }
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。