h5+js传统项目多语言实现i18n

简介

大体思路是给每个文字标签设置一个自定义属性data-，再通过foreach 循环querySelectorAll获取的有这个属性的标签，标签，通过自定义属性的属性值去语言包中寻找对应的字段，最后通过textContent或者innerText来更新文字内容

实现

准备

en.json

{
    "locale": {
        "en": "English",
        "zh": "chainese"
    },
    "nav": {
        "home": "Home",
        "page1": "About Us",
        "zixun": "zixun"
    }
}

zh.json

{
    "locale": {
        "en": "英",
        "zh": "中"
    },
    "nav": {
        "home": "首页",
        "page1": "关于我们",
        "zixun": "资讯"
    }
}

具体语言包内容根据需要自行添加

看下我的目录结构

html

先看html
在标签中这样设置一个自定义属性data-translate=“nav.home”

 <li class="nav-system-home active">
         <a href="#" target="_self" data-translate="nav.home">首页</a> 
         <a href="#" target="_self" data-translate="nav.page1">关于我们</a>
  </li>

设置语言包、获取语言包字段

创建一个class类，里面是两个方法：设置语言包、获取语言包字段，
setLanguage：通过传入语言的不同来修改使用的语言包路径，
translate：传入的key是data-translate=""的属性值，通过这个属性值来找到对应的字段

class LanguageManager {

    async setLanguage(language) {
        const filePath = `../css/locale/${language}.json`;
        const response = await fetch(filePath);
        const data = await response.json();
        // console.log(data);
        this.translations = data;
    }

    translate(key) {
        const keyParts = key.split('.');
        const firstPart = keyParts[0]; // 'nav'
        const secondPart = keyParts[1]; // 'home'
        const translation = this.translations[firstPart][secondPart] || this.translations[key];
        return translation;
    }
}

const languageManager = new LanguageManager();

更新dom

function updateTranslations() {
    const elements = document.querySelectorAll('[data-translate]');//获取所有自定义属性为[data-translate]的标签
    elements.forEach(element => {//循环标签
        const key = element.getAttribute('data-translate');//获取data-translate的属性值
        const translation = languageManager.translate(key);//将key传给translate去获取对应的字段内容
        // console.log(123, translation);
        element.textContent = translation;//更新文字内容
    });
}

语言切换

//语言切换将需要设成的语言language传入

function changeLanguage(language) {
    languageManager.setLanguage(language).then(() => {
        updateTranslations();
    });
}

默认语言

//默认语言
function defaultLang() {
    const lang = localStorage.getItem('lang');
    //从本地缓存中获取默认语言，如果缓存中没有就去接口中获取，接口调用失败就用浏览器设置的语言
    // if (!lang) {
    //     fetch('/getdefaultLang').then(res => {
    //         localStorage.setItem('lang', res);
    //         changeLanguage('en')
    //     }).catch(err => {
    //         const browserLanguage = navigator.language || navigator.userLanguage;//获取浏览器默认语言
    //         changeLanguage(browserLanguage)
    //     })
    // } else {
    //     changeLanguage(lang)
    // }

    //测试、设为英文
    changeLanguage('en')
}

语言列表

考虑语言列表是从接口获取的，所以选择语言的select要写成动态渲染。

//语言列表
function getLanguageList() {
  

    //新增select节点
    const addNewlang = (langList) => {
        const langList = ['en', 'zh'];//测试用暂时设置语言列表为 ['en', 'zh']
        const LangUl = document.getElementById('consultation-list');
        // console.log(LangUl);
        langList.forEach((item) => {//foreach语言列表，item为每一项
            var newParagraph = document.createElement('div') //创建一个div节点
            var node = document.createTextNode(item); //创建一个文本节点，文本内容为item
            newParagraph.appendChild(node);    //将文本节点插入刚创建的div节点
            newParagraph.classList.add('consultation-item'); //设置newParagraph节点的class样式
            newParagraph.setAttribute('data-translate', `locale.${item}`) 
             //为newParagraph节点添加data-translate属性，属性值为`locale.${item}`
            console.log(newParagraph);
            LangUl.appendChild(newParagraph);//将newParagraph节点插入到LangUl子节点列表的最后
            newParagraph.onclick = () => {//为newParagraph添加点击切换事件，
                changeLanguage(item)
            }
        });
    }
    addNewlang(langList) //测试
    //从接口中获取语言列表
    // let langList = localStorage.getItem('langList');
    if (!langList) {
        fetch('/#######').then(res => {
            localStorage.setItem('langList', res);
            //然后这里调用addNewlang     addNewlang(res) 
        }).catch(err => {
            const browserLanguage = navigator.language || navigator.userLanguage;//获取浏览器默认语言
            changeLanguage(browserLanguage)//切换语言为浏览器默认语言
        })
    }
}
//为防止找不到dom节点，在dom加载完后再执行获取语言列表和默认语言设置
window.onload = function () {
    getLanguageList()
    defaultLang()
}

