[JavaScript, jQuery, Программирование, Разработка веб-сайтов] Как я в 15 лет написал свой первый jQuery плагин и как их создавать

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 3 месяца
Сообщений: 27286

news_bot ^® написал(а)
02-Июл-2020 13:33

Цитировать

Здравствуйте! Я живу в Узбекистане и самостоятельно изучаю веб разработку вот уже третий год. За это время я научился изобретать велосипед самостоятельно решать проблемы, с которыми я сталкивался. Одна из таких проблем и ее решение будет описана здесь. Надеюсь вам будет интересно.
Почему мне пришлось писать плагин?
Я стал создавать статичную страничку, не используя bootstrap по ряду причин, где мне было необходимо вставить слайдер. Можно было бы просто написать слайдер, но хотелось найти решение, которое можно повторно использовать в новых проектах.
Поэтому поискал плагины для вставки слайдера, но я так и не нашел подходящий плагин, который бы устраивал меня по всем критериям: mobile-friendly, с remote-controllers, чтобы весь код умещался в одном файле, компактный код и чтобы были все опции по умолчанию для слайдеров.
Потом я решил написать свой плагин для создания слайдеров, который можно использовать в других проектах и усовершенствовать с помощью сообщества. Плагин называется Slibox.
А второй причиной написания плагина является самообучение и развитие. Создав плагин, я набрался бы опыта в создании плагинов и модулей. А эти знания могли бы мне помочь в будущем.
Почему я использовал jQuery?
Хотя я могу написать код в ванильном JavaScript-е, мне иногда все же удобнее работать с jQuery )
Как же создавать плагины для jQuery?
В первую очередь, надо понимать для чего создается этот плагин, для решения какой именно проблемы. Ведь можно же использовать готовые.
После того, как вы определитесь с выбором проблем, вы можете приступать к разработке.
Шаблон
Первым делом, подключите jQuery к своей странице:

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

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

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

и снизу в 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 для лучшего контроля приложений. Мне одинаково интересно задачи фронтэнда так и бекэнда.
Хотелось бы удаленно стажироваться в сплоченной команде под наблюдением ментора, где бы пригодились мои навыки (владения световым мечом). Спасибо за советы и мнения.
===========
Источник:
habr.com
===========
Похожие новости:

Теги для поиска: #_javascript, #_jquery, #_programmirovanie (Программирование), #_razrabotka_vebsajtov (Разработка веб-сайтов), #_jquery, #_javascript, #_jquery_plugins, #_vebrazrabotka (веб-разработка), #_obrazovanie (образование), #_opyt (опыт), #_javascript, #_jquery, #_programmirovanie (
Программирование
), #_razrabotka_vebsajtov (
Разработка веб-сайтов
)

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 11-Май 14:46
Часовой пояс: UTC + 5