Требуеться совет в реализации интерфейса!

[B~Vladi]

Всем мир. Если кто сталкивался с такой задачей - подскажите.
Пока в подробности вдаваться не буду, опишу на пальцах.

Есть некий набор узлов-объектов(тупо div), с практически одинаковым содержимым, которое представляет собой управляющие элементы. У всех объектов есть одинаковый функционал и данные определённого типа, которые можно описать как их методы, и свойства.
Т.е. по-сути они пользуются одними функциями. Собственно вопрос в том, как эти функции реализовать. Есть два варианта: первый - создать кучу глобальных функций, тем самым завалить глобальными именами window, второй - описать это в виде объектов и через prototype(свойство а не библиотека) навесить на них свойств/методов. Я прекрасно понимаю, что второй вариант более предпочтительнее, но так же появляются сложности при обращении/нахождении нужного узла/объекта и от этого намного возрастает объём кода. Первый вариант так же плох тем, что далее на странице будет появляться новый код со своим функционалом и легко можно наткнуться на проблему совпадения имён, но его плюс - в меньшем объёме кода.
Приоритеты такие:
1. Маленький вес скриптов. (в идеале не более 30кб, что для этого проэкта вполне реально). Подходит первый вариант.
2. Универсальность кода. Для дальнейшего развития. Подходит второй вариант.
3. Быстрота исполнения кода. В этих областях я не силён, т.к. мало мануалов на эту тему. Если кто подскажет какой полезный ресурс из этой области - буду благодарен. Какой вариант подходит незнаю.

И ещё вопрос немного не в тему но из одной каши. Любой узел DOM это объект, которому можно прикрутить своё свойство или метод. Можно ли добавить ему свои свойства/методы через prototype? Спасибо.

[Gvozd]

Любой узел DOM это объект, которому можно прикрутить своё свойство или метод. Можно ли добавить ему свои свойства/методы через prototype

увы-нет
делаете необходимые функции, и присваиваете динамически всем интересубщим вам элементам.
кстати, внутри обработчика события this указывает на сам DOM-Элемент.
вот от него и добираетесь до всех соседних элементов, необходимых для работы этого элемента
как итог у нас имется все необходимые функции(каждая только один раз прописанная), и несколько циклов, перебирающие эелементы, и выставляющие им обработчики событий
главное выставление обработчиков делать посде того, как уже есть все элементы(т.е. после window.onload)
можно все эти функции обернуть в замыкание, и атким образом избавится от засирания глобальной области видимости

[B~Vladi]

увы-нет

А жаль...

внутри обработчика события this указывает на сам DOM-Элемент

Да, с этим я столкнулся в первую очередь, когда писал вариант на объектах, но мне нужен был мой пользовательский объект а не узел и я долго ломал себе голову как его получать. Это и есть те сложности о которых шла речь для 2-го варианта. При разных вызовах функции в её this может попасть как узел так и объект event.

вот от него и добираетесь до всех соседних элементов, необходимых для работы этого элемента

несколько циклов, перебирающие эелементы

Да, такой вариант получения управляющих элементов возможен, но есть и другой. Каждый узел-объект и его внутренние управляющие элементы создаются динамически безо всяких innerHTML и тут же вешаются все нужные обработчики. Тут же я сохраняю полученные ссылки на эти этементы как свойства их узла-объекта. Затем при вызове какой-либо функции нахожу объект из которого был вызван обработчик и у меня получаются все ссылки на нужных его детей есть. Это очень удобно.

обернуть в замыкание

Ок, почитаю, посмотрю.

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

Так же хотел заметить, что третий приоритет самый важный. В любом случае выберу вариант, который работает быстрее.

[B~Vladi]

Посмотрел, про замыкания и понял, что это я знаю и уже рассматривал, как вариант. Но мне такой подход не нравится из-за "некрасивости" кода. Я считаю. что так писать нельзя ну или в самых крайних случаях.

Вот небольшой пример.У меня есть функция, которая создаёт мои узлы-объекты.

function create(){
   var o=document.createElement('div');
   o.show=function(){
      this.style.display='block';
   }
   o.hide=function(){
      this.style.display='none';
   }
   return o;
}

Я правильно понимаю, что на самом деле при создании нового о у меня будет создаваться так же ещё +2 функции ко всем?! т.е. у каждого о свои функции-методы и это не есть гуд?!

[Octane]

А что мешает использовать addEventListener и attachEvent, чтобы не создавать каждый раз новую копию show/hide?

Да и функцию, как объект, можно использовать по ссылке:

<html>
<head>
<script type="text/javascript">
window.onload = function() {
	function F() {}
	var a = document.getElementById("test1");
	var b = document.getElementById("test2");
	a.onclick = F;
	a.onclick.key = true;
	b.onclick = F;
	alert(b.onclick.key);
	alert(F.key); // Функция используется по ссылке (не копируется), поэтому везде доступно её свойство key.
};
</script>
</head>
<body>
	<div id="test1">text1</div>
	<div id="test2">text2</div>
</body>
</html>

[B~Vladi]

А что мешает использовать addEventListener и attachEvent

Ничто не мешает, т.к. эти методы вешают обработчик событий, а не добавляют методы к объекту. Вопрос в том, как делать?!

либо так:

function create(){
   var o=document.createElement('div');
   o.show=function(){
      this.style.display='block';
   }
   o.hide=function(){
      this.style.display='none';
   }
   addEventListener(o,'click',o.hide,false);
   return o;
}

либо так:

function create(){
   var o=document.createElement('div');
   return o;
}
function hide(){
   var o=получаем_объект;
   o.style.display='none';
}
addEventListener(create(),'click',hide,false);

[B~Vladi]

Хотелось бы понять, как избавиться от засирания window и тем временем не плодить лишних объектов/функций, засирая этим память.

[Octane]

Не внимательно прочитал, да назначение обработчиков здесь не причем.

Так как в IE6,7 нельзя добавить свой метод в прототип HTMLElement, то используют обёртки.

function F(node) {
     this.node = node;
}

F.prototype = {
     show: function() {
        this.node.style.display = 'block';
     },
     hide: function() {
        this.node.style.display = 'none';
     }
};

Используют так:

var obj = new F(document.getElementById('…'));

obj.show();
obj.hide();

obj.node // – ссылка на узел

Чтобы не писать каждый раз new, можно добавить что-то вроде такого:

function $(arg) {
      return new F(typeof arg == 'string' ? document.getElementById(arg) : arg);
}

Используем:

var obj = $('…');

obj.hide()

…

[B~Vladi]

Octane, спасибо, отличный вариант. По-вашему это лучше, чем без объектов?! Просто хотелось бы понять, как это всё влияет на производительность скрипта.

Так как в IE6,7 нельзя добавить свой метод в прототип HTMLElement

Если чесно, не знал... Плохо конечно...

[Octane]

По-вашему это лучше, чем без объектов?!

Не понял о чем это.

как это всё влияет на производительность скрипта.

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