locale.js

class LanguageManager {
    constructor() {
        this.translations = {};
        this.cache = new Map(); // 初始化缓存
    }

    async setLanguage(language) {
        // 检查语言文件是否已经在缓存中
        if (this.cache.has(language)) {
            this.translations = this.cache.get(language);
            return;
        }
        const filePath = `../css/locale/${language}.json`;
        try {
            const response = await fetch(filePath);
            if (!response.ok) {
                window.alert('网络似乎开小差了');
            }
            const data = await response.json();
            this.cache.set(language, data);// 将获取到的数据存入缓存
            this.translations = data;// 更新当前的 translations
        } catch (error) {
            window.alert('网络似乎开小差了');
            console.error(`Failed to fetch translation file: ${error}`);
            // 这里可以考虑使用默认语言或其他错误处理策略
        }
    }

    translate(key) {
        const keyParts = key.split('.');
        const firstPart = keyParts[0]; // 'nav'
        const secondPart = keyParts[1]; // 'home'
        const translation = this.translations[firstPart][secondPart] || this.translations[key];
        return translation;
    }
}

const languageManager = new LanguageManager();

function updateTranslations() {
    const elements = document.querySelectorAll('[data-translate]');
    elements.forEach(element => {
        const key = element.getAttribute('data-translate');
        const translation = languageManager.translate(key);
        // console.log(123, translation);
        element.textContent = translation;
    });
}
//语言切换
function changeLanguage(language) {
    languageManager.setLanguage(language).then(() => {
        updateTranslations();
    });
}
//默认语言
function defaultLang() {
    const lang = localStorage.getItem('lang');
    //从本地缓存中获取默认语言，如果缓存中没有就去接口中获取，接口调用失败就用浏览器设置的语言
    // if (!lang) {
    //     fetch('/getdefaultLang').then(res => {
    //         localStorage.setItem('lang', res);
    //         changeLanguage('en')
    //     }).catch(err => {
    //         const browserLanguage = navigator.language || navigator.userLanguage;//获取浏览器默认语言
    //         changeLanguage(browserLanguage)
    //     })
    // } else {
    //     changeLanguage(lang)
    // }

    //测试、设为英文
    changeLanguage('en')
}


//语言列表
function getLanguageList() {
    const langList = ['en', 'zh'];

    //新增select节点
    const addNewlang = (langList) => {
        const LangUl = document.getElementById('consultation-list');
        // console.log(LangUl);
        langList.forEach((item) => {
            var newParagraph = document.createElement('div')
            var node = document.createTextNode(item);
            newParagraph.appendChild(node);
            newParagraph.classList.add('consultation-item');
            newParagraph.setAttribute('data-translate', `locale.${item}`)
            console.log(newParagraph);
            LangUl.appendChild(newParagraph);
            newParagraph.onclick = () => {
                changeLanguage(item)
            }
        });
    }
    addNewlang(langList)
    //从接口中获取语言列表
    // let langList = localStorage.getItem('langList');
    if (!langList) {
        fetch('/#######').then(res => {
            localStorage.setItem('langList', res);
            //然后这里调用addNewlang
        }).catch(err => {
            const browserLanguage = navigator.language || navigator.userLanguage;//获取浏览器默认语言
            changeLanguage(browserLanguage)
        })
    }

}


window.onload = function () {
    getLanguageList()
    defaultLang()
}