Создание JQuery-плагина поиска и замены

Вполне возможно, что вам приходилось использовать один из множества плагинов JQuery. Но если плагин не существует, его придется создать самостоятельно. Это не так сложно, как кажется. В данной статье я расскажу общие правила, которым необходимо следовать при создании плагинов, а позже мы создадим собственный плагин для поиска и замены.

Основные принципы

Есть пару моментов, которые необходимо знать при разработке плагинов. В этом разделе я расскажу о них. Рассмотрим следующий фрагмент кода:

(function( $) { $.fn.functionName = function() { return this.addClass("my-class"); };}( jQuery));

Вы, возможно, заметили, что я использую this вместо $(this). Это потому, что $.fn делает functionName частью одного и того же объекта JQuery, что и способ .addClass().

Использование $.fn возвращает объект, который включает все способы, которые используются в JQuery. Если вы создали ваши собственные способы, они также будут частью этого объекта. Поскольку функцию будет частью объекта JQuery, можете без труда использовать this вместо $(this).

При разработке необходимо пытаться сделать JQuery плагин последовательным. Это одна из многих важных особенностей JQuery, которые разработчики используют все время. Чтобы реализовать цепной способ, он должен возвращать исходный объект JQuery. Этого можно без труда добиться, добавив return, как сделал я в приведенном выше коде.

Также вы должны защитить псевдонимы идентификаторов и обеспечить, чтобы при использовании плагина не возникало конфликтов с иным кодом JavaScript. Все, что необходимо сделать для этого — обернуть возможность в выражение непосредственно вызываемой возможности, как в приведенном выше коде.

Создание плагина

Разобравшись с теорией, мы можем сосредоточиться на создании плагина JQuery. Начнем с простейшей версии, в которой мы будем заменять оригинальный текст заданным. Вот программный код, который будет это делать:

(function($) { $.fn.findReplace = function(options) { return this.each(function() { $(this).html(     $(this).html().replace(/Lorem Ipsum/g, "Замена"));    });  };}(jQuery));

Я использую регулярное выражение, чтобы заменить все вхождения Lorem Ipsum на «Замена«. Честно говоря, наш плагин в его нынешнем виде совершенно бесполезен. Посетители, как минимум, должны иметь функция найти конкретный фрагмент текста, а далее заменить его иным текстом.

Пишем плагин JQuery дальше. Мы предоставим посетителям функция задавать три параметры: текст, который необходимо найти; текст, которым необходимо заменить найденный, а также функция установить цвет фона для замененного текста. Вы также можете легко использовать эту возможность, чтобы установить значения по умолчанию для разных настроек, когда посетители намеренно или случайно не задают значения сами. Вот код, который будет это делать:

var settings = $.extend({    // Значения по умолчанию.        findText: null,    replaceText: "",    backgroundColor: "#FFF"}, options);

Я задал для findText значение null. Для replaceText имеет в себя смысл оставить пустую строку, так как, возможно, так хотел посетитель. Наиболее подходящее значение для backgroundColor — это цвет фона веб-страницы, который в большинстве случаев будет белым.

При написании плагина JQuery вы также можете легко реализовать проверку, чтобы оповестить посетителя, если он забыл задать значения.

Чтобы использовать данные значения, мы должны настроить исходный программный код плагина. Сейчас его программный код должен быть следующим:

return this.each(function() {  var StringToFind = settings.findText;   var regExpression = new RegExp(StringToFind, "g");  var replacement = "<span style='background:" + settings.backgroundColor + ";'>" + settings.replaceText + "</span>";  $(this).html(    $(this).html().replace(regExpression, replacement));});

Текст, который должен быть найден, можно легко приобрести при помощи setting.findText. Он хранится в переменной для последующего применения. Я использую конструктор RegExp, чтобы создать объект регулярного выражения. Он может применяться для динамической замены регулярных выражений.

Использование глобального модификатора гарантирует, что все вхождения StringToFind будут заменены. Я заключаю текст на замену в элемент span с встроенными стилями. И изменяю HTML-код элемента, который вызывает нашу возможность findReplace.

Посмотреть демо-версию плагина

Внесение улучшений

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

Но если посетитель решит настроить размер шрифта или произвести какие-нибудь иные изменения, он не сможет этого сделать. Кроме этого предоставлять посетителю функция задавать все данные настройки непрактично. Вместо этого можно дать посетителям функция добавлять к заменяемым элементам класс по выбору. Таким образом, они смогут вносить изменения в CSS программный код, а наш плагин будет по-прежнему компактным и простым.

Все, что необходимо сделать, это в нашей более ранней версии плагина JQuery настроить настройка backgroundColor на customClass.

var settings = $.extend({  findText: null,  replaceText: "",  backgroundColor: "#FFF"}, options);// Сейчас должно бытьvar settings = $.extend({  findText: null,  replaceText: "",  customClass: ""}, options);var replacement = "<span style='background:" + settings.backgroundColor + ";'>" + settings.replaceText + "</span>";// Сейчас должно бытьvar replacement = "<span class='" + settings.customClass + "'>" + settings.replaceText + "</span>";

Некоторые посетители плагина возможно захотят вызвать callback-функцию после того, как плагин сделал работу. Сделать это довольно просто. При написании плагина JQuery необходимо добавить настройка completeCallback, чтобы приобрести возможность обратного вызова. Тогда следующий программный код сделает все остальное:

if($.isFunction(settings.completeCallback)) {  settings.completeCallback.call(this);}

В приведенном выше фрагменте кода способ .isFunction проверяет, передал ли посетитель возможность, прежде чем выполнить код. Для вызова пользовательских возможностей надо вызвать возможность следующим образом:

$("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);  }});

Вот скриншот плагина в действии:

Создание JQuery-плагина поиска и замены
Ниже приводится полный код JQuery плагина для веб-сайта, позволяющий убедиться, что вы ничего не упустили и не перепутали:

(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 + "</span>";      $(this).html(        $(this).html().replace(regExpression, replacement)      );      if ($.isFunction(settings.completeCallback)) {        settings.completeCallback.call(this);      }    });  };}(jQuery));

Окончательная демо-версия

Заключение

Создать JQuery плагин не трудно. Просто необходимо следовать нескольким основным правилам, и все получится.

Напоследок я бы посоветовал стараться сделать плагин как можно более гибким и компактным. Никто не захочет использовать плагин на 1,5 Mb, который только находит и заменяет текст.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *