Если вы когда-либо использовали jQuery, то, скорее всего, вы также использовали как минимум один из его многочисленных плагинов. Просто подумайте о какой-либо полезной функциональной возможности, которую вы хотели бы реализовать в jQuery, и я почти уверен, что для этого уже существует плагин.

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

Основные сведения

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

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

Во-первых, вы, вероятно, заметили, что я использую в нашем плагине this, а не $(this). Я это делаю, поскольку за счет использования $.fn functionName становится частью того же самого объекта jQuery, что и метод .addClass() .

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

Во-вторых, вам следует постараться добавить для плагина возможность сцепления его методов. Поскольку наша функция теперь является частью объекта jQuery, то мы можем использовать this вместо $(this).Это одна из главных возможностей jQuery, которой разработчики пользуются все время. Для того чтобы добавить для метода возможность сцепления, он должен возвращать оригинальный объект jQuery. Это можно осуществить при помощи добавления return, как я сделал выше в коде.

И, наконец, вам следует ограничить область видимости синонима $ (* для jQuery – Прим. пер.) для того, чтобы при использовании вашего плагина с другим кодом на JavaScript не возникало никаких конфликтных ситуаций. Для этого вам необходимо лишь обернуть функцию в функцию-выражение немедленного вызова именно так, как в коде выше.

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

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

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

Я использую регулярное выражение для замены всех фрагментов «Lorem Ipsum» (* название временного текста, который дизайнер вводит вместо основного в макет страницы, чтобы сосредоточить внимание на графических элементах свёрстанного листа – Прим. пер.) «Replacement» (* замена – Прим. пер.). По правде говоря, в нынешнем виде наш плагин совсем бесполезен. Как минимум у пользователей должна быть возможность поиска фрагмента текста и его замены другим текстом по их выбору.

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

var settings = $.extend({
    // These are the defaults.    
    findText: null,
    replaceText: "",
    backgroundColor: "#FFF"
}, options);

Я задал значением findText   null (* пустое значение – Прим. пер.). Для replaceText наиболее разумно задать значение пустой строки, поскольку если пользователь не задал значение для замены, то, возможно, он или она просто хотели, чтобы оно было пустым. Для опции backgroundColor наиболее подходящим значением было бы значение цвета фона веб-страницы, который в большинстве случаев белый. Также вы могли бы добавить некоторые проверки для оповещения пользователей о том, что они забыли установить значения этих опций.

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

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 для создания объекта регулярного выражения. Его можно использовать для динамической замены регулярных выражений.

За счет использования специального модификатора g (* включает глобальный режим, в котором шаблон применяется ко всей строке, то есть поиск не прекращается после обнаружения первого совпадения – Прим. пер.), гарантируется, что произойдет замена всех имеющихся значений StringToFind. Я заключил текст для замены в элемент span со строчным стилевым оформлением. И, наконец, я обновил код HTML элемента, для которого вызывается наша функция findReplace.

В этой демоверсии наш плагин показан в действии.

Совершенствуем плагин

Наш небольшой плагин работает великолепно. Вы можете его еще усовершенствовать при помощи нескольких модификаций. Мы уже предоставили опцию для изменения цвета фона новых фрагментов.

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

Нам необходимо лишь заменить опцию backgroundColor в нашей более ранней версии на customClass в соответственных местах.

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 + "</span>";
// Should Now Be
var replacement = "<span class='" + settings.customClass + "'>" + settings.replaceText + "</span>";

Некоторым пользователям может понадобиться возможность вызова функции обратного вызова после того, как плагин сделал свое дело. Это довольно просто реализовать. Вам просто необходимо добавить опцию 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);
  }
});

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

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

(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 очень просто. Для этого вам просто необходимо следовать нескольким общим принципам.

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

Хотел бы дать вам один совет: делайте плагин как можно более гибким и минимальным по размеру. Никто не будет использовать плагин размером 15 Кбит, который служит просто для поиска и замены текста.

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