Как структурировать программы JavaScript в сложных веб-приложениях?

У меня есть проблема, которая легко не описана. Я пишу веб-приложение, которое делает сильное использование вызовов Ajax и jQuery. Теперь у меня нет большого опыта в JavaScript archicture, но я понимаю, что моя программа не имеет хорошей структуры. Я думаю, что у меня есть слишком много идентификаторов, относящихся к тому же (по крайней мере, более или менее) вещь.

Давайте иметь взгляд на произвольный образцовый виджет UI, который составляет крошечную часть приложения: виджет может быть частью окна, и окно может быть частью менеджера окон:

1. eventhandlers используют элементы DOM в качестве параметров. Элемент DOM представляет виджет в браузере.
2. Много времен я использую объекты jQuery (В основном обертки вокруг элементов DOM), чтобы сделать что-то с виджетом. Иногда они используются кратковременно, иногда они хранятся в переменной в более поздних целях.
3. Вызовы функции Ajax используют идентификаторы строки для этих виджетов. Они - обработанная сторона сервера.
4. Около этого у меня есть класс виджета, экземпляры которого представляют виджет. Это инстанцируют через новый оператор.

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

Совет?

Править:
@Will Morgan: это - конструктор форм, который позволяет создавать веб-формы в браузере. Бэкендом является Zope, сервер веб-приложения Python. Трудно стать более явным, поскольку это - общая проблема, я наблюдаю все время при выполнении Javasscript-разработки с трио jQuery, дерево DOM и мои собственные смоделированные экземпляры класса.

EDIT2:
Я думаю, что это было бы полезный для создания примера, хотя искусственный. Ниже Вас видят виджет регистратора, который может использоваться для добавления элемента блока к веб-странице, в которой отображены зарегистрированные объекты.

makeLogger = function(){
     var rootEl = document.createElement('div');
     rootEl.innerHTML = 'Logged items:';
     rootEl.setAttribute('class', 'logger');

     var append = function(msg){
           // append msg as a child of root element.
           var msgEl = document.createElement('div');
           msgEl.innerHTML = msg;
           rootEl.appendChild(msgEl);
     };

     return {
          getRootEl: function() {return rootEl;},
          log      : function(msg) {append(msg);}
     };
};

// Usage 
var logger = makeLogger();
var foo = document.getElementById('foo');
foo.appendChild(logger.getRootEl());
logger.log('What\'s up?');

В этой точке у меня есть обертка вокруг HTMLDivElement (размещенный объект). С наличием экземпляра регистратора (собственный объект) под рукой я могу легко работать с ним через функцию logger.getRootEl ().
То, где я застреваю, - когда я только имею элемент DOM под рукой и должен сделать что-то с общедоступным API, возвращенным функцией makeLogger (например, в обработчиках событий). И это - то, где путаница запускается. Я должен держать все собственные объекты в репозитории или чем-то так, чтобы я мог получить снова. Было бы настолько более хорошо иметь соединение (например, свойство объекта) от размещенного объекта назад к моему собственному объекту. Я знаю, что это может быть сделано, но это имеет некоторые недостатки:

• Подобные (круговые) ссылки являются потенциально памятью, просачивающейся до IE7
• Когда передать размещенный объект и когда передать собственный объект (в функциях)?

На данный момент я делаю заднюю ссылку с данными jQuery () метод. Но в целом мне не нравится способ, которым я должен отслеживать отношение между размещенным объектом и его собственным дубликатом.

Как Вы обрабатываете этот сценарий?

EDIT3:
После некоторого понимания я получил от примера Anurag..
@Anurag: Если я понял Ваше право в качестве примера, критическая точка состоит в том, чтобы настроить корректное (что корректно, зависит от Ваших потребностей, хотя), контекст выполнения для обработчиков событий. И это находится в Вашем случае экземпляр объекта представления, который сделан с Mootool, связывают () функцию. Таким образом, Вы удостоверяетесь, что ВСЕГДА имеете дело с интерфейсным объектом (я назвал его собственным объектом) вместо Объекта DOM, правильно?

Примечание для читателя: Вы не вынуждены использовать Mootools для достижения этого. В jQuery Вы установили бы свои обработчики событий с $ .proxy () функция, или если бы Вы используете простой JavaScript, Вы использовали бы применять свойство, которое выставляет каждая функция.