Как реализовать наследование DOM объекта в jQuery?

Question

[Klaus Kater]

здравствуйте. Подскажите пожалуйста способ наследования от ДОМ объекта.
Есть хороший способ создания ДОМ объекта - $("") , но у меня есть задача сделать основной объект, а от него наследовать кучу других объектов с большими и не очень изменениями.
Нашел способы наследования в жквери, но они не сработали.

var Node = $("<div/>").extend({обработчики});
 или 
var Node = createClass({
        extend: new $("<div/>"),
});

Comments

[Евгений Петров]

Вы уж разберитесь, наследование или клонирование.
Реализация узлов в DOM — это интерфейсы, и лезть в них едва ли вам следует.

[Илья Шатохин]

Евгений Петров прав, просто клонируйте и все var $new_elem = $elem.clone();

Answer 1

[Тимофей]

Сделай просто функцию, которая возвращает созданный элемент DOM, в простейшем случае здесь и наследование в полном смысле слова не нужно. Что-то типа того:

function Base() {
	var el = $('<div></div>');
	// ...
	
	return el;
}

function Sub() {
	var el = Base();
	// ...
	
	return el;
}

Comments

[Klaus Kater]

Пробовал, сам элемент возвращается, обработчики событий работают, а вот дополнительные функции теряются )

[Тимофей]

Klaus Kater: А что ты имеешь в виду под дополнительными функциями?

[Klaus Kater]

Функции написанные мной ))

[Тимофей]

Klaus Kater: Они вызываются из самого объекта? То есть что-то типа el = Sub(); el.someFunction()? Если надо так, то тогда пихаешь свой DOM элемент как объект в this, свои функции объекта в Base.prototype, а статические функции (если такие есть) в Base. Ну и вызываешь при наследовании Base.apply(this, arguments) и изменяешь дальше свой объект. Короче, обычное наследование. Типа того

function Base() {
	this.el = $('<div></div>');
	// ...
}

Base.someStaticMethod = function() { /* ... */ };

Base.prototype.someMethod = function() { /* .. */ };
Base.prototype.constructor = Base;

function Sub() {
	Base.apply(this, arguments);
	this.el.append('I am subclass object');
	// ...
}
Sub.prototype = new Base();
Sub.prototype.constructor = Sub;

Sub.prototype.someOtherMethod = function() { /* ... */ }

var el = new Sub();
el.someMethod();
el.someOtherMethod();

[Klaus Kater]

Проблема такого подхода, получается на каждый объект 2 части. У меня много драгдропа и древовидная структура. Если делать ДОМ объект отдельно, приходится при перемещении работать с 2мя объектами, т.е. редактировать ДОМ структуру, и редактировать структуру дерева, и они могут не соответствовать друг другу, что потенциальная дырка для проблем. Поэтому я пытаюсь сделать ДОМ объект и объект дерева одним и тем же.
Либо искать способ другой отрисовки дерева ...

[Klaus Kater]

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

[Тимофей]

Klaus Kater: Не уверен, понял ли правильно проблему. Я понял так: есть какой-то набор данных, имеющих структуру дерева, и есть набор DOM-элементов, каждый из которых может иметь функционал взаимодействия с ним, которое влечет за собой изменение данных. Если так, то что мешает использовать данные напрямую, без помещения их в объект DOM? DOM - это интерфейс работы с данными, и он не должен представлять собой сами эти данные. Единственное, в чем тут есть загвоздка - это отображение актуальных данных в DOM-элементах, но тут поможет создание такого объекта работы с данными, который бы позволял подписываться на изменение данных и, соответственно, вызывал функции обновления этих данных в подписанных объектах. Короче говоря, это two-way-binding в angular и подобных фреймворках. Способ с отрисовкой дерева - да, довольно странное решение для браузера)

[Klaus Kater]

Проблему вы поняли правильно. Спасибо, рою в эту сторону. Посмотрю на чужие реализации, или напишу свою )