javascript - Javascript翻译脚本改进
问题描述
我已经阅读了几篇关于这个主题的文章和几个像这样的问题,但没有什么真正适合我的情况。
所以基本上我正在创建简单的单页应用程序,几乎不涉及任何 javascript。我唯一需要 JS 的地方就是这个翻译。一般来说,在 JS 中创建一些脚本来翻译对我来说不是问题,所以我这样做了:
我将两个文件导入我的 index.html:
<script src="js/text.js"></script>
<script src="js/translator.js"></script>
在text.js 中,我有一个常量对象,其中包含要显示的网站文本:
// Global constant "text" accessible in translator.js file
const text = {
PL: {
aboutHeading: "Kilka słów o mnie"
},
ENG: {
aboutHeading: "Few words about me"
}
};
在translate.js中,我有一个对象负责检查哪种语言并填充 div/标题/任何文本:
// global translator object
const translator = {
currentLanguage: '',
checkLanguage() {
switch (window.navigator.language) {
case 'pl':
case 'pl-PL': {
this.currentLanguage = 'pl';
break;
}
case 'en': {
this.currentLanguage = 'eng';
break;
}
default: {
this.currentLanguage = 'eng';
break;
}
}
//alert(this.currentLanguage);
//alert(window.navigator.language);
},
fillText(lang) {
if(lang === 'pl') {
document.getElementById('few-words-about-me-header').innerHTML = text.PL.aboutHeading;
alert('inserted pl');
}
if(lang === 'eng') {
document.getElementById('few-words-about-me-header').innerHTML = text.ENG.aboutHeading;
alert('inserted eng');
}
},
};
translator.checkLanguage();
translator.fillText(translator.currentLanguage);
document.getElementById('polish-flag').addEventListener('click', () => {
translator.fillText('pl');
});
document.getElementById('english-flag').addEventListener('click', () => {
translator.fillText('eng');
});
通常一切都按预期工作,我唯一担心的是我这里有两个全局变量,我不确定该怎么做。我觉得我可以用更高效、更漂亮的方式进行翻译。
所以问题是 - 拥有这两个全局变量是否可以,并且我是否可以以更漂亮的方式实现与上述代码相同的效果?
解决方案
只需将两者封装在一个脚本中的 IIFE 中,就不会污染全局命名空间。
// main.js
(() => {
const text = {
PL: {
aboutHeading: "Kilka słów o mnie"
},
ENG: {
aboutHeading: "Few words about me"
}
};
const translator = {
currentLanguage: '',
checkLanguage() {
switch (window.navigator.language) {
case 'pl':
case 'pl-PL':
{
this.currentLanguage = 'p';
break;
}
case 'en':
{
this.currentLanguage = 'eng';
break;
}
default:
{
this.currentLanguage = 'eng';
break;
}
}
//alert(this.currentLanguage);
//alert(window.navigator.language);
},
fillText(lang) {
if (lang === 'pl') {
document.getElementById('few-words-about-me-header').innerHTML = text.PL.aboutHeading;
alert('inserted pl');
}
if (lang === 'eng') {
document.getElementById('few-words-about-me-header').innerHTML = text.ENG.aboutHeading;
alert('inserted eng');
}
},
};
translator.checkLanguage();
translator.fillText(translator.currentLanguage);
document.getElementById('polish-flag').addEventListener('click', () => {
translator.fillText('pl');
});
document.getElementById('english-flag').addEventListener('click', () => {
translator.fillText('eng');
});
})();
如果text
由于某种原因必须动态创建,则可以通过 using 来避免在那里创建全局变量<script type="application/json">
,它是可解析的,但不会自动添加到全局命名空间中。例如:
<div></div>
<script type="application/json">{"foo": "foo", "bar": "bar"}</script>
<script>
(() => {
const text = JSON.parse(document.querySelector('script[type="application/json"]').textContent);
document.querySelector('div').textContent = text.foo + ' / ' + text.bar;
})();
</script>
您还可以使用对象查找来简化currentLanguage
设置。switch
与替代方案相比,陈述通常过于冗长且容易出错:
checkLanguage() {
const languages = {
pl: ['pl', 'pl-PL'],
en: ['eng'],
};
const navigatorLanguage = window.navigator.language;
const foundLanguageObj = Object.entries(languages)
.find(([setting, arr]) => arr.includes(navigatorLanguage));
this.currentLanguage = foundLanguageObj ? foundLanguageObj[0] : 'eng';
}
推荐阅读
- android - 如何从流构建器获取所有数据作为地图或列表?
- java - 聊天消息保存在 firebase 数据库中,但无法在 listview 中查看
- python-sphinx - 将版本动态插入标题
- php - 如何保护 svg 文件?
- django - 多个搜索字段未按预期工作
- google-analytics - 是否有一个选项来跟踪(目标)ajax表单,复选框可以逐屏工作?
- android - 当我只有一个可选的上下文时,如何创建一个意图?
- java - 为什么我在推送到 Git Android Studio 时出错?
- .net - ODP.Net Unmanged x64 导致未处理的异常
- python - 尝试为 paramiko SSHClient 指定密钥,错误:无法反序列化密钥数据