Как правильно написать повторяющийся код?

Question

[uRoot]

Есть простенькая реализация Шифра Цезаря:
Как написать повторяющийся код так, чтобы его было как можно меньше? Как бы вы это сделали? Без использования jQuery!

Answer 1

[Vitaliy Orlov]

я бы вынес в отдельный класс или объект функции и использовал их, типа того

let Caesar = {
  encrypt: function(str){... return out;},
  decrypt: function(str){... return out;}
}

document.getElementById('in__сaesar').oninput = function() {
    document.getElementById('out__caesar').innerHTML = Caesar.encrypt(this.value);
}

Comments

[uRoot]

а остальной код, тело функции, без изменений?

[Vitaliy Orlov]

CryNet, ага, сократил бы малёха, в соответствии с максимально поддерживаемой версией ES. Например: стрелочные функции; вместо index, писал бы i; вместо var, везде let. Но, это мелочи - текущая реализация функций хорошо читается, так что к ней претензий у меня нет :) Поизвращаться, наверное можно, завернув цикл в одну конструкцию в стиле perl-а, но мне нравится когда код хорошо читается.

[uRoot]

Vitaliy Orlov, я понял, спасибо

Answer 2

[0xD34F]

const caesar = (str, offset) => Array
  .from(str, n => String.fromCharCode(n.charCodeAt(0) + offset))
  .join('');

const caesarTemplate = (title, offset) => `
  <div class="caesar">
    <textarea class="caesar-input" data-offset="${offset}"></textarea>
    <hr>
    <p>${title}: <span class="caesar-output"></span></p>
  </div>
`;

document.addEventListener('input', ({ target: t }) => {
  if (t.matches('.caesar-input')) {
    const output = t.closest('.caesar').querySelector('.caesar-output');
    output.innerHTML = caesar(t.value, +t.dataset.offset);
  }
});

document.body.insertAdjacentHTML('beforeend', [
  [        'Шифр',  3 ],
  [ 'Расшифровка', -3 ],
].map(n => caesarTemplate(...n)).join(''));

Answer 3

[Антон Спирин]

Можно создать билдер и передавать нужные параметры.