Разработка плагина для jQuery: Пять простых шагов

Разработчикам известна ситуация, когда во время создания интерактивного веб-приложения приходится писать похожий (или один и тот же) код снова и снова. В таких случаях возникает необходимость в возможности многократного использования кода. Более того, разработчик может столкнуться с проблемами масштабирования и задания пространства имен.

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

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

Как следует размышлять при разработке jQuery-плагина? Если вкратце, то при разработке jQuery-плагина вы просто добавляете написанную вами функцию в пространство имен jQuery. Также можно сказать, что вы добавляете любой свой метод в объект $.fn или объект fn из пространства имен jQuery, поскольку мы знаем, что $ это псевдоним пространства имен jQuery.

Ниже приведено несколько стандартных шагов по разработке плагина для jQuery. Убедитесь, что вы добавили библиотеку jquery в свой скрипт.

1. Создайте плагин с пользовательским именем.

Например, мы создаем плагин под именем tgs. Ниже приведен пример сценария для этой функции tgs.

$.fn.tgs = function() {
     // Здесь располагается реализация нашего плагина 
};

После добавления функции tgsbegin в объект $.fn, эта функция становится доступной в пространстве имен jQuery, и теперь вы можете запустить эту функцию с помощью следующей команды:

$("#someId").tgs( ) ;

2. Задавайте более одного элемента DOM

Для этого вы можете использовать jQuery-функцию each, как показано ниже:

$.fn.tgs = function() {
        this.each(function() {
        // Здесь вы располагаете каждый из заданных элементов
    });
};

Если вы используете плагин для нескольких элементов (обозначенных классом) на странице, то плагин можно вызвать следующим образом:

$(".someClass").tgs();

3. Свяжите плагин с другими jQuery-функциями

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

$.fn.tgs = function() {
        return this.each(function() {
        // Здесь вы располагаете каждый из задаваемых элементов
        // и возвращаете его
    });
};

Теперь вы можете связать его с другими jQuery-функциями, как показано в следующем примере: $("#someId").tgs().removeClass("someClass");

4. Сделайте плагин конфигурируемым путем задания опций

При помощи jQuery.extend вы можете объединить два объекта. Здесь мы используем этот метод для соединения заданных вами опций со стандартными опциями (опциями по умолчанию). См. пример ниже:

$.fn.tgs = function(options) {
        var settings = $.extend({
        // Ниже приведены стандартные настройки.
        fontStyle: "bold",
        backgroundColor: "yellow"
    }, options );
};

В приведенном выше сценарии опции будут заданы следующим образом:

$( "#someId" ).tgs({
      fontStyle: "italic",
      backgroundColor: "white"
});

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

var options = {
    fontStyle: "italic",
    backgroundColor: "White"
};

$("#someId").tgs(options);

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

5. Самовызывающаяся функция или замыкание

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

(function($){
  $.fn.tgs = function(options) {
      var settings = $.extend({

      // Ниже приведены настройки по умолчанию.
      fontStyle: "bold",
      backgroundColor: "yellow"

    }, options );

    //При необходимости, реализация плагина размещается здесь 
    //При необходимости, верните что-нибудь отсюда 
  };
}(jQuery));

Комментарии

0