简单版前端页面国际化

需求目标

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": "中文" }
}
[![](https://img.javascriptcn.com/e92d46e177fd4dceb015aef980a06b7d) ](/u/maomin)

关注作者

推荐阅读
![Planets](https://img.javascriptcn.com/55fa04769b85831b56a5917c68852651.png)
原文链接:segmentfault.com

上一篇:前端常用简单的一堆小东西整理
下一篇:常见轮播图实现效果

相关推荐

  • 🚩四年前端带你理解路由懒加载的原理

    前言 说起路由懒加载,大家很快就知道怎么实现它,但是问到路由懒加载的原理,怕有一部分小伙伴是一头雾水了吧。下面带大家一起去理解路由懒加载的原理。 路由懒加载也可以叫做路由组件懒加载,最常用的是通过im...

    1 个月前
  • 🔥手写大厂前端知识点源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    4 个月前
  • 🔥前端面试大厂手写源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    3 个月前
  • (详解)从浏览器输入 URL 到页面展示过程

    引言 对于面试常问的从浏览器输入 URL 到页面渲染过程发生了什么?,我想大家都或多或少能说出一二。但是,其实这个问题很有深度,而你是否回答的有深度,在很大程度上会影响到面试官对你的印象。

    3 个月前
  • (立下flag)每日10道前端面试题-15 关于【高级技巧】十问

    (/public/upload/4dc64bf14f4bd714fcd87e98b6a10373) 第一问:安全类型检测——typeof和instanceof 区别以及缺陷,以及解决方案 这两...

    2 个月前
  • (本人)2019前端校招经历

    我是一个想要找前端工作的妹纸,最近电话面了挺多企业,在每次面试中都会发现自己的不足或者没涉及到的方面,一边被拒一边学习新知识。想要在这里记录、分享前端校招遇到的问题,希望每一次都有提升,下一次不会再犯...

    2 年前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 目录: 磨刀篇开发环境搭建 私人管家包管理器 待续 点击查看源网页(/public/upload/7b9b054b364e1627547...

    1 个月前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 目录: 磨刀篇开发环境搭建 私人管家包管理器 待续 点击查看源网页(/public/upload/fde96d7941fadecf7f3...

    2 个月前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 点击查看源网页(/public/upload/4b3364dbda7cb152b15a01d33da483ed) 包管理器 在很久很久...

    2 个月前
  • (初级前端)面试如何写出一个满意的深拷贝

    前言 已经有很多关于深拷贝与浅拷贝的文章,为什么自己还要写一遍呢💯 ❝ 学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景。你不一定能看到别人看到的风景,体会到别人的心情。

    9 天前

官方社区

扫码加入 JavaScript 社区