How I wrote my first jQuery plugin at 15 and how to create them

Hello! I live in Uzbekistan and have been studying web development on my own for the third year now. During this time, I learned to reinvent the wheel on my own to solve the problems I faced. One of these problems and its solution will be described here. I hope you will be interested.

Why did I have to write a plugin?

I started creating a static page without using bootstrap for a number of reasons, where I needed to insert a slider. I could have just written a slider, but I wanted to find a solution that could be reused in new projects.

Therefore, I looked for plugins to insert a slider, but I still did not find a suitable plug-in that would suit me according to all criteria: mobile-friendly, with remote-controllers, so that all code fits in one file, compact code and all options are by default for sliders.

Then I decided to write my own plugin for creating sliders, which can be used in other projects and improved with the help of the community. The plugin is called Slibox.

And the second reason for writing a plugin is self-learning and development. By creating a plugin, I would gain experience in creating plugins and modules. And this knowledge could help me in the future.

Why did I use jQuery?

Although I can write code in vanilla JavaScript, I sometimes find it more convenient to work with jQuery)

How do you create jQuery plugins?

First of all, you need to understand why this plugin is created, to solve which problem. After all, you can use ready-made ones.

Once you have decided on the choice of problems, you can begin to develop.

Template

First of all, connect jQuery to your page:

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

Then, create a new file, and add this code:

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

    }
})(jQuery)

This is a self-invoking function for plugtest globalization. Yes, we will call our plugtest plugin. $ .fn is needed so that we can call this function on any element:

<div></div>

and below in the script element:

$('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

I have experience in creating APIs and applications in PHP, Laravel and Vue frameworks, I have experience with node.js, express.js. I'm also interested in creating cross-platform desktop applications and love writing vanilla JavaScript for better control of applications. I am equally interested in the tasks of the frontend and the backend.

I would like to remotely train in a close-knit team under the supervision of a mentor, where my skills (using a lightsaber) would come in handy. Thanks for the tips and opinions.