Как расширить возможности jQuery

На сегодняшний день библиотека jQuery является одним из самых популярных javascript-фреймворков. Отчасти причиной этой популярности стала простота ее использования, отчасти широкая функциональность и кроссплатформенность, но, пожалуй, самая важная деталь ее популярности – это расширяемость. jQuery спроектирована таким образом, что без особого труда, ее функциональность может расширить любой, кто угодно, кто хоть немного в теме icon smile Как расширить возможности jQuery .

Да, именно поэтому в Интернете развелось огромное кол-во плагинов для этой библиотеки (большинство не без глюков), которые выполняют всевозможные задачи. Сложно даже придумать плагин, который будет уникальным в своем роде.

Как Вы уже догадались, сегодня речь пойдет про написание плагинов и других расширений для этой библиотеки. Да, кроме плагинов для jQuery можно написать и другие вещи, которые расширят ее функциональность. Например, новый вид селектора. Но, обо всем по порядку.

Плагин для jQuery по сути, это просто метод для класса. Например, $(‘#img’).show(). Здесь show() это тоже плагин (хотя он же и метод).

Добавляем метод

Методы добавляются очень просто. Вот пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.pack.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function()	{
	$.fn.showAlert = function() {
		alert('Не нажимай больше!');
		return this;
	}
});
</script>
<a href="javascript:void(0);" onClick="$(this).showAlert(); return false;">Нажми</a>
</body>
</html>

Здесь мы использовали конструкцию

    $.fn.имя_нового_метода = function() { … }

для добавления нашего нового метода.
Еще один интересный момент в этом примере – это использование return this в конце метода. Эта конструкция возвращает объект, над которым происходит манипуляция для дальнейших воздействий на него. Другими словами это реализация того самого механизма цепочек, про который шла речь в обзорной статье этого фреймворка. В дальнейшем это позволяет нам сделать что-то вроде этого:

    $(this)->showAlert()->hide();

Параметры для метода

Идем дальше. Вполне возможно, что Вы будете писать по истине крутой плагин, в котором будет не обойтись без передачи параметров в методы. Можно сделать и так, и даже больше – в jQuery есть поддержка параметров по-умолчанию.

Чтобы не быть голословным, расширю функционал предыдущего примера:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.pack.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function()	{
	$.fn.showAlert = function(options) {

		// задаем значения по-умолчанию
		var settings = {text : 'Не нажимай больше!'};

		// расширяем или обновляем набор с учетом полученных аргументов
		settings = $.extend(settings, options);

		alert(settings.text);
		return this;
	}
});
</script>
<a href="javascript:void(0);" onClick="$(this).showAlert({text:'Hello'}); return false;">Нажми</a>
</body>
</html>

Механизм опций по-умолчанию реализуется специальным методом $.extend, которому первым параметром передается массив значений по-умолчанию, а во втором – параметры, которые были переданы методу. Если extend находит в обоих массивах элемент с одинаковыми элементами, то перезаписывает значение по-умолчанию – новым, а если не находит, то добавляет новые параметры в список.

С помощью метода extend можно не только расширять наборы параметров, но и расширять само ядро jQuery. Для этого нужно немного изменить способ вызова этого метода:

$.fn.extend({
  check       : function() { ... },
  uncheck     : function() { ... },
  toggleCheck : function() { ... }
});

Так можно заменить поведение некоторых методов jQuery, например.

И даже этим функциональность метода extend не ограничивается. Метод extend позволяет вам добавлять свои селекторы, но это уже скорее для знатоков javascript (нужно будет покопаться в исходнике jQuery, чтобы что-то нормальное написать).

Если Вы загляните (может уже заглядывали?) в исходный код jQuery, то увидите, что больше половины функциональности библиотеки довешивается именно этим методом. Другими словами, метод extend, действительно оправдывает свое название (в переводе с англ. Extend – “расширять”).

Aliases

В чужих скриптах на jQuery можно часто встретить различные вызовы этой библиотеки: кто-то использует знак $, а кто-то и jQuery целиком пишет. Теоретически, вы можете задать свое обозначение для вызова. Единственное правило – имя должно быть валидным именем javascript-переменной.
Все имена, кроме jQuery являются альясами, так как определяют тот же самый объект, что и jQuery.
Для того, чтобы использовать какой-то другой альяс для имени jQuery можно сделать так:

(function(myjQuery) {
  // здесь можно использовать вместо jQuery myjQuery
})(jQuery);

Поэтому, если внутри плагина Вы хотите использовать другое имя, то можете спокойно это делать, используя пример выше.

Другое место, где можно использовать альясы для jQuery, кроме файла вашего плагина – это обычная веб-страница, которая содержит jQuery – код.

Делаете так:

jQuery(function(myjQuery) {
   // здесь уже можно использовать myjQuery вместо jQuery
 });

И используете альяс, который вам угодно и на странице.

Вот в принципе и все инструменты, которые представлены в jQuery для расширения ее возможностей (исчерпывающие я думаю). Так что, пользуйтесь и не забывайте заглядывать в исходник jQuery – это еще больше расширит ваши возможности в работе с jQuery. icon smile Как расширить возможности jQuery

Удачи.




Читайте также:



Один ответ на “Как расширить возможности jQuery”

  1. Артём
    Апрель 14th, 2010

    Алиасы – причём здесь расширения?
    И статья далеко не исчерпывающая, а как же свои псевдоселекторы, например?

Оставить комментарий


© 2008 - 2012 i-novice.net | Все права защищены.