Можно ли ещё сократить код?

Question

[Speakermen]

Вроде код дублируется значит в теории его можно ещё сократить или вынести в функцию?

titleElement.appendChild(
  create({
    el: "span",
    className: "currentTime",
    text: "00:00",
  })
);
titleElement.appendChild(
  create({
    el: "span",
    className: "duration",
    text: "00:00",
  })
);

Answer 1

[Сергей delphinpro]

Использовать цикл

const els = [
    ["author", "Author - "],
    ["name", "Name"],
    ["currentTime", "00:00"],
    ["duration", "00:00"],
];

els.forEach(el => {
    titleElement.appendChild(
        create({
            el: "span",
            className: el[0],
            text: el[1],
        })
    );
})

2

const els = [
    { el: "span", className: "author",      text: "Author - " },
    { el: "span", className: "name",        text: "Name" },
    { el: "span", className: "currentTime", text: "00:00" },
    { el: "span", className: "duration",    text: "00:00" },
];

els.forEach( el => titleElement.appendChild( create(el) ) );

Update

А вообще это разнородные элементы. Зачем их по отдельности генерировать. Пусть будет один единственный элемент (компонент) - title. Gecnm у него будет шаблон, и пусть вы будете в этот шаблон передавать данные

function renderTitle (d) {
 return `
  <div class="title">
    <span class="currentTime">${d.time}</span>
    <span class="author">${d.author}</span> –
    <span class="name">${d.name}</span>
    <span class="duration">${d.duration}</span>
  </div>
  `;
}
xxx.insertAdjacentHTML('beforeend', renderTitle({
  author:   'Author - ',
  name:     'Name',
  time:     '00:00',
  duration: '00:00',
}));

Comments

[Speakermen]

Вау спс

[Speakermen]

Норм так код сократил благодаря вам и рекурсия пригодилась))) Да так проще единственный элемент (компонент) Хочется почувствовать разницу между custom web component, Виртуальный DOM в формате array (Многомерного массива), jsx и как можно синхронизировать виртуальный dom с реальным

Как то экспериментировал

Web Components Crash Course

Answer 2

[0xD34F]

Сделать массив:

const arr = [
  [      'author', 'Author - ' ],
  [        'name',      'Name' ],
  [ 'currentTime',     '00:00' ],
  [    'duration',     '00:00' ],
];

Который надо что? - правильно, перебрать, так или иначе:

arr.forEach(n => {
  titleElement.appendChild(create({
    el: 'span',
    className: n[0],
    text: n[1],
  }));
});

// или

for (const [ className, text ] of arr) {
  titleElement.insertBefore(create({
    el: 'span',
    className,
    text,
  }), null);
}

// или

for (let i = 0; i < arr.length; i++) {
  titleElement.insertAdjacentElement('beforeend', create({
    el: 'span',
    className: arr[i][0],
    text: arr[i][1],
  }));
}

// или

titleElement.replaceChildren(...(function get(i, n = arr[i]) {
  return n
    ? [ create({ el: 'span', className: n[0], text: n[1] }), ...get(-~i) ]
    : [];
})(0));

А вообще, непонятно, зачем все эти странные функции, и без них отлично получается:

const title = document.createElement('div');
title.id = 'title';
title.append(...arr.map(([ className, innerText ]) =>
  Object.assign(document.createElement('span'), { className, innerText })
));
document.getElementById('root').append(title);

// или

document.querySelector('#root').innerHTML = `
  <div id="title">${arr.map(n => `
    <span class="${n[0]}">${n[1]}</span>`).join('')}
  </div>
`;

Comments

[Speakermen]

Спасибо огромное Вам!