Архитектура jQuery приложений

[Silentland]

Сейчас полная засада с клиентской частью. Спагетти-код перевалил за несколько тысяч строк и ориентироваться в нем все сложнее. Рефакторил несколько раз, но так и не родил пока вменяемой архитектуры. Основные проблемы:
- реализация наблюдателя и т.п. Все решения, которые встречал слишком громоздки. Мне же, по сути, достаточно уводить события в глобальную область и читать оттуда (js и jQuery позволяют навешивать/исполнять обработчики только на конкретных объектах). Как сделать события широковещательными?
- привязка модели (данные + логика их обработки) к DOM. С этим лучше, но все же хотел бы посмотреть как опытные ребята делают

Пытался ковырять BackBone, Knockout и подобное, но слишком накручено, хотя в Нокауте data-bindдинг достаточно удобный. Заточка всех систем на сторонние библиотеки, аля underscore тоже не радует... Раз есть jQuery надо из него все по максимуму выжать

 

[флоппик]

достаточно уводить события в глобальную область и читать оттуда (js и jQuery позволяют навешивать/исполнять обработчики только на конкретных объектах). Как сделать события широковещательными?

вешай на body ?

А вообще, тебе к Кантору на курсы — http://javascript.ru/courses#kurs-sozdanie-interfeysov

 

[Silentland]

Сейчас вешаю на document. Проблема с удалением обработчиков. проблематично выборочно удалить обработчик (отписаться от рассылки)

$('#object').each(function () {
    $('document').on({
        'event1': function (e, data) {
            //function 1
        },
        'event2': function (e, data) {
            //function 2
        }
    })
})

У меня максимум неделя на это. А рабочий альфа-вариант должен быть уже завтра. Да и платить за 95% воды как-то не хочется, а «Архитектура сложных интерфейсов, другие фреймворки, насколько хватит времени.» совсем не воодушевляет...
Может быть есть статейка толковая, кроме этой http://habrahabr.ru/post/123635/? Причем архитектуре с использованием именно функций jQuery

 

[damner2]

Мне же, по сути, достаточно уводить события в глобальную область и читать оттуда (js и jQuery позволяют навешивать/исполнять обработчики только на конкретных объектах). Как сделать события широковещательными?

прочитай http://api.jquery.com/jQuery.Callbacks/
возможно этого тебе хватит.

- привязка модели (данные + логика их обработки) к DOM. С этим лучше, но все же хотел бы посмотреть как опытные ребята делают

не сказал бы, что привязка модели к DOM является минусом
в Flight, например, это один из принципов.

 

[damner2]

Пытался ковырять BackBone, Knockout и подобное, но слишком накручено, хотя в Нокауте data-bindдинг достаточно удобный. Заточка всех систем на сторонние библиотеки, аля underscore тоже не радует... Раз есть jQuery надо из него все по максимуму выжать

jQuery не помогает сделать удобную архитектуру приложения, а просто делает удобным работу с DOM, ajax и ещё по мелочи...
underscore делает то, что не предоставляет jQuery, так что "заточка" на него вполне оправдана.

 

[damner2]

если бы у тебя было бы больше времени, то я бы порекомендовал бы посмотреть на AngularJS
обучающие видео: http://egghead.io/

 

[Silentland]

прочитай http://api.jquery.com/jQuery.Callbacks/
возможно этого тебе хватит.

не сказал бы, что привязка модели к DOM является минусом
в Flight, например, это один из принципов.

Смотрел-смотрел. Как вариант. Интересно, кто-нибудь использует такую реализацию наблюдателя в реальных проектах? Привязку к DOM тоже не считаю минусом. Если разрабатывается не абстрактная игра с кучей скрытой логики, а веб-приложение, где любая кнопочка означает вполне определенное действие, то это даже плюс.

Проекты гляну, но с моим английским придется несколько дней разбираться)

 

[MiksIr]

Проблема с удалением обработчиков. проблематично выборочно удалить обработчик (отписаться от рассылки)

jQuery - Events - Namespace

 

[Silentland]

jQuery - Events - Namespace

Можно пример?

Допустим у нас есть

function A () {
    ...
    publicEvent('e1')
    ...
}
function B () {
    ...
    unsubscibeEvent('e1')
    ...
}
function C () {
    ...
    subscibeEvent('e1', callback)
    ...
    альтернативный вариант:
    $('#elem').onGlobal('e1', callback)
    ...
}

 

[MiksIr]

Все в документации есть
$(__).on("event1.namespace1", func).on("event1.namespace2", func).on("event2.namespace2", func);
$(__).off(".namespace1").off("event1.namespace2").

 

[Silentland]

Что такое неймспейсы знаю, но какой тут от них прок, если источнику события придется генерировать его с кучей неймспейсов? источник ничего не должен знать о потребителях. Он просто генерирует событие общее для всех, а потребители уже сами подписываются или отписываются на это событие.

 

[MiksIr]

Источник генерирует событие без неймспейса: trigger("event1");
Неймспейс нужен именно для того, что бы отписать одного из подписчиков события не трогая других.

 

[Silentland]

Действительно. Открылись глаза)