Como escrevi meu primeiro plug-in jQuery aos 15 anos e como criá-los

Olá! Eu moro no Uzbequistão e tenho estudado sozinho o desenvolvimento da web pelo terceiro ano. Durante esse período, aprendi a inventar uma bicicleta para resolver de forma independente os problemas que encontrei. Um desses problemas e sua solução serão descritos aqui. Espero que você esteja interessado.

Por que eu tive que escrever um plugin?

Comecei a criar uma página estática sem usar o bootstrap por vários motivos, onde era necessário inserir um controle deslizante. Alguém poderia escrever um controle deslizante, mas eu gostaria de encontrar uma solução que possa ser reutilizada em novos projetos.

Portanto, procurei plugins para inserir um controle deslizante, mas ainda não consegui encontrar um plug-in adequado para todos os critérios: otimizado para dispositivos móveis, com controladores remotos, para que todo o código caiba em um arquivo, código compacto e que haja todas as opções padrão para controles deslizantes.

Decidi escrever meu próprio plugin para criar controles deslizantes, que podem ser usados ​​em outros projetos e aprimorados com a ajuda da comunidade. O plugin é chamado Slibox.

E a segunda razão para escrever um plugin é auto-aprendizado e desenvolvimento. Ao criar um plugin, eu ganharia experiência na criação de plugins e módulos. E esse conhecimento pode me ajudar no futuro.

Por que eu usei o jQuery?

Embora eu possa escrever código em JavaScript vanilla, às vezes acho mais conveniente trabalhar com jQuery)

Como criar plugins jQuery?

Primeiro de tudo, você precisa entender por que esse plug-in é criado, para resolver qual problema. Afinal, você pode usar os já prontos.

Depois de decidir sobre a escolha dos problemas, você pode começar a desenvolver.

Modelo

Primeiro, conecte o jQuery à sua página:

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

Em seguida, crie um novo arquivo e adicione este código:

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

    }
})(jQuery)

Esta é uma função auto-invocadora para a globalização de plug-ins. Sim, chamaremos nosso plugin plugtest. $ .fn é necessário para que possamos chamar esta função em algum elemento:

<div></div>

e abaixo no elemento 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

Tenho experiência na criação de APIs e aplicativos nos frameworks PHP, Laravel e Vue, tenho experiência com node.js, express.js. Também estou interessado em criar aplicativos de desktop multiplataforma e adoro escrever JavaScript vanilla para melhor controle dos aplicativos. Estou igualmente interessado nas tarefas do front-end e do back-end.

Gostaria de treinar remotamente em uma equipe unida sob a supervisão de um mentor, onde minhas habilidades (posse de um sabre de luz) seriam úteis. Obrigado pelos conselhos e opiniões.