Организация js-кода на странице
 

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

MVC - вряд ли что то придумаешь лучше.


Обычно всегда полезно отделять представление от логики.

Представление размести в шаблоне, и используй шаблонизатор.

Логику в контролёре.

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

// примерный вид возможного контролёра
controller.extend("horizont",{
       // опции
       options: {
        greetings: "Hello"
       },
       // конструктор
       init:function(el){
            el.append("привет");
       },

       // нажали кнопку ok
       "button#ok click":function(){
       }
       // нажали кнопку cancel
       "button#cancel click":function(){
       }
}

// создаём контроллёр как любой виджет.
$("#test").horizont({
       greetings:"astala vista"
});

такими контролёрами можно контролировать как часть (вроде меню или слайдера), так и всю страницу.

Или даже большое приложение, глобальный контролёр aplication может по необходимости подгружать по ajax страницы, на эти страницы он будет вешать контролёр page, page в свою очередь может повесить контролёры на элемены которые превратят их в слайдеры, карусели и другие динамические элементы.

самым простым контролёром можно считать виджет из jquery ui,
создаём мы его при помощи команды widget.
К нему возможно есть смысл самому прикрутить шаблонизатор типа ejs или аналогичного.

Есть и более серьёзные решения.

Я уж наверное всех заколебал этой штукой, но напомню ещё раз
есть фреймворк базирующийся на jQuery, позволяющий организовывать код в стиле mvc.
http://www.javascriptmvc.com/

Другие mvc фреймворки вроде blackbone.js, не заточены под jQuery, но это не значит что их нельзя использовать в связке с jQuery.

писать на jquery это не обязанность
вместо него можно использоват extJs или dojo
Инструменты для организации кода, в них уже существуют.

DjDiablo,
Спасибо, буду врубаться.