jQuery — самая популярная библиотека JavaScript, и многие сайты используют ее для динамических эффектов и функциональности Ajax. Тем не менее, относительно немногие разработчики углубляются в глубины разработки плагинов.
В этом уроке мы создадим простой плагин для объяснения основ. Наш код перевернет текст внутри одного или нескольких выбранных узлов — просмотрите демонстрационную страницу .
Зачем создавать плагин jQuery?
Одним словом: повторное использование. Расширяя jQuery, вы создаете повторно используемые компоненты, которые можно использовать на любой веб-странице. Ваш код инкапсулирован, и существует меньший риск того, что вы будете использовать те же имена функций в других местах.
Как работает jQuery
По своей сути jQuery передается элементам DOM или строке, содержащей селектор CSS. Он возвращает объект jQuery, который представляет собой массив массивов узлов DOM. Один или несколько методов могут быть затем связаны с этим набором узлов, например
// color all <p> tags red
$("p").css("color", "red");
Примечание: хотя библиотека jQuery называется «jQuery», «$» является переменной-ярлыком, которая ссылается на нее. Имейте в виду, что другие библиотеки могут получить «$» для себя.
Как работают плагины jQuery
jQuery позволяет добавлять методы в свою библиотеку. При вызове эти методы передаются объекту jQuery в объекте JavaScript this. Узлами DOM можно манипулировать по мере необходимости, и метод должен возвращать ‘this’, чтобы другие функции могли быть связаны.
Наш пример плагина будет вызываться с использованием кода, такого как:
// reverse the text in all <p> tags
$("p").reverseText();
Мы также добавим два необязательных параметра: minlength и maxlength. Когда определено, длина строки должна находиться между этими пределами для того, чтобы произошло обращение.
Плагин Декларация
Плагины определяются с помощью функции jQuery fn, например
jQuery.fn.reverseText = function(params) { ... };
Использование «jQuery» вместо «$» гарантирует отсутствие конфликтов с другими библиотеками JavaScript. Весь наш внутренний код должен также ссылаться на «jQuery», а не на «$». Тем не менее, мы можем немного сэкономить при наборе текста и уменьшить размер файла, используя анонимную функцию:
(function($) {
$.fn.reverseText = function(params) { ... };
})(jQuery);
Эта функция запускается немедленно и передается jQuery в качестве параметра с именем ‘$’. Поскольку ‘$’ является локальной переменной, мы можем предположить, что она всегда ссылается на библиотеку jQuery, а не на другую библиотеку, которая сначала захватила глобальную переменную ‘$’.
Параметры плагина
Для нашего плагина нам нужны два параметра: minlength и maxlength. Проще всего определить их как аргументы функции, например
(function($) {
$.fn.reverseText = function(minlength, maxlength) { ... };
})(jQuery);
// example
$("p").reverseText(0, 100);
Но что, если мы решим добавить дополнительные параметры позже? Наш плагин может иметь десятки опций — обработка параметров быстро станет запутанной. В качестве альтернативы мы могли бы передать один объект JSON, например
(function($) {
$.fn.reverseText = function(params) { ... }
})(jQuery);
// example
$("p").reverseText( { minlength: 0, maxlength: 100 } );
Первая строка в нашей функции reverseText должна определять набор параметров по умолчанию, а затем перезаписывать их любыми пользовательскими значениями. Функция расширения jQuery может справиться с этим для нас:
// merge default and user parameters
params = $.extend( {minlength: 0, maxlength: 99999}, params);
Следовательно, params.minlength равен 0, а params.maxlength равен 99999, если только вызывающий код не переопределяет эти значения.
Код плагина
Теперь мы можем написать наш основной код плагина:
// traverse all nodes
this.each(function() {
// express a single node as a jQuery object
var $t = $(this);
// find text
var origText = $t.text(), newText = '';
// text length within defined limits?
if (origText.length >= params.minlength && origText.length <= params.maxlength) {
// reverse text
for (var i = origText.length-1; i >= 0; i--) newText += origText.substr(i, 1);
$t.text(newText);
}
});
Объяснение:
- Функция this.each обходит все DOM-узлы jQuery и вызывает анонимную функцию.
- Внутри функции this содержит один узел. Коллекция узлов jQuery присваивается $ t, поэтому мы можем запускать методы jQuery.
- Переменной origText назначается текстовая строка в узле DOM. newText установлен в пустую строку.
- Если длина origText находится между params.minlength и params.maxlength, цикл создает обратную текстовую строку в newText. Затем DOM-узел обновляется соответствующим образом.
Не ломай цепь!
Наконец, мы должны не забывать возвращать объект jQuery, чтобы другие методы могли быть связаны:
return this;
Завершенный код
Наш код плагина завершен:
(function($) {
// jQuery plugin definition
$.fn.reverseText = function(params) {
// merge default and user parameters
params = $.extend( {minlength: 0, maxlength: 99999}, params);
// traverse all nodes
this.each(function() {
// express a single node as a jQuery object
var $t = $(this);
// find text
var origText = $t.text(), newText = '';
// text length within defined limits?
if (origText.length >= params.minlength && origText.length <= params.maxlength) {
// reverse text
for (var i = origText.length-1; i >= 0; i--) newText += origText.substr(i, 1);
$t.text(newText);
}
});
// allow jQuery chaining
return this;
};
})(jQuery);
Этот файл сохраняется как jquery.reversetext.js. Затем мы можем включить его в любую HTML-страницу после загрузки библиотеки jQuery, например,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>jQuery plugin: reverseText demonstration</title>
</head>
<body>
<h1>jQuery plugin: reverseText</h1>
<p>This jQuery plugin reverses all the text in the selected nodes.</p>
<ul>
<li>This text will be reversed</li>
<li>This text will not be reversed</li>
<li>reversed</li>
<li>not reversed</li>
</ul>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.reversetext.js"></script>
<script type="text/javascript">
// reverse even-numbered LI tag text
$("ul li:even").reverseText();
</script>
</body>
</html>
В списке на этой странице теперь текст, измененный на первую и третью марки, перевернут (помните, что первый элемент пронумерован от 0):
Ресурсы:
- Посмотреть демонстрационную страницу плагина
- Посмотреть плагин код JavaScript
- Скачать плагин и пример кода
Теперь у вас должно быть хорошее понимание разработки плагинов jQuery. Форум SitePoint JavaScript также является отличным источником помощи и советов.
Скоро: новый учебник из трех частей, описывающий, как создать полезный компонент страницы в виде плагина jQuery.