Испытание [21/21]

Курсы JavaScript в браузере
1

Прошел задание по дефолту, но… решил выделиться и сделать рефакторинг, не очень такой . Заметил частый повтор вызова метода cardItem.appendChild( ), что порождало создание не нужных переменных, мнение со дна. Решил вопрос так:

  1. создал массив var cardsArr = [];
  2. добавлял в массив элементы при помощи метода push
  3. при помощи цикла for (...) {...} произвёл перебор массива с последующим добавлением элементов на страницу
Код 
var cardList = document.querySelector('.goods'); 

var makeCard = function (tags, className, text) { 
  var card = document.createElement(tags); 
  card.classList.add(className); 
  if (text) { 
  card.textContent = text; 
  } 
  return card; 
}; 

var fillCard = function ( obj ) { 
  var availability = 'good--available'; 
  
  if ( !obj.inStock ) { 
    availability = 'good--unavailable'; 
  } 
  
  var cardItem = makeCard( 'li', 'good' ); 
  cardItem.classList.add( availability );
  
  var cardsArr = [];
  
  cardsArr.push( makeCard( 'h2', 'good__description', obj.text ) );
  
  cardsArr.push( cardImg = makeCard( 'img', 'good__image' ) ); 
  cardImg.src = obj.imgUrl; 
  cardImg.alt = obj.text;
  
  cardsArr.push( makeCard( 'p', 'good__price', obj.price + '₽/кг' ) ); 
  
  if ( obj.isHit ) {
    cardItem.classList.add( 'good--hit' );
    cardsArr.push(makeCard( 'p','good__special-offer',obj.specialOffer ) );
  } 
  
  for ( var i = 0; i < cardsArr.length; i++ ) {
    cardItem.appendChild( cardsArr[i] );
  }
  return cardItem; 
}; 
for ( var i = 0; i < cardsData.length; i++ ) {
  var card = fillCard( cardsData[i] );
  cardList.appendChild( card );
}

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

3 лайка