Рефакторинг кода JavaScript, объединение в одну функцию

Question

Рефакторинг кода JavaScript, объединение в одну функцию

Рейтинг: 0Ответов: 1Опубликовано: 25.05.2023

я начинающий разработчик, пишу для себя словарь по английскому языку, смысл такой, есть слово при клике на него оно переводится на русский, при повторном клике переводится обратно на английский. Написал 100 слов, код масштабировался на 700 строк, понимаю, что можно оптимизировать,только не знаю как.

HTML

<li><a id="link" href="#">Class</a></li>
<li><a id="link1" href="#">Variable</a></li>

JS

 //получаем идентификатор элемента
var ziroWord = document.getElementById('link');

//вешаем на него событие
ziroWord.onclick = function () {
    //производим какие-то действия
    if (this.innerHTML=='Class') this.innerHTML = 'Класс';
    else this.innerHTML = 'Class';
    //предотвращаем переход по ссылке href
    return false;
}

var oneWord = document.getElementById('link1');
oneWord.onclick = function () {
    if (this.innerHTML == 'Variable') this.innerHTML = 'Переменная';
    else this.innerHTML = 'Variable';
    return false;
}

javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Написал 100 слов, код масштабировался на 700 строк, понимаю, что можно оптимизировать, только не знаю как

Можно использовать вариант, что я давал по ссылке...

Делаем словарь для неких "ключей"
Указываем нужные ключи своим элементам

Поскольку у тебя и элементы "переводятся" по раздельности, придется еще каждому указать текущий язык...

Далее все можно сделать одним обработчиком, который можно повесить на единого родителя.

const dct = {
  class: {en: 'Class', ru: 'Класс'},
  variable: {en: 'Variable', ru: 'Переменная'}
}
document.addEventListener('click', e => {
  const o = e.target
  const k = o.dataset.key
  if (!k) return
  e.preventDefault()
  let l = o.dataset.lang
  l = l === 'en' ? 'ru' : 'en'
  o.dataset.lang = l
  o.textContent = dct[k][l]
})

<ul>
  <li><a data-key="class" data-lang='en' href="#">Class</a></li>
  <li><a data-key="variable" data-lang='en' href="#">Variable</a></li>
</ul>

Рефакторинг кода JavaScript, объединение в одну функцию

Ответы