Отправляет email-рассылки с помощью сервиса Sendsay

Новые технологии веб-программирования.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Бизнес в Интернете" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Январь 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Додонов

Статистика

1.044 подписчиков
0 за неделю
←   Все выпуски   →

Low Pro: ненавязчивое программирование для Prototype.


Здравствуйте!

В догонку к предыдущему выпуску ещё один перевод, на этот раз в помощь JavaScript разработчику.

Многие веб-программисты для реализации Ajax на своих сайтах используют в качестве фреймворка библиотеку Prototype. Ниже речь пойдёт о Low Pro - небольшом дополнении к Prototype содержащем ряд полезных фич и улучшающем кросс-браузерную совместимость Prototype.

Перевод статьи Low Pro: Unobtrusive Scripting For Prototype сделан с любезного разрешения её автора - Дена Вебба(Dan Webb)

Low Pro: ненавязчивое программирование для Prototype

Low Pro – набор расширений библиотеки Prototype, который упрощает реализацию ненавязчивого программирования для DOM и формирует JavaScript компонент Unobtrusive JavaScript Plugin для Rails, но эти возможности могут быть использованы раздельно. Это по существу компиляция разных испытанных и проверенных опубликованных ранее технологий адаптированных для использования с Prototype и главным образом центрируется вокруг расширения обработки событий и работы с DOM. Low Pro использует фрагменты кода и/или идеи Dean Edwards, Matthias Miller, Sylvian Zimmer, Justin Palmer и John Resig.

Чтобы начать работу с Low Pro, скачайте версию 0.2 из моего репозитория Subversion и включите её с JavaScript-файлом Prototype. Low Pro зависит от Prototype, так что не забывайте включать его первым:

<script src="/js/prototype.js" type="text/javascipt"></script>
<script src="/js/lowpro.js" type="text/javascipt"></script>

В поставку входит стандартная версия с комментариями и сжатая версия. А сейчас быстро пробежимся по возможностям.

Перемещение по DOM и её модификация.

Поскольку манипуляция DOM в Prototype сильно ориентирована на innerHTML Low Pro добавляет несколько полезных методов к элементам позволяющих перемещаться по DOM и модифицировать его точно так как это рекомендует W3C. 


$('doomed').remove(); // удаляет элемент из DOM и вернуть его
$('item').nextElement(); // возвращает следующий элемент документа (исключая текстовые узлы)
 $('item').previousElement(); // догадайтесь...
$('thing').insertAfter(element); // в DOM есть только insertBefore, но не это
$('bong').replaceElement(element); // удаляет элемент и возвращает замену

Вы можете также вызывать эти методы с помощью объекта DOM

DOM.remove(element);
DOM.insertAfter(oneElement, anotherElement);

Также, Low Pro помогает в создании структуры узлов через DOM с помощью Prototype-версии DOM Builder’а. Для каждого HTML тэга существует создающая его функция называемая $[tag]. Вы можете вкладывать их, чтобы без труда создать комплекс DOM структур.

var listItem = $li({ id : 'item-1' },
                 $strong("Some text")
               );
// возвращает узел эквивалентный: <li id="item-1"><strong>Some text</strong></li>

$('a_list').appendChild(listItem);

Дополнительную информацию о DOM builder’е вы можете прочитать на The Web’s Bollocks.

События.

Код обработки событий в Prototype – это одно из его слабых мест, поэтому Low Pro полностью замещает Event.observe() и Event.stopObserving() версиями функций addEvent() и removeEvent() от Дина Эдвардса. Это даёт намного большую кросс-браузерную совместимость и ещё несколько простых исправлений: 

Event.observe('thing', 'click', function(e) {
  this.hide()  // this перенаправляет к запускающему элементу.
  return false; // прекращает поведение по умолчанию (даже в Safari!)
});

Все прочие методы остаются обратно совместимыми. Для удобства, observe() и stopObserving() смешаны(are mixed in) в элементах. Метод trigger также обеспечивает возможность программировать запуск обработки событий. 

Event.trigger(element, 'click');

Event.onReady() позволяет вам помещать в стек(to stack up) обратные вызовы которые сработают сразу же как будет готова DOM, что предпочтительней, чем onload, который инициирует запуск после того как будет загружена целая страница.


Event.onReady(function() {
   $('thing').visualEffect('highlight');
});

Повторные вызовы этой функции просто добавляют в стек обратные вызовы.(Repeated calls will simply stack up callbacks.)

Поведение

Low Pro добавляет к Prototype описание поведения элементов. Event.addBehavior() позволяет вам задать поведение элемента с помощью селекторов CSS.


Event.addBehavior({
'a.todo:click' : function(e) {
new Ajax.Request('todo/add', ... );
},
'div.feature:mouseover' : function(e) {
this.hide();
}
});

Поведение устанавливается при загрузке DOM и переустанавливается для нового элемента после вызова Ajax. Существует альтернативный подход, более объектно-ориентированный – это создать класс Behaviour который может быть присоединён к элементам. Каждый элемент имеет свой собственный экземпляр класса поведения, в котором храниться его состояние в течение времени жизни страницы. В классах поведения, this.element всегда указывает на элемент, которому назначается поведение.


var Resize = Behavior.create({
 initialize : function() {
 // эта функция вызывается при создании элемента. },
 onclick : function(e) {
 // используем методы, чтобы задать обработчики событий на объекте
 }
});

Наконец, я включил оптимизацию селектора $$ от Sylvian Zimmer, которая значительно ускоряет процесс выбора узла. Она, по моему опыту, немного глючит, хотя если вы столкнётесь с проблемами вы можете вернуть обычный код $$


LowPro.optimize$$ = false; //Вот так.

Вот и всё. Принимаются любый предложения и пожелания в виде отчёт об ошибке. Пожалуйста поместите их в мой Trac, и они будут исправлены так быстро, как это возможно.

Дополнение: Low Pro совместим с любым релизом Prototype 1.5 но не будет работать с версией 1.4 или ниже.

И снова говорит переводчик: следующими на публикацию у меня идут шаблоны проектирования на Ajax Sheduling(Запуск по расписанию) и On-Demand Javascript(Javascript по запросу). Пока пишите, про что вы хотите ещё узнать, а я всегда рад получать от вас дополнения и уточнения на тему, как лучше переводить тот или иной оборот английской речи.

Поздравляю всех студентов - мне кажется вас немало среди моих читателей - с прошедшим Татьяниным днём! Желаю вам лёгких экзаменов и весёлых каникул

Всего наилучшего,

Додонов Алекандр

Популярная веб-механика
В избранное