Cómo escribí mi primer complemento jQuery a los 15 años y cómo crearlos

¡Hola! Vivo en Uzbekistán y he estado estudiando desarrollo web por mi cuenta por tercer año. Durante este tiempo, aprendí a reinventar la rueda por mi cuenta para resolver los problemas que enfrentaba. Aquí se describirá uno de estos problemas y su solución. Espero lo encuentres interesante.

¿Por qué tuve que escribir un complemento?

Comencé a crear una página estática sin usar bootstrap por varias razones, donde necesitaba insertar un control deslizante. Podría haber escrito un control deslizante, pero quería encontrar una solución que pudiera reutilizarse en nuevos proyectos.

Por lo tanto, busqué complementos para insertar un control deslizante, pero aún no pude encontrar un complemento adecuado que se adaptara a todos los criterios: compatible con dispositivos móviles, con controles remotos, de modo que todo el código cabe en un archivo, código compacto y que hay todas las opciones predeterminadas para deslizadores.

Luego decidí escribir mi propio complemento para crear controles deslizantes, que se pueden usar en otros proyectos y mejorar con la ayuda de la comunidad. El complemento se llama Slibox.

Y la segunda razón para escribir un complemento es el autoaprendizaje y el desarrollo. Al crear un complemento, ganaría experiencia en la creación de complementos y módulos. Y este conocimiento podría ayudarme en el futuro.

¿Por qué usé jQuery?

Aunque puedo escribir código en JavaScript vainilla, a veces me parece más conveniente trabajar con jQuery)

¿Cómo crear complementos jQuery?

En primer lugar, debe comprender por qué se crea este complemento, para resolver qué problema. Después de todo, puede usar los ya hechos.

Una vez que haya decidido la elección de los problemas, puede comenzar a desarrollar.

Modelo

En primer lugar, conecta jQuery a tu página:

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

Luego, cree un nuevo archivo y agregue este código:

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

    }
})(jQuery)

Esta es una función de auto invocación para la globalización plugtest. Sí, llamaremos a nuestro plugin plugtest. $ .fn es necesario para que podamos llamar a esta función en cualquier elemento:

<div></div>

y abajo en el elemento de 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

Tengo experiencia en la creación de API y aplicaciones en frameworks PHP, Laravel y Vue, tengo experiencia con node.js, express.js. También estoy interesado en crear aplicaciones de escritorio multiplataforma y me encanta escribir JavaScript vainilla para un mejor control de la aplicación. Estoy igualmente interesado en las tareas del frontend y el backend.

Me gustaría entrenar remotamente en un equipo muy unido bajo la supervisión de un mentor, donde mis habilidades (usando un sable de luz) serían útiles. Gracias por los consejos y opiniones.