Улучшение скрипта перевода Javascript

Question

Я прочитал несколько статей на эту тему и несколько ТАК вопросов, как этот , но в моей ситуации ничего не подходит.

Так что, в основном, я создаю простое одностраничное приложение почти без участия 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"
    }
};

В translationator.js У меня есть объект, отвечающий за проверку того, какой язык и заполнение разделов / заголовков / любого текста:

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