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

Question

Каковы некоторые стратегии для достижения разделения кода в приложениях AJAX?

Я создаю PHP-приложение, в котором я хотел бы иметь хороший внешний интерфейс AJAX. Я уже давно научился использовать какие-то шаблоны в своем PHP-коде, чтобы обеспечить хорошее разделение между моей логикой и отображаемым кодом, но у меня возникают проблемы с поиском хороших способов сделать это с помощью JavaScript-кода во внешней части. Я использую jQuery, чтобы упростить выборку данных XML и манипулирование DOM, но обнаружил, что логика и код компоновки начинают перемешиваться.

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

Answer 1

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

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

Answer 2

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

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, но Apanta делает выдающуюся IDE с действительно мощной IDE Javascript (она позволяет перетаскивать файлы .JS в Ссылки на файл диалоговое окно, так что вы получите intellisense для всех этих документов Javascript, решая одну из главных причин, почему трудно разделить Javascript!

Answer 3

Я не уверен на 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, который вызывается при загрузке страницы. Затем метод init присоединяет различные события и прочее к моей странице и ее элементам. Об этом подходе говорится в шаблонах проектирования Pro JavaScript , которые стоит прочитать, если у вас есть время и деньги.

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

Answer 4

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

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

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

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

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

Answer 5

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

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

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

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

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