Javascript 翻译脚本改进

Question

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

所以基本上我正在创建简单的 one-page 应用程序，几乎没有任何 javascript 涉及。我唯一需要 JS 的地方就是这个翻译。一般来说，在 JS 中创建一些脚本来翻译对我来说不是问题，所以我这样做了：

我正在将两个文件导入我的 index.html:

<script src="js/text.js"></script>
<script src="js/translator.js"></script>

在 text.js 中，我有常量 object 包含网站要显示的文本：

// 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中，我object负责检查哪种语言并填充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 翻译脚本改进

Javascript translation script improvement

javascript

translation