Javascript翻译脚本改进

Question

我已经阅读了几篇关于这个主题的文章和一些像this one 这样的 SO 问题，但没有什么真正适合我的情况。

所以基本上我正在创建简单的单页应用程序，几乎不涉及任何 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"
    }
};

在 translator.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');
});

通常一切都按预期工作，我唯一担心的是我这里有两个全局变量，我不确定该怎么做。我觉得我可以用更高效、更漂亮的方式来完成这个翻译。

所以问题是 - 拥有这两个全局变量是否可以，我是否可以以更漂亮的方式实现与上述代码相同的效果？

Answer 1

只需将两者都封装在一个脚本中的 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，则可以改用<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';
}