Что считается лучшей практикой для динамически созданных объектов?

Question

[Muranx]

Здравствуйте!

$d = document;

var o = {
  width: "100px",
  height: "100px",
  backgroundColor: "red"
};

var el = $d.createElement("div");
// el.setAttribute("class", "someDiv");

$d.body.appendChild(el)

for(let k in o){
  el.style[k] = o[k];
};

Пример утрирован, но тем не менее отражает суть вопроса, допустим я создаю какую-нибудь динамическую форму, которую пользователь сможет заполнить не перезагружая страницу, вопросы :

1) что считается лучшей практикой? Прописывать стили в объекте в скрипте (как в коде этого примера), или же всё таки назначать объекту класс (опять же через setAttribute()) и уже в файле style.css прописывать заранее эти стили?

2) Есть ли положительные моменты у того или иного способа , если к примеру использовать пример выше для создания формы, или к примеру создать форму в html заранее, просто с visibility: hidden, ну и собственно чтобы она появлялся по клику?

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

Answer 1

[Alex]

1) что считается лучшей практикой? Прописывать стили в объекте в скрипте (как в коде этого примера), или же всё таки назначать объекту класс (опять же через setAttribute()) и уже в файле style.css прописывать заранее эти стили?

Проставляя стили по одному вы увеличиваете количество перерисовок. Не стоит так делать. Если нужно за один раз изменить несколько свойств то лучше использовать style.cssText. Но там есть свои особенности.

Установка класса, выглядит более выгодной в этом плане. Но тут существует другая проблема: Если все ваши стили собираются в один большой бандл, Это означает, что эти вспомогательные классы и их свойства будут загружаться на клиент даже на тех страницах где они не используются.

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

И как написали ранее, для управления классами есть специальный api

2) Есть ли положительные моменты у того или иного способа , если к примеру использовать пример выше для создания формы, или к примеру создать форму в html заранее, просто с visibility: hidden, ну и собственно чтобы она появлялся по клику?

Тут вы должны опираться на шаблон поведения пользователя на вашем сайте. Форма обязательна? Какова вероятность что пользователю она понадобится? Если форма не загрузится или не отобразится, сможет ли пользователь достичь своей цели на сайте?

Проанализируйте эти вопросы. Изучите поведение пользователей. Определите приоритет этой формы. Чем он выше — тем раньше нужно её инициализировать:

• Если пользователь 100% будет заполнять форму и не заполнив её он не сможет продолжить работу с сайтом, тогда форму стоит загрузить и инициализировать как можно раньше. Чтобы она была полностью готова когда она понадобится пользователю.
  
• Если необходимость в форме мала, а не заполнив её сайт продолжит выполнять свою основную функцию — тогда загружать стили и скрипты, которые инициализируют форму можно только в момент когда форма понадобилась и не раньше.
  

UPD.
И на последок. Сперва нужно проставить все атрибуты, стили и тп, а уже в самом конце вставлять элемент в DOM. Иначе браузер будет выполнять перерисовку и перекомпоновку на каждый чих. Вместо того, чтобы сделать это один раз при вставке элемента.

Comments

[Muranx]

Спасибо за исчерпывающий ответ! Думаю чтобы осознать все что вы написали нужен скорее опыт а только лишь не знания о том, какими способами можно создавать объекты! ;D

[Muranx]

Alex и ещё вопросик, более мене опытные ( ну по крайней мере на мой взгляд ) люди постоянно кидают ссылки на лджс.ру, неужели вы все прошли через этот ресурс? На сколько он помог лично вам, если не секрет? И какой подход к изучению жс был лично у вас? ( т.к. судя по тому, что на мои вопросы только вы тут отвечаете , вы знаете своё дело )

[Alex]

неужели вы все прошли через этот ресурс?

Нет. Просто при гуглении информации по Web API или JS этот ресурс один из первых в выдаче. И он предоставляет информацию в достаточно понятном, для новичков, виде.

[Muranx]

Alex, Ок, спасибо за ответ, как обычно в тему!

Answer 2

[Пашенька]

Установка класса будет менее затратной. И устанавливать его нужно не setAttribute(), а classList.add()

Answer 3

[Somewhere Intech]

Object.assign(el.style, {
  width: "100px",
  height: "100px",
  backgroundColor: "red"
})

Comments

[Muranx]

Ну это просто очередная реализация (пуская даже чуть более удачная в плане компактности) но ответ то на вопрос есть или нет?

[Somewhere Intech]

Muranx,
1. Через setAttribute классы ставить плохо. Если структура документа хорошо структурирована то в css можно расписать абсолютно всё будь то динамический объект или статика.
2. У меня нет большого опыта в этом ремесле, но если следовать mvc, то в js лучше описывать по большей части контроллер, на бэке модель а уж в css вьюху (всю вряд-ли получится, но как можно больше). Ну и, как говорится, на спичках не экономят, но скрытая форма отрендерится заранее, правда вы эту разницу в быстродействии не заметите

[Muranx]

Johnny Lowhunter, Спасибо!