Как можно оптимизировать этот код?

Question

[Andrew Kolomiets]

for(let key in data){
        out += '<section class="cart">';
        out += '<div class="section_title">'
            out += `<h2 class="nameTovar nameTovar${key}">${data[key].name}</h2>`;
            out += `<div class="sec_t_img sec_t_img${key}"></div>`
        out += '</div>'    
            out += `<img src="../img/camera/${data[key].img}" class="img_tovar pict${key}" alt="">`;
            out += `<p class="cost"><span class="costSpan${key}">${data[key].cost}</span><span> руб. / </span><small><span class="valueSpan${key}">${data[key].value} </span><span>${data[key].valueWord}</span></small></p>`;
            out += `<button class="btn_buy buy${key}">Купить</button>`;
            out += `<div class="bought bought${key}">`;
                out += `<form action="../php/mail.php" class="form form${key}" method="POST">`;
                    out += '<input type="text" autocomplete="off" name="fio" class="fio" required placeholder="Введите Ф.И.О">';
                    out += '<input type="text" name="phone_mail" class="phone" required placeholder="Введите номер телефона или почту">';
                    out += `<input type="text" name="tovar" value="${data[key].name}" class="tovar tovar${key}" readonly>`;
                    out += `<input type="number" autocomplete="off" name="value" pattern="^[ 0-9]+$" class="value${key}" required placeholder="Введите количество в ${data[key].valueWord}">`;
                    out += `<input type="text" readonly name="itog" class="itog itog${key}" placeholder="Итог">`;
                    out += '<input type="submit" value="Заказать" class="btn_zakazat">';
                out += '</form>';
                out += `<button class="otmena otmena${key}">Отмена</button>`;
            out += '</div>';
        out += '</section>';
    }

Можно ли добиться оптимизации этого кода на чистом JS? Если будет удобнее на фреймворке, то каком?

Comments

[Роман]

Вот вариант, тоже такое себе, но всяко лучше вашего

for(let key in data){
  out += `<section class="cart">
<div class="section_title"
<h2 class="nameTovar nameTovar${key}">${data[key].name}</h2>
<div class="sec_t_img sec_t_img${key}"></div
</div>'  
<img src="../img/camera/${data[key].img}" class="img_tovar pict${key}" alt="">
<p class="cost"><span class="costSpan${key}">${data[key].cost}</span><span> руб. / </span><small><span class="valueSpan${key}">${data[key].value} </span><span>${data[key].valueWord}</span></small></p>
<button class="btn_buy buy${key}">Купить</button>
<div class="bought bought${key}">
<form action="../php/mail.php" class="form form${key}" method="POST">
<input type="text" autocomplete="off" name="fio" class="fio" required placeholder="Введите Ф.И.О">
<input type="text" name="phone_mail" class="phone" required placeholder="Введите номер телефона или почту">
<input type="text" name="tovar" value="${data[key].name}" class="tovar tovar${key}" readonly>
<input type="number" autocomplete="off" name="value" pattern="^[ 0-9]+$" class="value${key}" required placeholder="Введите количество в ${data[key].valueWord}">
<input type="text" readonly name="itog" class="itog itog${key}" placeholder="Итог">
<input type="submit" value="Заказать" class="btn_zakazat">
</form>
<button class="otmena otmena${key}">Отмена</button>
</div>
</section>`
}

[Andrew Kolomiets]

Роман, само собой лучше, но пока оставил в таком сыром виде, чтобы всё видеть и не потерять, так удобнее. Интересно было бы узнать, как обстоит вопрос с написанием этого с помощью фреймов.

[WbICHA]

Andrew Kolomiets, легко и просто, в них хтмл в строке не пишется.

Answer 1

[d'Ivan]

Открой для себя шаблонизаторы.

Answer 2

[Дмитрий Беляев]

Я бы так сделал если вопрос в оптимизациях стоит:
https://svelte.dev/repl/3debe8a39c404be8978c0b2116...