How to structure Javascript programs in complex web applications?

Question

You could use a global registry:

window.WidgetRegistry = {};
window.WidgetRegistry['foowidget'] = new Widget('#myID');

and when AJAX calls return, they can get the widget like this:

var widgetID = data.widgetID;
if (widgetID in window.WidgetRegistry) {
    var widget = window.WidgetRegistry[widgetID];
}

For your jQuery calls: I'd guess they are relatively inexpensive, since jQuery caches objects for later use. But you could extend the above suggested WidgetRegistry by using .data():

var $widget = $('#myWidget');
var widgetID = 'foo';
$widget.data('widget', widgetID);

In this way, you can store the widget ID attached to each jQuery object and re-access it from the global registry.

Testing, if an jQuery object has an existing widget:

return $('#test').data('widget') &&
       ($('#test').data('widget') in window.WidgetRegistry);

Note, that these are just suggestions. Actually, there are dozens of ways to achieve a consolidation like this. If you want to combine your code deeper with jQuery, you could extend the jQuery object, so that you could write something like:

$('#widget').widget({'foo':'bar'});
// and/or
var allWidgets = $('*:widget');
// ...

For the four objects that need to be synchronized, you could have a single object and pass the reference around in a constructor, or as function arguments.

The way I fix this problem is to never lose a reference to the wrapper object. Whenever a DOM object is needed (for example inserting into the page), this wrapper object provides it. But sticking that widget onto the screen, the wrapper object sets up all event handling and AJAX handling code specific to the widget, so the reference the the wrapper is maintained at all times in these event handlers and AJAX callbacks.

I've created a simple example on jsfiddle using MooTools that might make sense to you.

I'm not sure I've fully understood your question, but I'll try to point some ideas.

In my opinion, you should make base widget class, which contains common functionality for widgets.

Let's use for example AppName.Widgets.base(). One of the instance variables is _events, which is object that stores events as keys and function as values. That way each class defines the events for this widget, and you can easily bind them in the constructor. As for the string identifiers, the easiest way is to use toString().

Example:

namespace('AppName.Widgets'); // you can find implementations easy

AppName.Widgets.base = function() {
    if (!this._type) return;

    this._dom = $('div.widget.'+this._type);
    for (var e in this._events) {
        this._dom.bind(e, this._events[e]);
    }

    this.toString = function() { return this._type; };
}

AppName.Widgets.example = function() { // extends AppName.Widgets.base
    this._type   = 'example';
    this._events = { 'click' : function(e) { alert('click'); }  };

    AppName.Widgets.base.call(this);
}