Крейн Д., Паскарелло Э., Джеймс Д,. AJAX в действии / Ajax в действии / ajinact / Ajax в действии

Глава 3. Управление кодом А/ах 105

// 5 Реструктуризированная функция sendRequest this.req.open('GET•, url, true); this.req.send(null);

}catch (err){ this.onerror.call(this) ;

}

}

},

// 6 Реструктуризированная функция обратного вызова onReadyState:function(){

var req=this.req;

var ready=req.readyState;

if (ready==net.READY_STATE_COMPLETE){ var httpStatus=req.status;

if (httpStatus==200 || httpStatus==O){ this.onload.call(this);

}else{

this.onerror.call(this);

}

}

},

defaultError:function(){ alert("error fetching data!"

+"\n\nreadyState:"+this.req.readyState +"\nstatus: "+this.req.status

+"\nheaders: "+this .req.getAHResponseHeaders ()) ;

}

}

Первое новшество — это единственная глобальная переменная net 1, которая содержит все необходимые ссылки. При этом вероятность конфликта имен уменьшается, а код, имеющий отношение к сетевым запросам, локализуется в одном месте.

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

ив случае положительного результата проверки предпринимаем действия по умолчанию. Возможность передавать функции переменное число параметров

ипередавать функцию при первом обращении к классу может показаться странной для специалистов, привыкших создавать программы в рамках объектного подхода. Однако JavaScript допускает подобные решения. Свойства данного языка рассмотрены в приложении Б.

Значительную часть кода функций initXMLHttpRequest () 4 и sendRequest () 5 мы поместили в состав объекта и переименовали измененный код. Новое имя призвано отражать более широкую область применения. Функция, объединяющая возможности initXMLHttpRequest()

иsendRequest (), теперь называется loadXMLDoc 3. Для нахождения объекта XMLHttpRequest и инициализации запроса мы используем те же подходы, что

иранее, но это никак не влияет на действия программиста, использующего Данный объект. Функция обратного вызова, onReadyState () 6, в основном

106 Часть I. Новый взгляд на Web-приложение

осталась такой же, как и в листинге 2.11. Мы лишь заменили обращения к консоли на вызовы функций onload и onerror. Эти действия также могут показаться несколько непривычными для многих разработчиков, поэтому мы рассмотрим их подробнее. Функции onload и onerror представляют собой объекты Function, a Function.call() — это метод данного объекта. Первый параметр, Function. call (), представляет собой контекст функции, и в теле функции на него можно ссылаться с помощью ключевого слова this.

Написать обработчик обратного вызова, передаваемый объекту ContentLoader, очень легко. Если нам надо обратиться к любому свойству ContentLoader, например XMLHttpRequest или url, это можно также сделать с помощью ключевого слова this. Например:

function myCallBacM ) { alert(

this . url

+" loaded! Here's the content:\n\n" +this.req.responseText

);} Очевидно, что, для того, чтобы написать код объекта, подобного рас-

смотренному выще, необходимо знать особенности языка JavaScript, но после создания объекта его можно использовать, не задумываясь о внутренней структуре.

Данный пример демонстрирует преимущества реструктуризированной программы. Мы "спрятали" внутри объекта сложные фрагменты кода, представив потенциальному пользователю внешние элементы, при работе с которыми не возникает трудностей. Фрагменты, разобраться с которыми может только квалифицированный специалист, теперь изолированы от остальной части программы. Если возникнет необходимость модификации кода, она будет выполнена локально, и не придется анализировать всю программу в поисках фрагментов, в которые надо вносить изменения.

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

3.2. Варианты применения реструктуризации

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

В литературе, посвященной образам разработки, принято описывать проблему, рассматривать ее решение, а затем обсуждать сопутствующие вопросы. Не будем отступать от этих традиций.

108 Часть I. Новый взгляд на Web-приложение

числовую величину и единицы измерения, например ЮОрх. Поддерживаются не только пиксели, но и другие единицы. Свойство style.pixelLeft, напротив, допускает указание только числа; при этом предполагается, что значение задано в пикселях. Данное свойство поддерживается только Microsoft Internet Explorer. Метод getLef t (), рассматриваемый здесь, определяет, поддерживаются ли CSS, а затем проверяет оба значения, начиная с того, которое предусмотрено стандартом W3C. Если ни одно из значений не найдено, метод возвращает нулевую величину, предусмотренную по умолчанию. Заметьте, что здесь не определяется имя и версия браузера, а применяется более надежный способ обнаружения объектов, который рассматривался в главе 2.

Написание подобных функций, учитывающих особенности каждого браузера, — рутинная и утомительная работа, но после ее окончания программист может продолжать написание приложения, не уделяя внимания конкретной проблеме. Существуют библиотеки, авторы которых уже выполнили необходимую работу. Готовые надежные функции для определения позиции элемента DOM и решения других подобных задач могут существенно ускорить создание пользовательского интерфейса для Ajax-приложения.

Обращение к серверу

О проблеме несовместимости браузеров мы уже говорили в главе 2. Производители клиентских Web-программ предоставляют нестандартные средства получения объекта XMLHttpRequest, используемого для организации асинхронного взаимодействия с сервером. Если мы хотим скопировать XML-документ с сервера, необходимо решить, какое средство использовать для этого.

