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

Ответ 1

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

Как я могу исправить эту проблему, никогда не теряйте ссылку на объект-оболочку. Всякий раз, когда необходим объект DOM (например, вставка на страницу), этот объект-оболочка предоставляет его. Но приклеивая этот виджет на экран, объект-оболочка настраивает всю обработку событий и код обработки AJAX, специфичный для виджета, поэтому ссылка на оболочку поддерживается всегда в этих обработчиках событий и обратных вызовах AJAX.

Я создал простой пример на jsfiddle, используя MooTools, который может иметь смысл для вас.

Ответ 2

Вы можете использовать глобальный реестр:

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

и когда AJAX вызывает возврат, они могут получить виджетов следующим образом:

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

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

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

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

Тестирование, если объект jQuery имеет существующий виджет:

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

Обратите внимание, что это только предложения. На самом деле существует множество способов достижения такой консолидации. Если вы хотите совместить свой код с jQuery, вы можете расширить объект jQuery, чтобы вы могли написать что-то вроде:

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

Ответ 3

Я не уверен, что полностью понял ваш вопрос, но я попытаюсь указать некоторые идеи.

По-моему, вы должны сделать базовый класс виджетов, который содержит общую функциональность для виджетов.

Можно использовать, например, AppName.Widgets.base(). Одной из переменных экземпляра является _events, который является объектом, который хранит события как ключи и функционирует как значения. Таким образом, каждый класс определяет события для этого виджета, и вы можете легко связать их в конструкторе. Что касается строковых идентификаторов, самым простым способом является использование toString().

Пример:

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);
}

Ответ 4

Многие из того, что вы можете или не можете сделать, будут зависеть от того, сколько у вас контроля над javascript. Лично мне часто приходится использовать библиотеки, созданные другими, поэтому я могу получить только DOM node, но мне действительно нужен мой объект. В этих случаях я считаю, что использование функции данных в jQuery очень удобно. Используя функцию данных, вы можете "сохранить" свой объект внутри DOM node, чтобы получить его позже.

С учетом вашего примера выше, как вы можете использовать функцию данных, чтобы вернуть свой виджет после того, как функции, которые используют только DOM node.

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);
     };

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

    // Save a copy to the domNode
    $(rootEl).data("logger", self);
    return self;
};

// Example of only getting the dom node
function whatsUp (domNode){
   // Get the logger from the domNode
   $(domNode).data('logger').log('What\ up?');
}

// Usage
var logger = makeLogger();
var loggerNode = logger.getRootEl();
var foo = document.getElementById('foo');
foo.appendChild(loggerNode);
whatsUp(loggerNode);