@winers
Начинающий программист

Как не писать повторяющийся код в HTML, а автоматизировать создание кода на JS?

Здравствуйте, в общем делаю для портфолио видеохостинг и образовалась такая проблема -> блоки повторяются и их может быть на сайте 1000 и больше - это получится очень много одинакового кода.
Вот сам блок
<div class="card" style="width: 16rem;">
            <a href="#theModal" class="btn btn-link"
              data-remote="https://ссылканавидео"
              data-toggle="modal" data-target="#theModal">
              <img src="img/sk-1.jpg" class="card-poster" alt="image">
            </a>
            <div class="card-body">
              <h3 class="card-title">Сказка о Царе Салтане</h3>
              <p class="card-text">Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана 
              напомнят о том, что любовь, верности и сила духа всегда побеждают!</p>
            </div>
          </div>

получается отличаются только ссылкой,заголовком и описанием. Как можно не повторять весь этот код каждый раз при добавлении нового видео на сайт?
  • Вопрос задан
  • 429 просмотров
Решения вопроса 2
Seasle
@Seasle Куратор тега JavaScript
Помог - отметь решением \( ゚ヮ゚)/
const createCard = ({ title, subTitle, src, poster }) => {
	const template = document.createElement('section');
	template.innerHTML = `
		<div class="card" style="width: 16rem;">
		  <a href="#theModal" class="btn btn-link"
			 data-remote="${src}"
			 data-toggle="modal" data-target="#theModal">
			 <img src="${poster}" class="card-poster" alt="image">
		  </a>
		  <div class="card-body">
			 <h3 class="card-title">${title}</h3>
			 <p class="card-text">${subTitle}</p>
		  </div>
		</div>
	`;

	return template.children[0];
};

document.body.append(createCard({
	title: 'Сказка о Царе Салтане',
	subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
	src: 'http://ссылка на видео',
	poster: 'img/sk-1.jpg'
}));

Таким образом можно перебирать коллекцию, передавать в функцию createCard объект, на выходе получать уже HTML элемент и добавлять в DOM его.
Это самый простой способ, можно сделать более продвинутый, через template. В данном случае будет чуть больше приготовлений, также необходимо будет позаботится о механизме вставки данных.
И третий вариант - использовать фреймворк, Vue например.
Ответ написан
sniggering_deus
@sniggering_deus
Frontend Engineer & Fullstack Designer
Самый обычный пример:

const projects = [
{
name: "имя",
poster: "ссылка на изображение",
style: "жанр/стиль"
},
{
name: "имя",
poster: "ссылка на изображение",
style: "жанр/стиль"
},
{
name: "имя",
poster: "ссылка на изображение",
style: "жанр/стиль"
},
{
name: "имя",
poster: "ссылка на изображение",
style: "жанр/стиль"
}
];

const app = document.getElementById("app");

projects.forEach(project => {
const name = `${project.name}`;
const poster = `${project.poster}`;
const style = `${project.style}`;

const projectEl = document.createElement("div");
projectEl.classList.add("game-collection");

projectEl.innerHTML = `
<div class="game-collection__section">
<div class="game-collection__poster">
<img class="image" src="${poster}"/>
</div>
</div> 
<div class="game-collection__section">
<div class="game-collection__information">
<ul class="game-collection__information__datalist">
<li class="game-collection__information__datalist__slot">
<h5 class="game-collection__information__game-name">${name}</h5>
</li>
<li class="game-collection__information__datalist__slot">
<h5 class="game-collection__information__game-style">${style}</h5>
</li>
</ul>
</div>
</div>`;

app.appendChild(projectEl);
});


Ответ написан
Пригласить эксперта
Ответы на вопрос 3
like-a-boss
@like-a-boss
признайся, тебя тянет на код мужика
Для этого во всех языках программирования придумали цикл. Он же loop. Он же залу..фор, вайл, форич и т.п.
Ответ написан
@AleksRap
Не забудьте при этом сделать lazy load иначе при одновременной генерации 1000 блоков все может намертво полечь
Ответ написан
делать через цикл на сервере. Выводить html через js не очень хорошая идея в данном случае, так как SEO пострадает. А SEO я полагаю тут нужно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 ₽
eGamings Воронеж
от 80 000 до 110 000 ₽
Aviakassa.ru Севастополь
от 80 000 до 200 000 ₽