Всем доброго времени суток. Хочу задать вопрос о 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 дерево.
Что мне не нравится: - Нельзя определить обработчик для элемента, так как используя только innerHTML, мы передаем паренту только HTML и теряем связь this._element с реальным объектом DOM.
- Для того чтобы повесить событие, нужно найти у самых верхних парентов ссылку на действующий DOM объект, HTML которого есть в DOM и связан с свойством this._element. И через делегирование (e.target) ловить всплытие с дочерних элементов.
- Каждый раз нужно искать в DOM дереве объект, чтобы сделать appendChild, removeClass и любые действия с DOM объектом.
2) Переписать все к черту. Использовать схему createElement.appendChild(CreateElement) итд. Чтобы самый верхний парент, рендерил всех своих чилдов. Тогда this._element у каждого из чилдов будет ссылаться на объекты в DOM. И можно будет вешать события без проблем, никакой магии с getHTML.
Ваши варианты?
