Документация по работе с Prototype. Пример работы с Prototype.

СТАТЬИ

Prototype in Action

Итак, сегодня я расскажу вам про Prototype. Именно благодаря Prototype изменился мой взгляд на javascript программирование. Раньше для меня javascript был самой нудной и сложной работой. Программу сложно было разбить на модули – всё писалось в огромных по размерам функциях, постоянно дублируя код. В общем – абсолютно ничего хорошего.
С Prototype же совсем наоборот – я бы даже сказал, мне стало нравиться писать на Javascript. В особенности web-20 фишки. Такие как Async update элементов на странице, или autocomplete.
С другой стороны Prototype это не набор виджетов для вашего приложения. Здесь нет супер компонент вроде table с сортировкой или что-то вроде того. Нет. Prototype это Давид мира Javascript библиотек. Prototype предоставляет много низкоуровневых полезностей, упрощая программирование и упрощая вашу жизнь.
Чтож, давайте наконец попробуем Prototype на деле. Придумаем себе такой пример – нам нужно создать javascript компонент, который бы динамически загружал RSS с сервера и отображал бы пункты rss, пролистывая через определённый промежуток времени. Вот то, что имеется здесь, мы перепишем на Prototype.
Приступим. Создаём отдельный rss_ticker.js и там создаём наш класс RssTicker var RssTicker = Class.create(); Здесь есть небольшая загвоздка, для тех, кто знаком с ООП. В javascript нет классов, есть только объекты. Также в javascript нет наследования. Библиотека Prototype берётся исправить некоторые недостатки языка и пробует имитировать наследование, но об этом чуть попозже. Давайте расшифруем данную конструкцию - мы просим объект с именем Class (из библиотеки Prototype) создать другой объект. Для нас объект RssTicker и есть новый класс. Теперь нам надо в этот класс добавить свои методы. А также мы хотим наследоваться от Ajax.Request класса (этот класс содержит код для асинхронных запросов на сервер – именно то, что чаще всего подразумевается под словом Ajax) RssTicker.prototype = Object.extend(new Ajax.Request (), { initialize: function(container, url, options){ }, my_method: function(){ } }); Данная замысловатая конструкция собственно и производит наследование класса. Смотрите Object.extend – первый параметр это базовый объект от которого наследуемся, а второй параметр – хеш функций, важнейшим из которых является initialize() – нечто вроде конструктора класса. Результат мы устанавливаем в RssTicker.prototype (прототип объекта RssTicker). Когда мы вызываем метод у класса RssTicker и не обнаруживаем его, то метод ищется у прототипа.
Давайте посмотрим, что будет, если мы вызовем some_rss_ticker_object.my_method() Объект some_rss_ticker_object не имеет функции my_method() зато, его прототип – да. И мы смотрим хеш функций переданных прототипу. Находим его и выполняем. Если бы не было здесь – мы бы пытались вызвать такой метод у базового объекта.
Согласен, наследование в таком стиле не очень элегантно но, тем не менее, работает. Поговаривают, что в Javascript 2.0 уже будет полноценное ООП программирование и для всех наступит рай на земле, а сейчас пока пользуемся тем, что есть.
Прототипы самый сложный момент в использовании библиотеки Prototype и если вы его поймёте, то код библиотеки сможете читать без проблем. Для интересующихся деталями реализации ООП через прототипы (не библиотеку, а механизм) рекомендую к прочтению следующую очень хорошую статью http://www.dklab.ru/chicken/nablas/40.html
Итак, приступаем же к реализации нашего RssTicker initialize: function(container, url, options) { this.container = $(container); options = $H( { asynchronous:true, evalScripts:false, frequency:5} ).merge(options) this.setOptions(options); this.transport = Ajax.getTransport(); this.options.onComplete = (function() { this.processRSS(this.transport.responseText); }).bind(this); this.request(url); this.content_items = []; }, Рассмотрим несколько интересных моментов. Первый из них – доллар-функции. Это очень полезные и часто используемые функции, которым дали короткие имена. Так $() это тоже самое что и document.getElementById(). И как только раньше не додумались дать до этого. Ещё одна функция это $H() превращает объект в хеш. Хеш имеет несколько полезных методов, таких как .merge() - из названия понятно предназначение – слить 2 хеша воедино. Кроме того, Prototype имеет другие доллар-функции. Например $$() – возвращает массив элементов по их селектору. Селектор – это тип тага, id или сlass элемента, либо их комбинация. Так $$(‘.container’) – возвращает элементы с классом container $$(‘p#content a’) – все ссылки, которые находятся внутри параграфа с id = content $$(‘#text > .footer’) элемент класса footer который следуют непосредственно за элементом с id = text. А вот так мы добавим всем картинкам на странице class ‘new_image’
$$(‘img’).each(function(element){Element.addClassName(element, ‘new_image’)})
ну очень элегантно.

Вот здесь вы найдёте полное описание всех функций Prototype http://www.sergiopereira.com/articles/prototype.js.html

Следующее, что нам интересно это конструкция this.options.onComplete = (function() { this.processRSS(this.transport.responseText); }).bind(this); которая подвешивает нашу функцию на завершение асинхронного запроса. Наша функция называется processRSS. Кроме того, мы должны забаиндить её к текущему объекту .bind(this) для того чтобы и в функции был доступен объект this this.options.onException = (function(){..}) добавит наш хандлер на случай ошибки с AJAX запросом.
Теперь пишем функцию, которая распарсит RSS текст и заставит периодически изменять содержимое div элемента (this.container) processRSS: function(text) { text = text.split('\n').join(' '); var items = text.match(/<item>.+?<\/item>/g); for(j = 0; j <items.length; ++j){ item = items[j]; // extract content:encoded content = item.match(/<content:encoded>(.+?)<\/content:encoded>/); // or, when not available, use the description if(content == null){ content = item.match(/<description>(.+?)<\/description>/); } // skip item when no there's no content if (content == null) break; // remove any CDATA tag from content content = content[1]; in_cdata = content.match(/<!\[CDATA\[(.+?)\]\]>/); if(in_cdata){ content = in_cdata[1]; } // extract title title = item.match(/<title>(.+?)<\/title>/)[1]; // extract link to item link = item.match(/<link>(.+?)<\/link>/)[1]; // generate box content html = html + '<p><a href="' + link + '">' + title + '</a></p>' + content; this.content_items.push(html) } if (this.content_items.length> 0){ // show first item this.container.innerHTML = this.content_items[0]; } } Ничего сложного здесь нет – в основном использование регулярных выражений для того, чтобы взять из текста необходимую для нас информацию – заголовок, линк и содержимое rss элемента.
Итак, мы установили первый rss item в наш контейнер this.container.innerHTML = this.content_items[0]; Но нам надо сделать, чтобы содержимое менялось периодически. Для этого есть объект PeriodicalExecuter. Заиспользуем его у нас. // every 'frequency' seconds we show a random new item new PeriodicalExecuter((function() { this.container.innerHTML = this.content_items…… get random element from array; }).bind(this), this.options.frequency); Взять рандомный элемент из массива – хороший кандидат для добавления функции в объект Array – мало ли что, ещё пригодиться. Итак добавляем функцию random. Всё как и раньше – должно быть понятно. Object.extend(Array.prototype, { random: function() { i = Math.floor((Math.random() * this.length)+1) if(i == this.length) i = 0; return this[i] } }); Вуа-ля компонент готов - можно его использовать на html страницах.
Подключаем библиотеку Prototype
Подключаем нашу библиотеку <div id="container"></div> <script type="text/javascript"> new RssTicker('container', ' http://blog.pomozov.info/feed', {frequency: 7}) </script> Рабочий пример RssTicker находиться здесь
А теперь сравните код, который мы написали, и то, как написано в оригинале без Prototype. С Prototype несравненно проще.
Если вы намерились использовать ajax в вашем проекте – советую изучить эту простую, но полезную библиотеку. И помните идеальная библиотека это не тогда когда невозможно, что-то добавить, а когда невозможно выкинуть лишнее.
Бонус трек. Mozilla не позволяет javascript обращаться к серверу отличному от того сервера, с которого загружена js библиотека. Таким образом предотвращается cross-site scripting атаки (CSS-hijaking). Так, что если вы запускаете html локально и обращаетесь к rss в Интернете, то ничего не получиться. Чтобы исправить это – вам необходимо установить соответствующий security flag, разрешающий подобные действия. Для этого добавьте в функцию RssTicker.initialize() следующую конструкцию try { netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); } catch(e){}

«Преведущая страница Следующая страница»