Здравствуйте! Я живу в Узбекистане и самостоятельно изучаю веб разработку вот уже третий год. За это время я научился изобретать велосипед самостоятельно решать проблемы, с которыми я сталкивался. Одна из таких проблем и ее решение будет описана здесь. Надеюсь вам будет интересно.
Почему мне пришлось писать плагин?
Я стал создавать статичную страничку, не используя 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:
Дополнительно
У меня есть опыт по созданию API и приложений на PHP, на фреймворках Laravel и Vue, имею опыт работы с node.js, express.js. Также мне интересно создавать кросс-платформенные десктопные приложения и люблю писать ванильный JavaScript для лучшего контроля приложений. Мне одинаково интересно задачи фронтэнда так и бекэнда.
Хотелось бы удаленно стажироваться в сплоченной команде под наблюдением ментора, где бы пригодились мои навыки (владения световым мечом). Спасибо за советы и мнения.
