Comment j'ai écrit mon premier plugin jQuery à 15 ans et comment les créer

salut! Je vis en Ouzbékistan et j'étudie seul le développement Web depuis la troisième année. Pendant ce temps, j'ai appris à réinventer la roue par moi- même pour résoudre les problèmes auxquels je faisais face. Un de ces problèmes et sa solution seront décrits ici. J'espère que vous serez intéressé.

Pourquoi ai-je dû écrire un plugin?

J'ai commencé à créer une page statique sans utiliser d'amorçage pour un certain nombre de raisons pour lesquelles j'avais besoin d'insérer un curseur. J'aurais pu écrire un slider, mais je voulais trouver une solution qui pourrait être réutilisée dans de nouveaux projets.

Par conséquent, j'ai cherché des plugins pour insérer un curseur, mais je n'ai toujours pas trouvé de plug-in adapté qui me conviendrait selon tous les critères: mobile-friendly, avec télécommandes, pour que tout le code rentre dans un seul fichier, le code compact et toutes les options sont par défaut pour les curseurs.

Ensuite, j'ai décidé d'écrire mon propre plugin pour créer des sliders, qui peuvent être utilisés dans d'autres projets et améliorés avec l'aide de la communauté. Le plugin s'appelle Slibox.

Et la deuxième raison d'écrire un plugin est l'auto-apprentissage et le développement. En créant un plugin, je gagnerais de l'expérience dans la création de plugins et de modules. Et cette connaissance pourrait m'aider à l'avenir.

Pourquoi ai-je utilisé jQuery?

Bien que je puisse écrire du code en JavaScript vanilla, je trouve parfois plus pratique de travailler avec jQuery)

Comment créer des plugins jQuery?

Tout d'abord, vous devez comprendre pourquoi ce plugin est créé, pour résoudre quel problème. Après tout, vous pouvez en utiliser des prêts à l'emploi.

Après avoir décidé du choix des problèmes, vous pouvez commencer à développer.

Modèle

Tout d'abord, connectez jQuery à votre page:

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

Ensuite, créez un nouveau fichier et ajoutez ce code:

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

    }
})(jQuery)

Il s'agit d'une fonction auto-appelante pour la globalisation des plugtest. Oui, nous appellerons notre plugin plugtest. $ .fn est nécessaire pour que nous puissions appeler cette fonction sur n'importe quel élément:

<div></div>

et ci-dessous dans l'élément 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

J'ai de l'expérience dans la création d'API et d'applications dans les frameworks PHP, Laravel et Vue, j'ai de l'expérience avec node.js, express.js. Je suis également intéressé par la création d'applications de bureau multiplateformes et j'aime écrire du JavaScript vanille pour un meilleur contrôle des applications. Je suis également intéressé par les tâches du frontend et du backend.

Je voudrais m'entraîner à distance dans une équipe soudée sous la supervision d'un mentor, où mes compétences (maîtrise du sabre laser) seraient utiles. Merci pour les conseils et opinions.