prev next

А.3.4. Создание консоли вывода, встроенной в браузер

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

Web-браузер JavaScript не предлагает встроенное средство регистрации. (При первом взгляде на консоль JavaScript в браузере Mozilla может показаться, что это не так, но записывать данные в нее могут только браузер и расширения.)

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

Не будем все усложнять - передадим элемент DOM в качестве аргумента конструктору объекта. Благодаря этому расположение консоли можно будет определять в зависимости от страницы. Конструктор просто задает двустороннюю связь между элементом DOM и самим объектом консоли.

Console=ftmction(el){
  this.el=document.getElementByld(el);
  this.el.className='console1 ;
  this.el.consoleModel=this;
  this.clear(); I
}

Чтобы добавить информацию на консоль, мы передаем указанной функции аргумент, который может быть текстовой строкой или элементом DOM, при необходимости передавая также имя класса CSS.

Console.prototype.append=function(obj,style){
  var domEl=styling.toDOMElement(obj);
  if (style) {
  domEl.classKame=style;
  }
  this.el.appendChild(domEl);
}

Метод toDOMElement () вызывает общую функцию стилевого оформления, которая обеспечивает представление сообщения в виде элемента DOM. Если аргумент уже является элементом DOM, функция ничего не делает, если он является строкой, то последняя заключается в элемент div.

styling.toDOMElement=function(obj){
  var result=null;
  if (obj instanceof Element){
result=obj;
}else{
var txtNode=document.createTextNode(String(obj));
var wrapper=document.createElement('div') ;
wrapper.appendChild(txtNode);
result=wrapper; }
return result; 
}

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

Console.prototype.clear=function(){
while(this.el.firstChild){
this.el.removeChild{this.el.firstChild);
}
}

Таким образом мы получаем простую реализацию регистрирующей консоли, встроенной в браузер. Посмотрим, как она используется на примере проекта ObjectViewer (см. главы 4 и 5). Прежде всего определим на странице элемент DOM, который будет содержать регистрирующую консоль.

Далее зададим класс CSS, отвечающий за расположение консоли на экране.

div.console {
position :absolute;                                                      
top:32px;                                                                       
left:600px;
width:300рх;
height:500px;
overflow:auto;
border: lpx solid black;
background-color : #eef0ff;
 }

Здесь мы использовали абсолютное позиционирование; в общем случае можно применять любую технологию пользовательского интерфейса Ajax. Затем необходимо создать регистрирующий объект. Для удобства в данном примере мы определим его в виде глобальной переменной.

var logger=null; window.onload=function(){
logger=new Console{"console");
logger.append{"starting planets app");
}

Мы инициализируем, регистратор в событии window.onload, чтобы требуемый им элемент DOM гарантированно был создан. Предположим теперь, что мы хотим регистрировать сообщение при создании объектов планет в нашей модели предметной области. Для этого нам нужно вызвать logger .append().

planets.Planet=function
(id,system,name,distance,diameter,image){
this.id=id;
logger.append("created planet object ' "+this.name+"'"); 
}

Подобным образом мы можем добавить в код ObjectViewer (объект Соп-tentLoader) команды регистрации, которые вызываются при изменении значений и открытии всплывающих окон, при загрузке сетевых ресурсов и т.д., что позволит отслеживать поведение работающего кода. Важные сообщения, например, информацию о сетевых сбоях, можно выделять особым стилем.

net.ContentLoader.prototype.defaultError=function(){
logger.append("network error! "+this.url, "urgent");
}

Рис. А.10. Консоль регистрации в действии - отслеживает создание объектов, сетевую активность, редактирование пользователем значений и т.д. Чтобы продемонстрировать отображение сообщений, выделенных специальным стилем, мы добавили запрос к несуществующему серверному ресурсу moons.xml