@larionov_n

Как правильно рендерить DOM?

Всем доброго времени суток. Хочу задать вопрос о Vanilla JS и его особенностях применения.

Как правильно создавать классы JS с атрибутом this._element = REAL DOM ELEMENT?

Постараюсь объяснить возникновение вопроса:

1) Код в проекте менять нельзя и не будет времени.
2) Код пишется по стандарту EcmaScript 3.
3) Я не сторонник Vanilla, но жизнь заставляет. Понимаю что с шаблонизаторами и Backbone - таких проблем не будет. Но использовать сторонние библиотеки нельзя.

Например FormPostBox prototype имеет в себе атрибут this._element, это DOM объект созданный с помощью document.createElement(tagName). Так-же есть метод _getHTML - делает он следующее: _element.innerHTML = String + String. Допустим для событий мы пишем this._element.onclick = function(){ обработчик }. И если внутри этого HTML мы ничего рендерить не собираемся - ВСЕ ОК.

А что если, мы хотим добавить еще один прототипный класс js внутрь этого элемента.

Варианты

1) Как сделано сейчас. Все вложенные объекты добавляются в innerHTML родителя. Так-же в классе создаются через createElement, наполняются через innerHTML. Потом у родителя в getHTML методе вызывается метод чилдрена _getHTML. И верхний объект рендерится (Получает весь HTML Parent with children). Соответственно мы теряем связь this._element с тем, что попало на самом деле в DOM дерево.

Что мне не нравится:

  1. Нельзя определить обработчик для элемента, так как используя только innerHTML, мы передаем паренту только HTML и теряем связь this._element с реальным объектом DOM.
  2. Для того чтобы повесить событие, нужно найти у самых верхних парентов ссылку на действующий DOM объект, HTML которого есть в DOM и связан с свойством this._element. И через делегирование (e.target) ловить всплытие с дочерних элементов.
  3. Каждый раз нужно искать в DOM дереве объект, чтобы сделать appendChild, removeClass и любые действия с DOM объектом.


2) Переписать все к черту. Использовать схему createElement.appendChild(CreateElement) итд. Чтобы самый верхний парент, рендерил всех своих чилдов. Тогда this._element у каждого из чилдов будет ссылаться на объекты в DOM. И можно будет вешать события без проблем, никакой магии с getHTML.

Ваши варианты?
  • Вопрос задан
  • 207 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
Rocket Брянск
от 60 000 до 100 000 ₽
30 мая 2024, в 17:04
1000 руб./за проект
30 мая 2024, в 16:47
15000 руб./за проект
30 мая 2024, в 16:41
700000 руб./за проект