Разделение кода в приложениях AJAX

Я не на 100% уверен, что понимаю, в чем ваша проблема, но что вы можете сделать, особенно если мы говорим о приложении AJAX с одностраничным стилем, это использование классов Singletons, ориентированных на конкретные задачи.

var XMLFormatter = function(){
    /* PRIVATE AREA */

    /* PUBLIC API */
    return {
        formatXML : function(xml){
            /* DO SOMETHING RETURN SOMETHING */
        }
    }
}();

У вас остался статический класс XMLFormatter, который можно вызывать в любом месте страницы вот так ...

function useClass(){
    $('#test').update(XMLFormatter.formatXML(someXML))
}

Эта функция может использоваться как обратный вызов для запросов AJAX. Я использую этот метод для логики страницы, создавая класс Page, который возвращает объект с методом инициализации, который вызывается при загрузке страницы. Затем метод init прикрепляет различные события и прочее к моей странице и ее элементам. Об этом подходе говорится в Шаблоны проектирования Pro JavaScript, и его стоит прочитать, если у вас есть время и деньги.

Также стоит иметь в виду, что Javascript сильно отличается от других языков, и обычно лучшие практические подходы людей обычно просто адаптированы из Java. Хотя это нормально, он не использует Javascript в полной мере. Помните, что Javascript в значительной степени управляется событиями из-за его близости к взаимодействию с пользовательским интерфейсом, и вы обнаружите, что некоторый код события смешивается с другим кодом. На веб-сайте Crockfords (http://javascript.crockford.com/) есть несколько статей о передовой практике, а также ряд других полезных советов.

• напишите свои шаблоны на HTML-странице, возможно, в скрытом элементе.
• получать данные с помощью вызовов AJAX, мне проще использовать JSON, поэтому вам не нужно «переформатировать» XML, это только данные.
• применить шаблон к данным, чтобы сгенерировать HTML и вставить на отображаемую страницу.

проверьте некоторые плагины шаблонов jQuery: jsRepeater, jTemplates, noTemplate, Шаблон

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

1: Напишите «классы» для функциональности и передайте элементы для изменения в конструктор, будь то идентификатор элемента или сам элемент, на ваше усмотрение.

2: Записывать «события» для разделов, которые могут различаться в зависимости от страницы или элемента управления. Под событиями я имею в виду просто методы-заполнители, которые вы можете заменить фактическими функциями. Итак, для примеров ...

var FilterControl = function() {

    //the "event"
    var self = this;
    this.onLoadComplete = function() { };

    //This is the command that calls the event
    this.load = function() {
        //do some work
        ...

        //Call the event
        self.onLoadComplete();
    };
};

//somewhere else in the code
var filter = new FilterControl();
filter.onLoadComplete = function() {
    //unique calls just for this control
};

3: Получите среду IDE, более дружественную к Javascript. Я люблю моя Visual Studio, но Апанта создает выдающуюся среду IDE, которая имеет действительно мощную среду разработки Javascript (она позволяет перетаскивать файлы .JS в диалоговое окно Ссылки на файлы, поэтому вы получаете intellisense для всех этих документов Javascript, решая одну из основных причин, почему это сложно разделить Javascript!

Если я правильно понимаю вопрос, у вас много HTML / javascript в одном блоке кода, и вы хотите их разделить.

Я бы использовал несколько приемов, чтобы получить четкое разделение:

• Один JS-файл, содержащий скрипты / функции для каждой группы действий.
• Один JS-файл, содержащий все стандартные функции (XML-парсер, утилиты ...)
• Один JS-файл, который (лениво) загружает определенный скрипт (элемент №1 здесь) и присоединяет любые события к элементам current при загрузке документа.

Основная проблема заключается в том, чтобы прикрепить к сгенерированному коду функции / события на лету. IIRC, JQuery может справиться с этим, но не уверен.

Надеюсь, это поможет.

Мне не нравится форматирование на клиенте, поэтому я всегда стараюсь возвращать HTML из обратных вызовов AJAX, если, например, мне действительно не нужны данные для списка выбора.

Причина в том, что у меня есть богатый набор инструментов на сервере (ASP) для создания HTML и ничего на клиенте. Я использую настраиваемую «динамическую страницу» на сервере, которая содержит «динамический элемент управления», содержащий шаблон для данных, которые я хочу отформатировать. Со страницы выводится только содержимое этого элемента управления.

Веб-служба, которую вызывает AJAX, просто выполняет: return Execute (some-dynamic-page). Аргументы веб-службы передаются динамической странице либо в пакете HttpContext, либо в строке запроса.

Мне легче создать новый шаблон динамической страницы на сервере с помощью элементов управления перетаскиванием, чем с использованием клиентского шаблона или преобразователя xml. Я не использовал ни один инструмент для создания шаблонов или инструменты Jxxxx - возможно, они облегчают боль.

Используя этот метод, вы можете использовать то же разделение (MVP / MVC или просто код программной части), что и обычно.