Так уж сложилось, что в мире кроме JQuery есть еще куча различных библиотек. Самые популярных из них: Prototype, Mootools, ExtJS. К тому же есть тысячи самописных. И web-программистам, то и дело, по роду своей деятельности приходится с ними всеми сталкиваться.
По своей сути все эти библиотеки, как бы они не были хороши, всего лишь надстройки над JS браузера. Это значит, что ничего из ряда вон выходящего они делать априори не умеют. Они лишь абстрагируют программиста от тонкостей реализации работы JavaScript в разных браузерах.
К примеру, сейчас, в большинстве браузеров есть метод document.getElementsByClassName. Но в самых выдающихся (IE), этого метода нет. Что делает программист, когда ему надо найти элемент по его классу?
Каждый раз рождается, что-то вроде этого:
function getElementsByClassName(myclass,node){
var parent = node || document;
if(!parent.getElementByClassName){
var items = parent.getElementByTagName('*');
var result = [];
for(var r in items)
if(items[r].className==myclass)
result[result.length] = items[r];
}else result = parent.getElementByClassName(myclass);
return result;
}
Библиотеки освобождают нас от такой рутины, и сами добавляют в document.prototype нужный метод, если его нет. Но библиотек очень много, а методов, которые нужны каждый день с десяток. Сюда относится уже упомянутый поиск по классу (по CSS селектору), события onload, ondomready, работа с AJAX, нахождение позиции элемента на странице, определение браузера и т.д. Словом, редко в каком веб приложении можно обойтись без этих методов. Разработчики jQuery, похоже, об этом знают, поэтому эта библиотека и в авангарде.
Но, как я уже сказал, не jQuery единым сыт web-разработчик. Поэтому надо знать элементарный джентльменский набор и из других библиотек. Они могут Вам пригодиться, когда Вы, к примеру, работаете над чужим проектом.
Поводом для написания статьи были постоянные вопросы моего товарища, который работал со старой версией UMICMS, но уже привык к свежей версии. Сейчас UMIперешла на jQuery, а раньше она работала на Prototype.
Также очень популярная Joomla по дефолту работает с Mootools, по этому эту библиотеку я не мог обойти стороной.
jQuery
Поиск по CSS селектору в jQuery это строчка
$('.myclass') или так $(div.myclass) или $('ul li.myclass a') или по id $(‘#myid’)
Поиск по id запускает метод getElementById. По этой причине в JQuery не стоит писать $('div#myid'), потому что это замедлит работу скрипта. Логика тут простая. Сначала, он найдет в документе методом getElementByTagName все div элементы, а уж потому будет искать среди них элементы с id="myid". Если вы ищете по классу, то тут ситуация противоположная, в примере выше, где мы для браузеров, не поддерживающих document.getElementByClassName, делали так - document.getElementByTagName('*'); Мы по сути брали все теги в документе. Указав в $('div.myclass') метод document.getElementByTagName('div') фильтрует из всех тегов только нужные (в данном случае div) и вернет существенно меньше элементов, а значит, скорость работы всего поиска значительно уменьшится.
Поэтому $('div.myclass') сработает быстрее чем $('.myclass'), a $('div#myid') сработает медленнее чем $('#myid')
Запуск события на onDOMReady (событие которое наступает, когда документ загружен, а картинки и прочее еще нет), тоже осуществляется без лишних телодвижений
$(function(){
alert('DOM загружен, работаем')
})
положение элемента на странице
var offset = $('#myid').offset();
alert('X:'+offset.left+' Y:'+offset.top);
Работать с AJAX в jQuery очень просто
$.get(‘index.php’); // вернет нам загруженную страницу index.php.
С нововведениями, которые появились в версии 1.5, работать с AJAX в jQuery стало еще проще.
К примеру, так можно отладить JSON.
var ajax= $.getJSON(‘index.php?do=getjson’);
ajax.success(function(data){
alert(data.ok)
}).error(function(data){
alert(data.responseText)
})
Таким образом, если на том конце нам послали не валидный JSON или вообще не JSON, а какой-нибудь HTML или того хуже вылезла ошибка PHP, то мы всегда можем увидеть, то, что нам прислали с помощью data.responseText.
Аякс Аяксом, но он не позволяет работать с чужими доменами. Методы $.getJSON и $.getScript jQuery обходят это ограничение. Предполагаю, что в недрах этих функций, создается элемент <script>, в который, и загружаются нужные данные. Отсюда вытекает очевидное правило работы с getJSON, если вы хотите запустить callback функцию. Запустить ее должен сам скрипт, который и загружается в элемент <script>.
Поясню на примере:
$.getJSON('http ://xdan.ru/examples/json.php?jscallback=?').success(function(data){
alert(data.mess)
})
Чтобы запустилась анонимная функция, которую мы подаем в success, надо чтобы в json.php сработало что-то вроде этого:
<?php
echo $_GET['jscallback'].'({"mess":"ok, I work"})';
?>
Т.е. при загрузке PHP генерирует JS скрипт (это важно, именно скрипт, а не просто документ JSON, как при работе с локальным getJSON(‘index.php’)) сработает функция обратного вызова, параметром в которую и подается наш JSON объект.
Локального $.getJSON(‘index.php’) это не касается, он работает по технологии AJAX, и просто пропускает полученные данные через eval.
В ее недрах для локального соединения происходит примерно это:
$.post('json.php',function(data){
eval('var data='+data)
alert(data.ok)
})
Определить, на каком браузере пользователь открыл данную страничку, также не составит труда. Объект $.browser содержит список самых популярных браузеров(webkit, safari (устаревшее), opera, msie, mozilla). Все они имеют значение false. Кроме текущего; eго значение true.
if($.browser.msie){
alert('Смени браузер, Умник!!!');
}
Prototype
В prototype, как и jQuery, тоже есть функция $, но тут она всего лишь удобная надстройка над функцией document.getElementById и где-то в недрах прототипа, скорее всего, представляет собой
function $(id,node){
return (node || document).getElementById(id)
}
как мы можем видеть, это поиск по селектору id. Он нативный для всех браузеров, и выполняется очень быстро.
Не думайте, что Prototype работает как-то иначе, делает он это точно так же как и jQuery.
Поиск по селектору в prototype это
$$('div.myclass'), функция, как и наша getElementByClassName возвращает массив DOM объектов. Это важно понимать. Не раз видел на форумах от завзятых JQuery программистов, почему не работает конструкция вида
$$('div.myclass').click(function(){alert('my clicked')})
Дело в том, что JQuery завязан на объекте $ или jQuery, и все методы этого объекта возвращают его же.
Функции Prototype более низкоуровневые, и приближены к чистому JS. Но и они возвращают не обычный массив. У возвращаемого объекта (массива) есть ряд методов, которых нет в обычном JS. Пример выше нужно записать так.
$$('div.myclass').observe('click', function(){alert('my clicked')});
Механизм observe это целый паттерн проектирования, когда поточное программирование сводится к событийному.
Метод observe нам поможет и для события onDomReady
document.observe("dom:loaded", function() {
alert('DOM загружен, работаем')
});
Методов нахождения позиции элемента в Prototype завидное множество. Предлагаю читателю самому разобраться, какой и для чего необходим, почитав документацию.
Я лишь приведу пример использования
var offset = positionedOffset($('myid'));
alert('X:'+offset[0]+' Y:'+offset[1]);
Определить браузер также не составляет труда.
Объект Prototype.Browser содержит список из основных браузеров IE, Opera, WebKit, MobileSafari и Gecko. Если браузер совпадает с используемым, то его значение выставляется в true у остальных false.
Соответственно текущий браузер можно определить так
if(Prototype.Browser.Opera)alert('Такдержать!!!');
Работать с Аяксом в Prototype также не очень сложно
new Ajax.Request('index.php', {
method: 'get',
onSuccess: function(transport){
alert(transport.responseText)
}
});
Подробнее можно почитать тут
Прототипом разобрались, перейдем Mootools
Mootools
К этой библиотеке у меня самые теплые чувства. Именно с нее я начинал знакомство с волшебным миром надстроек над JS. Кроме того, с недавнего времени стал joomla’водом, а в Joomla Mootools используется по умолчании.
Начнем как всегда с селекторов, тем более что нахождение по id или по CSS селектору тут точно такое же, как и в Prototype.
$('myid') и $$('div.myclass') делают свое дело. Кроме того, в Mootools есть еще приятный для эстетов document.id(‘myid’)
Повесить на элемент событие, тут также сходно с прототипом
$('myAnchor').addEvent('click', function(event){
alert(‘Ты кликнул на мне, о повелитель кликов!’)
});
Событие DomRead ловим по аналогии
window.addEvent('domready', function() {
alert(‘DOMзагружен и готов к работе!');
});
При подключении библиотеки Mootools, становится доступным объект Browser. В котором, также, как и в предыдущих двух библиотеках есть список популярных браузеров, но тут он слегка побольше (ie, ie6, ie7, ie8, firefox, firefox2, firefox3, safari, safari3, safari4, chrome, opera). Не стоит думать, что в jQuery или в Prototype нельзя отличить одну версию браузера от другой. И там и там есть необходимые средства, если вы захотите вы их найдете.
Я не знаю, кто и у кого списывал, но AJAX тут очень похож на Prototype’ский.
Я нашел вот такой интересный пример в документации
var myRequest = new Request({
url: 'image.jpg',
onProgress: function(event, xhr){
var loaded = event.loaded, total = event.total;
console.log(parseInt(loaded / total * 100, 10));
}
});
myRequest.send();
Он загружает фото, и при этом пишет в консоль прогресс загрузки.
Конечно сила Mootools не в этих утилитах. Эту библиотеку любят за великое множество эффектов для анимации. Но это материал для отдельной статьи. Кроме того, здесь мы рассматриваем то, что умеет библиотека в базовой комплектации. Так сказать из-под коробки. А большинство крутых эффектов надо подключать для Mootools отдельно.
Ну, вот и все. Еще раз напомню, что библиотеки не делают чего-то экстраординарного. Они делают только то, что умеет браузер. Приведенный выше пример с AJAX для jQuery и его ограничения это подтверждает. Кроме того, все функции, приведенные здесь можно повторить самому. В своем блоге, по мере возможностей, я показываю, как это сделать или тут.
Данная статья не имеет цели выявить лучшую или худшую библиотеку. Просто иногда нужно знать, как сделать то или иное действие на уже готовой, отлаженной системе. Хотя я встречал умников, которые чтобы не терять времени, подключали к уже готовому проекту на Prototype библиотеку jQuery в режиме noConflict. Я бы за такое отрывал руки, но для чего-то же этот режим был придуман. Стало быть, библиотеки можно и даже иногда нужно применять вместе.
Так как у всех библиотек есть метод $, да вы и сами его скорее всего писали то нужно научится писать не конфликтный код.
Для примера напишу, как безболезненно применять jQuery с другими библиотеками. Во первых после того, как jQuery загружен надо вызвать его метод noConflict
<script>jQuery.noConflict()</script>
После этого в коде нужно использовать не $, а jQuery
К примеру так:
jQuery('div.myclass').show()
Это то, что касается jQuery. Далее будет касаться работы со всеми библиотеками.
Плагины для jQuery, рекомендуют заносить в такое само вызывающееся замыкание
(function($){
$('div.myclass').hide()
})(jQuery)
При такой нотации если вам лень писать везде jQuery вы уже спокойно можете писать $. При этом это будет тот самый $ из jQuery. Этот код совершенно не задевает чужой код на других библиотеках и после него можно смело вызывать Mootools $ или любой другой.
Это касается любой библиотеки. Вы можете заносить свой код в такую же конструкцию, не боясь заменить чужой код своим.
Вот и все
Спасибо за внимание!
Комментарии
Делайте выводы.
т.е. мне допустим нужно в свою страницу вставить часть кода из другого домена, только так чтоб та страница грузилась с IP посетителя.
т.е. JSON это сможет сделать?
var func = function(data){alert(data);}
в этом случае полученный код может вызвать func при помощи такого кода$.getJSON('http://sitename.ru/?jscallback=func')
func('hi')Еще на такие запросы способен Flash, хотя возможно сейчас уже и нет
Жена решила занятся доставкой мебели из Икеа, в силу своих познаний я сделал на эту тему сайт . И все как то тяжело, неудачно, одним словом набрел на изящное решение тут и тут .
И моя жизнь закончилась, сломал мозги как это сделано. Подобное решение весьма полезно для верстальщиков и невероятно легко и удобно для клиентов. Осмелюсь предложить разбор этой конструкции на вашем сайте. Недельное выуживание информации в инете привело в вашу компанию, похоже что такой финт штучное дело.