Как я в 15 лет написал свой первый jQuery плагин и как их создавать

Здравствуйте! Я живу в Узбекистане и самостоятельно изучаю веб разработку вот уже третий год. За это время я научился изобретать велосипед самостоятельно решать проблемы, с которыми я сталкивался. Одна из таких проблем и ее решение будет описана здесь. Надеюсь вам будет интересно.

Почему мне пришлось писать плагин?

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

Поэтому поискал плагины для вставки слайдера, но я так и не нашел подходящий плагин, который бы устраивал меня по всем критериям: mobile-friendly, с remote-controllers, чтобы весь код умещался в одном файле, компактный код и чтобы были все опции по умолчанию для слайдеров.

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

А второй причиной написания плагина является самообучение и развитие. Создав плагин, я набрался бы опыта в создании плагинов и модулей. А эти знания могли бы мне помочь в будущем.

Почему я использовал jQuery?

Хотя я могу написать код в ванильном JavaScript-е, мне иногда все же удобнее работать с jQuery )

Как же создавать плагины для jQuery?

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

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

Шаблон

Первым делом, подключите jQuery к своей странице:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Потом, создайте новый файл, и добавьте этот код:

(function($) {     $.fn.plugtest = function(options) {      } })(jQuery)

Это самовызывающаяся функция для глобализации plugtest. Да, мы назовем наш плагин plugtest. $.fn нужен чтобы мы могли вызвать эту функцию на какой-либо элемент:

<div></div>

и снизу в script элементе:

$('div').plugtest({})

Здесь, в качестве параметра options будет пустой объект.

Действие с this

Если сейчас я добавлю console.log(this) в эту функцию, то на консоль выйдет именно этот элемент:

(function($) {     $.fn.plugtest = function(options) {         console.log(this)     } })(jQuery)

Настройки

Теперь, мы можем поработать над настройками плагина:

(function($) {         $.fn.plugtest = function(options) {             let o = $.extend({                 greeting: 'Привет!'             }, options)             console.log(this[0].tagName + ' говорит ' + o.greeting)         }     })(jQuery)

Функция extend «скрещивает» два объекта в один. Теперь поменяем greeting в нашей инициализации:

$('div').plugtest({         greeting: "Здравствуй!" })

Открываем консоль и видим это:

Можно ещё добавить функцию возврата, чтобы возвращать в переменную все элементы:

let test = $('div').plugtest({         greeting: "Здравствуй!" })

(function($) {     $.fn.plugtest = function(options) {         let o = $.extend({             greeting: 'Привет!'         }, options)         return this.each(function() {             console.log(this[0].tagName + ' говорит ' + o.greeting)         })     } })(jQuery)

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

Slibox в github-e:

Здесь живет Slibox

Дополнительно

У меня есть опыт по созданию API и приложений на PHP, на фреймворках Laravel и Vue, имею опыт работы с node.js, express.js. Также мне интересно создавать кросс-платформенные десктопные приложения и люблю писать ванильный JavaScript для лучшего контроля приложений. Мне одинаково интересно задачи фронтэнда так и бекэнда.

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