Internet Explorer выполняет необходимые действия только в том случае, если мы обратимся к компоненту ActiveX, а в браузерах Mozilla и Safari для этой цели используется встроенный объект. Об этих различиях "знает" только фрагмент кода, отвечающий за загрузку XML-документа. Как только программа получит объект XMLHttpRequest, она будет работать независимо от того, какое именно решение реализовано в конкретном браузере. Код, обращающийся к объекту, не должен зависеть от того, используется ли ActiveX или подсистема браузера. Все, что ему надо, — это конструктор net.ContentLoader().

Образ разработки Facade

Как для getLeft(), так и для new net.ContentLoader() код, предназначенный для обнаружения объектов, сложен, и создавать его утомительно. Определяя функцию, скрывающую его, мы делаем остальную часть программы эолее простой для восприятия. В этом состоит базовый принцип реструктуризации — не повторяться (don't repeat yourself — DRY). Если окажется, что код, предназначенный для обнаружения объектов, работает некорректно, ошибку надо будет исправить в одном месте, а не искать, где в программе эпределяются координаты элемента DOM или формируется запрос.

Рис. 3.1. Условное представление образа разработки Facade, используемого для работы с объектом X M L H t t p R e q u e s t на различных браузерах. Функция loadXML () лишь использует объект X M L H t t p R e q u e s t и не "заботится" о его реализации. Сама реализация может быть очень сложной, но вызывающей функции предоставляются только базовые элементы

Другими словами, поступив подобным образом, мы используем образ разработки Facade, который предоставляет одну точку доступа к функциональным средствам, реализованным различными способами. Например, объект XMLHttpRequest обеспечивает полезные возможности, а использующее его приложение не должно "заботиться" о том, как они реализованы (рис. 3.1).

Во многих случаях бывает необходимо упростить доступ к подсистеме. Например, при получении координаты левого края элемента надо учитывать, что CSS позволяет задавать значения в пикселях, пунктах, дюймах и других единицах измерения. В нашем случае такое разнообразие представлений лишь затрудняет работу. Функция getLeft (), приведенная в листинге 3.2, применима лишь до тех пор, пока в качестве единиц измерения используются пиксели. Упрощение подсистемы — это еще один результат, достигаемый посредством образа разработки Fagade.

Образ разработки Adapter

С образом разработки Fagade непосредственно связан образ Adapter. В этом случае мы также работаем с двумя подсистемами, выполняющими аналогичные функции. В качестве примера можно привести варианты получения объекта XMLHttpRequest в продуктах Microsoft и Mozilla. Вместо того чтобы

Глава 3. Управление кодом Ajax 111

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

Ограничения объединенного обработчика событий

Второй обработчик событий замещает первый. Этого можно избежать, реализовав все действия по обработке в одной функции.

window.onload=function() { displayDiv=document.getElementById('display' ) ;

feedDiv=document.getElementById('feeds') ;

}

Такой подход допустим в нашем конкретном примере, но он приводит к усложнению кода; теперь процессы отображения данных и просмотра новостей становятся зависимыми друг от друга. Если же мы будем иметь дело не с двумя системами, а с десятью или даже с двадцатью, и каждому потребуется ссылка на несколько элементов DOM, то объединенный обработчик станет неуправляемым. Добавление и удаление отдельных компонентов будет сопровождаться появлением ошибок, т.е. возникнет та ситуация, о которой мы говорили в начале главы: все будут бояться внести хотя бы минимальные изменения в состав кода, чтобы не разрушить его окончательно. Давайте прибегнем к реструктуризации и определим отдельную функцию для каждой подсистемы.

window.onload=function(){

getDisplayElements();

getFeedElements();

}

function getDisplayElements(){ displayDiv=document.getElementById('display' ) ;

}

function getFeedElements(){ feedDiv=document.getElementByld('feeds' ) ;

}

Теперь код стал более понятным: в обработчике window.onload() каждой подсистеме соответствует одна строка, однако объединенная функция все еще остается слабым местом и способна доставить неприятности. В следующем разделе мы рассмотрим альтернативное решение. Оно более сложное, но обеспечивает большую надежность.

Образ разработки Observer

Иногда бывает полезно задать себе вопрос: какой компонент отвечает за то или иное действие? В нашем случае составная функция возлагает на объект window ответственность за получение ссылок на элементы DOM. Теперь объект окна должен знать, какая из подсистем присутствует на странице. В идеале каждая подсистема должна сама отвечать за получение ссылок.

112Часть I. Новый взгляд на Web-приложение

Вэтом случае, если подсистема присутствует, она получит ссылки, в противном случае действия по определению ссылок выполняться не будут.

Для того чтобы обеспечить разделение ответственности, мы дадим возможность подсистемам регистрироваться для оповещения. Для этого каждая подсистема должна указать функцию, которая будет вызвана при наступлении события onload. Реализуется такое решение следующим образом:

window.onloadListeners=new Array(); window.addOnLoadListener(listener){ window.onloadListeners[window.onloadListeners.length]=listener;

}

После загрузки окна объект window должен лишь осуществить перебор элементов массива и вызывать по очереди каждую функцию.

window.onload=function(){

for(var i=0;i<window.onloadListeners.length;i++){ var func=window.onlloadListeners[i] ;

func.callO ;

}

}

Если каждая подсистема будет создана с использованием данного подхода, мы обеспечим работу с ними, не объединяя фрагменты кода. Конечно, при этом существует опасность некорректно переопределить window. onload, что приведет к разрушению системы. Однако, поскольку "опасный" фрагмент лишь один, мы можем позаботиться, чтобы это не произошло.

Следует заметить, что новая модель событий W3C допускает существование нескольких обработчиков событий. Однако эта модель по-разному реализована в различных браузерах, поэтому мы предпочли сформировать собственный обработчик на базе знакомой модели событий JavaScript. Подробнее данный вопрос будет рассмотрен в главе 4.

В данном случае мы реструктуризируем код для того, чтобы он соответствовал образу разработки Observer. Согласно данному образу определяется объект Observable (в данном случае это встроенный объект окна) и набор обработчиков Observer или Listener, которые могут регистрироваться в объекте Observable (рис. 3.2).

При использовании образа Observer ответственность разделяется между источником события и обработчиком. Обработчики отвечают за свою регистрацию и ее отмену. На источник события возлагается ответственность за поддержку списка зарегистрированных обработчиков и оповещение о наступлении события. Данный образ давно используется при программировании пользовательских интерфейсов, управляемых событиями. Мы вернемся к нему в главе 4, когда будем подробно обсуждать события JavaScript. Как вы увидите, механизм событий может быть использован независимо от обработки браузером действий пользователя с мышью и клавиатурой.

Теперь перейдем к рассмотрению следующей проблемы, которая также может быть решена путем реструктуризации.

Глава 3. Управление кодом Ajax 113

Рис. 3.2. Разделение ответственности согласно образу разработки Observer. Объекты Observer, которые должны оповещаться о событии, могут регистрироваться в объекте Observable или отменять регистрацию. Все зарегистрированные обработчики получают информацию о наступлении события

3.2.3. Повторное использование обработчиков событий: образ разработки Command

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

Компонент, реализующий кнопку

Предположим, что в нашем приложении предусмотрен элемент DOM, который выглядит на экране как кнопка. После щелчка на этой кнопке производятся некоторые вычисления и результаты отображаются в HTML-таблице. Нам необходимо определить функцию обработки щелчка мышью на кнопке. Эта функция имеет приблизительно следующий вид:

function buttonOnclickHandler(event){ var data=new Array();

data[0]=6;

data[l]=data[0]/3;

data[2]=data[0]*data[1]+7;

var newRow=createTableRow(dataTable) ; for (var i=0;Kdata.length;i++){ createTableCell(newRow,data[i]);

}

}

Мы предполагаем, что переменная dataTable ссылается на существующую таблицу и что в функциях createTableRow() и createTableCell () корректно реализованы действия со структурой DOM. Необходимо заметить, что в реальном приложении вычисления могут занимать длительное время, а про-

114 Часть I. Новый взгляд на Web-приложение

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

buttonDiv.onclick=buttonOnclickHandler;

Поддержка различных типов событий

Теперь предположим, что приложение реализуется средствами Ajax. Мы обращаемся к серверу за данными и, получив их, выполняем вычисления и заполняем таблицу. Сейчас не будем говорить о том, как реализовать повторяющиеся обращения к серверу, предположим лишь, что в нашем распоряжении есть объект poller. В нем предусмотрены действия с объектом XMLHttpRequest, а обработчик onreadystatechange по окончании загрузки данных с сервера вызывает функцию onload. Чтобы не углубляться в детали вычислений и отображения данных, будем считать, что все необходимые операции реализованы в составе вспомогательных функций.

function buttonOnclickHandler(event){ var data=calculate(); showData(dataTable,data);

function ajaxOnloadHandler(){ var data=calculate(); showData(otherDataTable,data);

function calculate(){ var data=new Array(); data[0]=6; data[l]=data[0]/3;

data[2]=data[0]*data[1]+7; return data;

function showData(table,data){

var newRow=createTableRow(table); for (var i=0;i<data.length;i++){ createTableCell(newRow,data[i]) ;

buttonDiv.onclick=buttonOnclickHandler;

poller.onload=ajaxOnloadHandler;

Многие действия скрыты в функциях calculate () и showData (), а принцип установки обработчиков onclick и onload уже знаком вам.

Мы получили более полное разделение бизнес-логики и кода, ответственного за обновление пользовательского интерфейса. Как и ранее, мы воспользовались уже готовым решением. На этот раз нам помог образ разработки Command. В объекте Command определяются действия любой сложности, после чего сам объект легко передается различным элементам пользовательского интерфейса. В классических объектно-ориентированных языках объект Command обычно создается на основе некоторого базового класса или интерфейса. Мы поступим несколько другим способом — будем рассматривать функции JavaScript как объекты Command, обеспечивающие требуемую степень абстрагирования.