非单页的静态文件如何实现多语言切换
2021-02-11 15:17
标签：export 参数 配置文件 fun asi 语言切换 || col plugin 是嵌套在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来配置英语和印地语对外暴露变量 3.2.在webpack中配置翻译的全局变量 3.3.在需要翻译的元素上面加上属性配置 3.4.在公用js中处理需要翻译的部分的公用方法 非单页的静态文件如何实现多语言切换 标签：export 参数 配置文件 fun asi 语言切换 || col plugin 原文地址：https://www.cnblogs.com/chun321/p/12736976.html一：项目描述：
二：实现原理：
三：具体代码实现：
// en.js
exports._lg = {
name:"english", //语言名称
common:{ //公用部分
success:"Success",
fail:"Fail",
},
index:{ //首页翻译配置
title:"Home"，
。。。。。
}
}
。。。
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) //印地语
}))
。。。
p data-lg=‘lg_downline_myInvite‘>My invite:span class="parent_name">span>p>
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"));
...
})
上一篇：《Java并发编程实战》第一章