Как лучше генерировать элементы на странице?

Question

[lyrion]

Добрый день!

Создаю админку на нативном JS. Встала задача, при неизменном интерфейсе отображать различные элементы. И вот вопрос: Как это лучше делать?
1. Создавать полностью с использованием JS (через createDocumentFragment(), аппенды на div и присвоение стилией и классов)
2. Создание через innerHTML и в JS просто прописать вложенный HTML код
3. Прописать все сразу в HTML и просто скрывать элементы через display = "none" (не хотелось бы использовать такой подход, чтобы не засорять DOM, да и доступ через отладчик к элементам всегда будет)

Пожалуйста, аргументируйте свое мнение(выигрыш по производительности, чистоте кода и пр.)
Заранее спасибо ;-)

Comments

[Сергей Сергей]

Можно ещё сымитировать текстовую консоль - пишешь команды, получаешь портянки текста без лишнего хтмл.

Answer 1

[Алексей]

Первый вариант совершенно не читабелен и ему есть альтернатива в виде верстки js (2 вариант), но с ним проще генерировать virtual Dom (привет реакт)

Второй вариант удобен тем что есть возможность сразу и наглядно подставлять данные и генерировать блоки верстки, при этом не засоряя Dom ни лишними блоками ни лишними слушателями. Сложнее создать virtual Dom, т.к нужно много парсить

Третий вариант Засоряет все и вся блоками, слушателями и вообще медленный

Comments

[lyrion]

Про не читаемость первого согласен, потому и задался таким вопросом.
Что значит парусить?
И что делать с элементами после использования, удалять их из DOM через remove?

[Алексей]

lyrion, не просто удалять, а чистить все слушатели, подписки и т.д, чтоб не возникли утечки памяти. По поводу парусить, автонабор подменил— имел в виду парсить

[lyrion]

Алексей, спасибо за развернутый ответ

[Rerurk]

почем не читабелен?? пишите в TS объектно , все читаемо , все красиво! более того от статики уйдете в динамику

[Алексей]

Rerurk, Вы серьезно считаете что это

const picHolder = document.getElementById("picHolder");
const img = document.createElement("img");
img.setAttribute('src', `images/stone-${number}.jpg`)
img.setAttribute('alt', 'pic');
picHolder.appendChild(img);

читабельнее и нагляднее этого?

const template = `
  <img src='images/stone-${number}.jpg' alt='pic'>
`;

А если надо сгенерировать блок с кучей вложенных блоков, которые не являются отдельными сущностями, а не просто картинку добавить. Представляете насколько вырастает сложность восприятия. Не зря же в react jsx придумали. Верстку визуально воспринимать легче

И где в моем примере отсутствует динамика?

[Rerurk]

Алексей, теперь создайте 152 таких объекта с помощью innerhtml, причем, , что бы внутри были разные html элементы с разным напонением

[Алексей]

Rerurk,

Пример конечно утрирован, но принцип понятен. Теперь бы хотелось увидеть от вас пример решения такой же задачи

const arrComponents = [];

for (let i = 0; i < 152; i++) {
  arrComponents.push(`
    <div class="child-block-${i}">Text-${i}</div>
  `);
}

const template = (child) => `
  <div class="block">${child}</div>
`;

const arrBlock = arrComponents.map(child => template(child));
... Вставляем в Dom

[Rerurk]

на скорую руку асбтрактно TS
interface User {
img:string;
name:string;
age:number;
}

class ShowUser{
main:HTMLDivElement;
img:HTMLImageElement;
name:HTMLSpanElement;
age:HTMLSpanElement;
width:number;
height:number;
user:User;
constructor(width:number,height:number,user:User) {
this.width=width;
this.height=height;
}
private createUserView (width:number,h):HTMLDivElement{
this.main=document.createElement('div');
this.main.style.width=this.width+'px';
this.main.style.width=this.height+'px';

....... отписываем HTMLImageElement....span... и прочее
document.body.appendChild(this.main)
}
}
let arr:Array=Array<>(user1,user2.......userN)
arr.forEach((user:User)=>{
let showUser:ShowUser=new ShowUser(100,200,user)
});

и что тут не читаемо ,?

[Rerurk]

причем вам и знатть потом не надо как оно там будет окрываться. Просто даете ему высоту ширину и user , все

[Алексей]

Rerurk, Форматирование конечно пи***ц). Это выглядит понятно пока там нету большого числа вложенных элементов. В примере простой див, а вот если это компонент, части которого нет смысла выносить в отдельные компоненты, но их много. Разве это читабельно будет? очень сомневаюсь

[Rerurk]

Алексей, хорошо вы гений я идиот, return null

Answer 2

[Programiker]

js