Рис. 8.9. Инструмент Drip предоставляет подробную информацию о внутреннем состоянии дерева DOM браузера Internet Explorer
отдельных фрагментов кода. Если мы напишем Aj ах-приложение хотя бы среднего размера, различные программные решения начнут взаимодействовать друг с другом, давая подчас неожиданные результаты. В следующем разделе мы рассмотрим пример, подчеркивающий, насколько важно знать конкретные особенности выполнения кода.
8.4.2. Простой пример управления памятью
На данный момент вы уже имеете основные сведения об управлении памятью и знакомы с некоторыми подходами, упрощающими создание интерфейсных элементов из программы. При разработке реального приложения Ajax мы используем ряд приемов, результаты применения которых могут в общем случае влиять друг на друга. Каждое программное решение оказывает влияние на производительность; то же справедливо для их совместного примененияРезультаты использования различных подходов удобно проиллюстрировать на конкретном примере, который мы и рассмотрим в данном разделе.
При работе программы, рассматриваемой здесь в качестве примера, создаются и удаляются компоненты ciickBox. Они называются так потому, что представляют собой небольшие квадраты, реагирующие на щелчки мышью. Поведение каждого компонента определяется следующим кодом:
function CiickBox(container){ this.x=5+Math.floor(Math.random*)*370); this.y=5+Math.floor(Math.random()*370); this.id="box"+contaiлег-boxes.length; this.state=0;
this.render();
container.add(this);
}
ClickBox.prototype.render=function(){
this.body=null;
if (this.body==null){ this.body=document.createElement("div"); this.body.id=this.id;
}
this.body.className='boxl';
this.body.style.left=this.x+"px";
this.body.style.top=this.y+"px";
this.body.onclick=function(){ var clickbox=this.backingObj; clickbox.incrementState();
}
}
ClickBox.prototype.incrementState^function(){ if (this.state==O){
this.body.className='box2' ; }else if (this.state==l){
this.hide{);
}
this.state++;
}
ClickBox.prototype.hide=function(){ var bod=this.body;
b o d . c l a s s N a m e = ' Ь о х З' ;
}
Компонент ClickBox имеет красный цвет, если отображается впервые. После того как пользователь один раз щелкнет на нем мышью, цвет компонента изменяется на синий. После второго щелчка компонент удаляется с экрана. Данное поведение реализуется путем создания двусторонних ссылок между объектами модели предметной области и элементами DOM, представляющими их на экране.
Впрограмме для каждого ClickBox поддерживается уникальный идентификатор, информация о позиции, сведения о внутреннем состоянии (сколько щелчков было сделано) и тело компонента. Телом компонента является узел DOM типа div. Узел DOM содержит ссылку на объект модели в переменной backingObj.
Впрограмме также определен класс Container, содержащий объекты ClickBox. В данном классе содержится массив компонентов и уникальный идентификатор самого контейнера.
function Container(id){ this.id=id;
this.body=document.getElementByld(id) ; this.boxes=new Array();
}
Container.prototype.add=function(box){
this.boxes[this.boxes.length]=box;
this.body.appendChild(box.body);
}
Container.prototype.clear=function(){
Рис. 8.10. Так выглядит приложение, демонстрирующее использование памяти, после создания первых 100 компонентов. Компоненты реагируют на щелчки мышью
f o r ( v a r i = Q ; i < t h i s . b o x e s . l e n g t h ; i + + ) { t h i s . b o x e s [ i ] . h i d e ( ) ;
}
this.boxes^new Array(); report("clear"); newDOMs=0; reusedDOMs=0;
}
Внешний вид окна приложения показан на рис. 8.10.
На отладочной панели, расположенной справа, отображается информация о внутреннем состоянии системы. На состояние системы влияют события, например, добавление компонентов к контейнеру или их удаление.
Данная программа была написана для того, чтобы в процессе ее работы можно было поэкспериментировать с созданием и удалением элементов DOM и обработкой циклических ссылок. Пользователь может выбирать различные приемы работы с программой, устанавливая или удаляя флажки опций в HTML-форме, расположенной на странице. При активизации ссылок, управляющих добавлением элементов в контейнер или их удалением, реализуются программные решения, определяемые набором установленных флажков. Рассмотрим каждый из этих флажков и соответствующий ему код.
Опция Reuse DOM Nodes
Данная опция определяет, должен ли компонент ClickBox при отображении пытаться найти существующий узел DOM и создавать новый узел, только если поиск закончился неудачей. Другими словами, флажок этой опции осуществляет переключение между режимами создания при любых условиях и создания при отсутствии (см. раздел 8.3.2). Модифицированный код, отвечающий за воспроизведение компонента, выглядит следующим образом:
ClickBox.prototype.render=function(){
this.bodyenull;
340 Часть III Создание профессиональных Ajax-приложений
if (reuseDOM){ this.body=document.getElementById(this. id);
}
if (this.body==null){ this.body=document.createElement("div"); this.body.id=this. id;
newD0Ms++;
}else{
reusedDOMs++;
}
this.body.backingObj =this; this.body.className='boxl'; this.body.style.left=this.x+"px"; this.body.style.top=this.y+"px"; this.body.onclick=function(){
var clickbox=this.backingObj; clickbox.incrementState();
}
}
Опция Unlink On Hide
Когда компонент ClickBox удаляется из контейнера (либо после второго щелчка мышью, либо в результате вызова Container. clear ()), данная опция определяет, должно ли производиться удаление путем сокрытия или удаление путем отсоединения. Об этих принципах удаления см. в разделе 8.3.2.
ClickBox.prototype.hide=function(){ var bod=this.body; bod.className='box3';
if (unlinkOnHide){
bod.parentNode.removeChiId(bod};
}
}
/
Опция Break Cyclic References
Данная опция также имеет отношение к процессу удаления компонента ClickBox. Она определяет, должны ли присваиваться значения null свойствам элемента D0M и объекта модели предметной области, т.е. должны ли удаляться циклические ссылки.
ClickBox.prototype.hide=function(){ var bod=this.body; bod,className='box3' ;
if (unlinkOnHide){
bod.parentNode.removeChild(bod);
}
if {breakCyclics){
bod.backingObj=null;
this.body=null;
I
}
Управляющие элементы формы позволяют пользователю помещать з контейнер новые компоненты ClickBoxes и очищать контейнер. Приложением можно управлять вручную, но для удобства сбора результатов мы написали также тестирующую функцию, которая имитирует некоторые действия пользователя. Приведенная ниже последовательность действий повторяется 240 раз.
1.Включение 100 компонентов в контейнер с помощью функции populate ().
2.Добавление 100 компонентов.
3.Очистка контейнера.
Код функции stressTest() приведен ниже.
function stressTest() {
for (var i=Q;i<240;i++){ populate (100); populate(100); container.clear();
}
alert("done");
{
Заметьте, что в данном случае проверяется добавление компонентов к контейнеру и удаление их, а не поведение элементов ClickBox по щелчку мышью.
Данная проверка умышленно упрощена. Если вам надо лишь выяснить, увеличивается или уменьшается объем потребляемой памяти при изменении алгоритма, мы рекомендуем создавать для ваших приложений такие же простые тесты. Создание тестовых сценариев уже само по себе требует определенного мастерства, в частности, от разработчика требуется знание типичных приемов проектирования.
Выполнение тестового сценария занимает около минуты. В течение этого времени браузер не реагирует на действия пользователя. Если число итераций выбрать слишком большим, браузер может "зависнуть" на длительное время. Если число повторений мало, изменения потребляемой памяти не будут заметны. Мы выбрали 240 итераций и считаем, что для нашей машины это вполне приемлемое значение. Вы же можете изменить его, исходя из конкретных условий.
Запись изменения занимаемой памяти — сравнительно простая задача. Мы выполняем тестирование в операционной системе Windows при работающей программе Task Manager. Объем потребляемой памяти регистрируется непосредственно после загрузки тестовой страницы, а затем снова после вывода окна, сообщающего о том, что тестирование завершено. В системе Unix для тестирования может быть использована утилита top или другой инструмент аналогичного назначения (см. раздел 8.4.1). После каждой проверки мы закрываем браузер, чтобы обеспечить равные условия тестирования.