Как правильнее формировать страницу?

Question

[alex-1917]

Как правильнее формировать страницу, в частности подвал, функция getFooter(items) вызывается внутри аджакс-запроса, items - получаемый с сервера массив текстовых строк типа "Все права защищены. 2019 ©" и т.д., вот два варианта:

var app_box = document.getElementById('app_box');
function getFooter(items) {
   var footer = document.createElement('div');
   footer.className = 'footer';

   var footer_info = '<div class="footer_info">'+items.info+'</div>';	
   var footer_copyright = '<div class="footer_copyright">'+items.copyright+'</div>';

   footer.insertAdjacentHTML('afterbegin',footer_info);
   footer.insertAdjacentHTML('beforeend',footer_copyright);

   app_box.appendChild(footer);
}

var app_box = document.getElementById('app_box');
function getFooter(items) {
   var footer = document.createElement('div');
   footer.className = 'footer';
	
   var footer_info= document.createElement('div');
   footer_info.className = 'footer_info';
   footer_info.textContent = items.info;

   var footer_copyright = document.createElement('div');
   footer_copyright.className = 'footer_copyright';
   footer_copyright.textContent = items.copyright;

   footer.appendChild(footer_info);
   footer.appendChild(footer_copyright );
   app_box.appendChild(footer);
}

Comments

[Евгений]

var в 2019?

[Kovalsky]

Евгений, вы знаете, а вот я даже jQuery юзаю в коммерческой разработке, и ничо, латексный костюм не ношу.

Answer 1

[Антон Неверов]

Правильнее в 2019 году использовать let вместо var. Ну и там ещё стрелочные функции уже есть и всё такое.
Что касается кода - второй проще, понятнее и безопаснее.

Если волнует скорость - замеры проведите сами. Ставлю, что второй вариант будет быстрее.

Comments

[alex-1917]

let - согласен
но как тут помогут стрелки???

[Антон Неверов]

const getFooter = items => {
  //Тело функции
};

Answer 2

[Афанасий Захаров]

ИМХО, лучший вариант - шаблонизация этого дела.
Можно даже не пользоваться никакими pug'ами, просто строковые шаблоны.
Что-то вроде

function createFooter(data){
  return `
    <div class="footer">
      <div class="footer_info">${data.items.info}</div>
      <div class="footer_copyright" >${data.items.copyright}</div>
    </div> 
  `
}

И результат выполнения функции просто вставить в страницу.