非单页的静态文件如何实现多语言切换

一：项目描述：

是嵌套在app里面和web项目的一些静态公用页面，相互之前没有什么关联，通过地址栏来language来切换页面的语言

二：实现原理：

1.如何区分需要展示什么语言？

通过地址栏的language参数的值来展示不同语言。

2.通过单独的语言配置文件js来配置不同的语言，然后把多个文件的值都作为webpack设置的全局变量，在js中可以根据需要来展示不同的语言配置。

3.通过 document.createDocumentFragment( ) 创建文档片段，来替换需要翻译的dom，然后都替换后，统一放入dom里面一起展示。

4.在需要翻译的页面的元素上加上属性  data-lg=‘lg_downline_leaderboard‘，来指定需要翻译的值，例如前面那个属性需要翻译的是 _lg.downline.leaderboard

三：具体代码实现：

3.1.根目录下创建lang文件夹，里面新建 en.js 和 yd.js来配置英语和印地语对外暴露变量

// en.js

exports._lg = {
    name:"english", //语言名称
    common:{ //公用部分
        success:"Success",
        fail:"Fail",
    },
    index:{ //首页翻译配置
        title:"Home"，
        。。。。。
    }
}

3.2.在webpack中配置翻译的全局变量

。。。
const en = require(‘./public/lang/en.js‘)
const yd = require(‘./public/lang/yd.js‘)
。。。

plugins.push(new webpack.DefinePlugin({
        myconfig: JSON.stringify(myconfig.myconfig),
        _lg_en:JSON.stringify(en._lg), //英语
        _lg_yd:JSON.stringify(yd._lg) //印地语
    }))

。。。

3.3.在需要翻译的元素上面加上属性配置

<p data-lg=‘lg_downline_myInvite‘>My invite:<span class="parent_name"></span></p>

3.4.在公用js中处理需要翻译的部分的公用方法

function get_lg(){
    var query_lg =  _common.getQuery("language") || ‘hindin‘;
    var _lgs= query_lg == "english" ? _lg_en : _lg_yd;
    return _lgs
};





export var _common = {
    _lg:{},
    initLang:function(node){ //在需要翻译的页面调用这个方法，传父元素，翻译里面的所有内容
        var query_lg =  _common.getQuery("language") || ‘hindin‘
        var _lg = _common._lg;
        if(query_lg == "english"){
            return false
        }
        var fragments = document.createDocumentFragment();
        var childs = ‘‘
        while(childs=node.firstChild){
            fragments.appendChild(childs)
        }
        [].slice.call(fragments.childNodes).forEach(function(item){
            var nodeAttrs = item.attributes;
            if(item.nodeType == 1 && nodeAttrs && nodeAttrs[‘data-lg‘] && nodeAttrs[‘data-lg‘].value){ //只有dom元素类型且有data-lg属性的需要翻译
                var attr = nodeAttrs[‘data-lg‘].value
                var attr_value = attr.split(‘_‘);
                item.innerHTML = _lg[attr_value[1]][attr_value[2]]
            };
            if (item.childNodes && item.childNodes.length) {
                _common.initLang(item);
            }
        });
        node.appendChild(fragments); //在真是元素里面插入文档片段，完成节点的替换翻译
    },
    getQuery(querystr){
        var search = _common.toTrim(location.search.substr(1))
        search = search.split(‘&‘)
        var hasIndex = search.findIndex((item,index) =>{
            return item.indexOf(querystr + ‘=‘) > -1
        })
        if(hasIndex > -1){
            return search[hasIndex].split(‘=‘)[1]
        }else{
            return ‘‘
        }
    
    },
.....
}
_common[‘_lg‘] = get_lg(); //初始化翻译的语言的配置需要展示哪种

// 在需要的页面调用方法
// index.js
$(function () {
    _common.initLang(document.querySelector("body"));
...
})