Loading...
ttitto avatar ttitto 1153 Точки

[Technical Issue] Javascript Applications - сравнение на начини за генериране на DOM дърво

Колеги с повечко опит в JS,

кой е по-добрият вариант за генериране на някаква DOM структура:


1. Като се създават поделементите един по един, присвояват им се класове, IDта, др. атрибути и се закачат за техния родител:
напр. var myDiv = document.createElement('div');
div.classList.add('someClass');
document.body.appendChild(myDiv);


2. Генерира се HTML код и се подава като innerHTML директно да родителя:
напр. document.body.innerHTML('<div class = "someClass"></div>');

Същия въпрос важи и за генерирането на същото нещо чрез jQuery.

Какви са плюсовете и минусите на двата начина и във vanilla javascript, и в jQuery?

Тагове:
4
JavaScript Applications 19/11/2014 14:31:28
Samuil.Petrow avatar Samuil.Petrow 1550 Точки

Закачане във DocumentFragment и накрая в родител, присъстващ в DOM дървото мисля, че е най-добрият вариант, така че по-скоро 1), но така написано както е в поуста ти постоянно ще престроява дървото и ще забави изпълнението.

3
18/11/2014 22:27:28
ttitto avatar ttitto 1153 Точки

В коментарите под статията има доста противоречиви мнения за бързодействието на DocumentFragment. 

0
Samuil.Petrow avatar Samuil.Petrow 1550 Точки

Мда, добра забележка, но пък и има коментари, които оборват негативните такива - отново с приложени тестове. Като цяло е доста обширно за разнищване в дълбочина.

Послепис: Местя темата, вече си имаме подходящ раздел :)

0
RoYaL avatar RoYaL Trainer 6849 Точки

Предполагам, че първият начин има известен овърхед, тъй като създаваш обекти, които ти се пазят в текущата сесия. Докато при втория - просто пишеш HTML.

Това обаче не е фактор и бих предпочел първия вариант.

Сещам се в момента за една сериозна причина, и тя е ако генерираме атрибутите динамично. В твоя пример такъв проблем няма. Но би имало в:

for (var i = 0; i < 10; i++) {
document.body.innerHTML('<div id="myId' +
((Math.random() * 100) + i) + '"></div>');
}

Ако впоследствие искаш да правиш нещо с тези див-ове ще трябва отново да итерираш около дивовете в боди-то, за да ги извадиш като елементи и да им добавиш примерно клас.

Т.е. когато елементите се генерират с неизвестни атрибути, примерно входни данни, или идват от някаква колекция с атрибути, по-добре да ги изнесеш в предварително създадени обекти, за да имаш контрол над тях, вместо да си усложняваш живота след това с ненормални цикли :) Ако е просто plain html, при който си абсолютно наясно какво добавяш, мисля че е оправдано да се ползва innerHTML()/load()

 

1
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.