Требуеться совет в реализации интерфейса!
Всем мир. Если кто сталкивался с такой задачей - подскажите.
Пока в подробности вдаваться не буду, опишу на пальцах. Есть некий набор узлов-объектов(тупо div), с практически одинаковым содержимым, которое представляет собой управляющие элементы. У всех объектов есть одинаковый функционал и данные определённого типа, которые можно описать как их методы, и свойства. Т.е. по-сути они пользуются одними функциями. Собственно вопрос в том, как эти функции реализовать. Есть два варианта: первый - создать кучу глобальных функций, тем самым завалить глобальными именами window, второй - описать это в виде объектов и через prototype(свойство а не библиотека) навесить на них свойств/методов. Я прекрасно понимаю, что второй вариант более предпочтительнее, но так же появляются сложности при обращении/нахождении нужного узла/объекта и от этого намного возрастает объём кода. Первый вариант так же плох тем, что далее на странице будет появляться новый код со своим функционалом и легко можно наткнуться на проблему совпадения имён, но его плюс - в меньшем объёме кода. Приоритеты такие: 1. Маленький вес скриптов. (в идеале не более 30кб, что для этого проэкта вполне реально). Подходит первый вариант. 2. Универсальность кода. Для дальнейшего развития. Подходит второй вариант. 3. Быстрота исполнения кода. В этих областях я не силён, т.к. мало мануалов на эту тему. Если кто подскажет какой полезный ресурс из этой области - буду благодарен. Какой вариант подходит незнаю. И ещё вопрос немного не в тему но из одной каши. Любой узел DOM это объект, которому можно прикрутить своё свойство или метод. Можно ли добавить ему свои свойства/методы через prototype? Спасибо. |
Цитата:
делаете необходимые функции, и присваиваете динамически всем интересубщим вам элементам. кстати, внутри обработчика события this указывает на сам DOM-Элемент. вот от него и добираетесь до всех соседних элементов, необходимых для работы этого элемента как итог у нас имется все необходимые функции(каждая только один раз прописанная), и несколько циклов, перебирающие эелементы, и выставляющие им обработчики событий главное выставление обработчиков делать посде того, как уже есть все элементы(т.е. после window.onload) можно все эти функции обернуть в замыкание, и атким образом избавится от засирания глобальной области видимости |
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Я думаю о таком варианте. Не создавать пользовательских объектов, а пользоваться уже существующими. Речь идёт о моём наборе узлов. И уже в них хранить нужные ссылки на его детей, его свойства и методы. Но добавлять методы не через прототип не есть гуд для памяти(на сколько мне извесно). Так же хотел заметить, что третий приоритет самый важный. В любом случае выберу вариант, который работает быстрее. |
Посмотрел, про замыкания и понял, что это я знаю и уже рассматривал, как вариант. Но мне такой подход не нравится из-за "некрасивости" кода. Я считаю. что так писать нельзя ну или в самых крайних случаях.
Вот небольшой пример.У меня есть функция, которая создаёт мои узлы-объекты. function create(){ var o=document.createElement('div'); o.show=function(){ this.style.display='block'; } o.hide=function(){ this.style.display='none'; } return o; } Я правильно понимаю, что на самом деле при создании нового о у меня будет создаваться так же ещё +2 функции ко всем?! т.е. у каждого о свои функции-методы и это не есть гуд?! |
А что мешает использовать 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> |
Цитата:
либо так: 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); |
Хотелось бы понять, как избавиться от засирания window и тем временем не плодить лишних объектов/функций, засирая этим память.
|
Не внимательно прочитал, да назначение обработчиков здесь не причем.
Так как в 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() … |
Octane, спасибо, отличный вариант. По-вашему это лучше, чем без объектов?! Просто хотелось бы понять, как это всё влияет на производительность скрипта.
Цитата:
|
Цитата:
Цитата:
|
Часовой пояс GMT +3, время: 06:31. |