Если вы когда-либо использовали jQuery, вполне вероятно, что вы также использовали хотя бы один из его многочисленных плагинов. Просто подумайте о чем-нибудь полезном, что вы хотели бы сделать в jQuery, и я почти уверен, что для этого существует плагин.
Иногда, когда плагин не существует, вам может потребоваться создать его самостоятельно. Это не так сложно, как кажется. В этом уроке я рассмотрю некоторые общие правила, которые необходимо соблюдать при создании плагинов, а позже мы создадим наш собственный плагин поиска и замены.
Основы
Есть несколько вещей, которые вы должны знать при разработке плагинов. В этом разделе я расскажу обо всех по одному. Рассмотрим следующий фрагмент кода:
|
1
2
3
4
5
|
(function ( $ ) {
$.fn.functionName = function() {
return this.addClass(«my-class»);
};
}( jQuery ));
|
Во-первых, вы могли заметить, что я использую this вместо $(this) в нашем плагине. Это потому, что $.fn делает functionName частью того же объекта jQuery, что и метод .addClass() .
Позвольте мне объяснить, чтобы прояснить это. Использование $.fn всегда возвращает объект jQuery, который содержит все методы, которые вы используете в jQuery. Если вы когда-нибудь создадите свои собственные методы, они также будут частью этого объекта. Поскольку ваша функция теперь является частью объекта jQuery, вы можете использовать this вместо $(this) .
Во-вторых, вы должны попытаться сделать ваш плагин цепным. Это одна из многих важных функций jQuery, которую разработчики используют постоянно. Чтобы сделать метод цепным, он должен вернуть исходный объект jQuery. Этого можно достичь, просто добавив return как я делал в коде выше.
Наконец, вы должны защитить псевдоним $ и убедиться, что использование вашего плагина с другим кодом JavaScript не приведет к конфликту. Все, что вам нужно сделать, чтобы убедиться, что этого не произойдет, — это просто обернуть функцию в немедленно вызванное выражение функции, как в коде выше.
Создание плагина
С основами нашего пути мы можем сосредоточиться на нашей главной задаче, то есть создании плагина. Мы начнем с примитивной версии, где мы просто заменим исходный текст некоторым предопределенным текстом. Вот код для этого:
|
1
2
3
4
5
6
7
8
9
|
(function($) {
$.fn.findReplace = function(options) {
return this.each(function() {
$(this).html(
$(this).html().replace(/Lorem Ipsum/g, «Replacement»)
);
});
};
}(jQuery));
|
Я использую регулярные выражения, чтобы заменить все вхождения Lorem Ipsum с заменой . Если честно, в своем нынешнем виде наш плагин абсолютно бесполезен. Пользователи должны, по крайней мере, иметь возможность найти фрагмент текста, а затем заменить его другим текстом по своему выбору.
На данный момент, способность принимать различные варианты приходит к нам на помощь. Мы предоставим пользователям три варианта: текст для поиска, текст для замены и возможность установить цвет фона заменяемого текста. Вы также можете использовать эту возможность для установки значений по умолчанию для различных параметров, в случае, если пользователи сознательно или неосознанно не установили значение самостоятельно. Вот код для этого:
|
1
2
3
4
5
6
|
var settings = $.extend({
// These are the defaults.
findText: null,
replaceText: «»,
backgroundColor: «#FFF»
}, options);
|
Я установил для findText значение null . Для replaceText пустая строка наиболее целесообразна, потому что, если пользователь не установил значение замены, возможно, он или она просто хотели, чтобы оно было пустым. Наиболее подходящим значением для backgroundColor будет цвет фона веб-страницы, который в большинстве случаев является белым. Вы также можете установить некоторые проверки, чтобы уведомить пользователей, если они забыли предоставить значения.
Чтобы использовать эти значения, нам также придется изменить наш исходный код плагина. Наш код плагина теперь должен быть:
|
1
2
3
4
5
6
7
8
|
return this.each(function() {
var StringToFind = settings.findText;
var regExpression = new RegExp(StringToFind, «g»);
var replacement = «<span style=’background:» + settings.backgroundColor + «;’>» + settings.replaceText + «
$(this).html(
$(this).html().replace(regExpression, replacement)
);
});
|
Текст, который необходимо найти, доступен с помощью setting.findText . Это хранится в переменной для последующего использования. Я использую конструктор RegExp для создания объекта регулярного выражения. Это может быть использовано для динамической замены регулярных выражений.
Использование глобального модификатора гарантирует, что все вхождения StringToFind будут заменены. Я вложил заменяющий текст в элемент span с помощью встроенного стиля. Наконец, я обновляю HTML элемента, который вызвал нашу функцию findReplace .
Эта демонстрация показывает наш плагин в действии.
Делать улучшения
Наш милый маленький плагин работает отлично. Вы можете сделать это еще более удивительным с помощью нескольких модификаций. Мы уже предоставили возможность изменить цвет фона заменяемых элементов.
Однако если пользователи решат изменить размер шрифта, добавить некоторые отступы или внести другие изменения, они не смогут. Также нецелесообразно предоставлять все эти варианты. Вместо этого мы собираемся дать пользователям возможность добавить класс по своему выбору в заменяемые элементы. Таким образом, они могут сами вносить изменения в CSS, и наш плагин также будет легковесным.
Все, что вам нужно сделать, это изменить параметр backgroundColor в нашей предыдущей версии на customClass в соответствующих местах.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
var settings = $.extend({
findText: null,
replaceText: «»,
backgroundColor: «#FFF»
}, options);
// Should Now Be
var settings = $.extend({
findText: null,
replaceText: «»,
customClass: «»
}, options);
var replacement = «<span style=’background:» + settings.backgroundColor + «;’>» + settings.replaceText + «
// Should Now Be
var replacement = «<span class='» + settings.customClass + «‘>» + settings.replaceText + «
|
Некоторым пользователям вашего плагина может быть интересно вызвать функцию обратного вызова после того, как плагин выполнил свою работу. Это довольно легко достичь. Вам просто нужно добавить параметр completeCallback чтобы получить функцию обратного вызова от пользователей. Тогда код ниже позаботится обо всем остальном:
|
1
2
3
|
if ($.isFunction(settings.completeCallback)) {
settings.completeCallback.call(this);
}
|
В приведенном выше фрагменте .isFunction метод .isFunction проверяет, действительно ли пользователь передал функцию перед ее выполнением. Чтобы вызвать пользовательские функции, вам нужно вызвать функцию следующим образом:
|
1
2
3
4
5
6
7
8
|
$(«a»).findReplace({
findText: «Lorem Ipsum»,
replaceText: «I was replaced too!»,
customClass: «match-link»,
completeCallback: function() {
$(‘.notification’).text(‘Executed the plugin on all links’).fadeOut(5000);
}
});
|
Вот скриншот плагина в действии:
Я публикую полный код нашего плагина, чтобы убедиться, что нет путаницы:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
(function($) {
$.fn.findReplace = function(options) {
var settings = $.extend({
findText: null,
replaceText: «»,
customClass: «»,
completeCallback: null
}, options);
return this.each(function() {
var StringToFind = settings.findText;
var regExpression = new RegExp(StringToFind, «g»);
var replacement = «<span class='» + settings.customClass + «‘>» + settings.replaceText + «
$(this).html(
$(this).html().replace(regExpression, replacement)
);
if ($.isFunction(settings.completeCallback)) {
settings.completeCallback.call(this);
}
});
};
}(jQuery));
|
Последние мысли
Создание плагина в jQuery совсем не сложно. Вы просто должны следовать нескольким основным правилам, и вы готовы к работе.
Если вас интересуют другие плагины, которые у нас есть, а также то, что они могут сделать для вас в любом из ваших существующих проектов, тогда, пожалуйста, ознакомьтесь с работой jQuery, которую мы имеем на рынке.
Единственное, что я бы порекомендовал, это сделать плагин максимально гибким и сохранить его размер как можно меньше. Никто не собирается использовать плагин 15k, который только находит и заменяет текст.
Наконец, я надеюсь, что вам понравился этот урок, и если у вас есть какие-либо вопросы относительно этого урока, дайте мне знать в комментариях.