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';
}

Javascript翻译脚本改进

1 个答案: