Создание собственных модулей

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

Код внутри модуля обычно располагают внутри следующий конструкции:

(function($) {
   // Код модуля
})(jQuery);

Символ $, указанный в качестве параметра, означает, что мы можем использовать этот символ внутри конструкции как псевдоним функции jQuery(). Вместо этого символа можно указать любой другой допустимый идентификатор и использовать его внутри конструкции.

(function(js) {
   // Код модуля
})(jQuery);

В этом случае мы можем использовать идентификатор js вместо символа $.

Подключать модуль необходимо после подключения библиотеки jQuery.

<script src="jquery.js"></script>
<!-- Подключение модуля -->
<script src="jquery.myPlugin.js"></script>

Создать собственный метод можно, добавив его в объект fn. Для примера добавим метод newcolor(), позволяющий изменить цвет текста.

(function($) {
   $.fn.newcolor = function() {
      return this.css("color", "red");
   }
})(jQuery);

$("div").click(function() {
   $(this).newcolor();
});
<div>Нажмите для изменения цвета</div>

Внутри нового метода доступен указатель (this) на коллекцию элементов jQuery. По этой причине мы можем использовать метод css() для изменения цвета текста. Для того чтобы не прерывать цепочку вызовов метод должен возвращать указатель. В нашем примере этот указатель возвращает метод css(), а мы в свою очередь возвращаем его из метода newcolor().

Добавить собственный метод можно с помощью функции $.fn.extend(). В качестве параметра указывается объект. Переделаем наш предыдущий пример и используем функцию $.fn.extend().

(function($) {
   $.fn.extend({
      newcolor: function() {
         return this.css("color", "red");
      }
   });
})(jQuery);

Добавить функцию, которая будет доступна без создания коллекции элементов, можно с помощью функции $.extend(). В качестве параметра указывается объект. Для примера добавим функцию суммирования двух чисел.

(function($) {
   $.extend({
      sum: function(x, y) {
         x = parseInt(x);
         if (isNaN(x)) x = 0;
         y = parseInt(y);
         if (isNaN(y)) y = 0;
         return (x + y);
      }
   });
})(jQuery);

$("#btn1").click(function() {
   alert($.sum($("#txt1").val(), $("#txt2").val()));
});
Число 1: <input type="text" id="txt1"><br>
Число 2: <input type="text" id="txt2"><br>
<input type="button" id="btn1" value="Получить сумму чисел">

После щелчка на кнопке Получить сумму чисел будет вызвана функция $.sum(). В качестве параметров функции мы указываем значения текстовых полей.

Функция $.extend() позволяет также произвести слияние нескольких объектов. Формат функции:

<Объект> = $.extend(<Начальный объект>, <Объект1>[, ..., <ОбъектN>])

Если в начальном объекте существует такое же свойство как в других объектах, то его значение будет перезаписано, а если не существует, то свойство будет добавлено. Это позволяет определять значения опций по умолчанию. В качестве примера добавим метод newmsg(), который выводит сообщение.

(function($) {
   $.fn.extend({
      newmsg: function(obj) {
         var m = { message: "Сообщение по умолчанию" };
         m = $.extend(m, obj);
         alert(m.message);
         return this;
      }
   });
})(jQuery);

$("p").click(function() {
   $(this).newmsg().newmsg({ message:"Новое сообщение" });
});
<p>Нажмите для вывода сообщений</p>

В этом примере при щелчке на абзаце вначале будет выведено сообщение "Сообщение по умолчанию", так как мы не передали параметр. Затем получим сообщение "Новое сообщение" за счет перезаписи значения свойства message с помощью функции $.extend(). Обратите внимание на цепочку вызовов.

$(this).newmsg().newmsg({ message:"Новое сообщение" });

Это достигается за счет возвращения указателя из метода с помощью строки:

return this;

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

$(this).newmsg().newmsg({ message:"Новое сообщение" })
       .css("color", "red");

Самоучитель по jQuery
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Поиск по сайту в Яндексе