Bonsoir à tous, ou plutôt bonne nuit à tous. Il sera surement tard lorsque j’aurai terminé d’écrire ce tutoriel, il est 0h19, j’ai du Ghinzu dans les oreilles et je suis pas franchement fatigué, passons.
Comme le titre l’indique, je vais vous présenter comment créer votre plugin pour jQuery, que ça soit pour vos projets ou pour en faire profiter toute la communauté.

Mon dernier tutoriel était basé sur le design plus que sur le code, et il n’était utile que dans une situation. Là je m’attaque à un tutoriel plus généraliste qui peut servir pour n’importe quelle utilisation. Avant tout, je vais réutilisé JS Bin (qui a fait peau neuve) pour que vous puissiez tester le code en direct. Et comme pour mon ancien tutoriel, je vais ajouter les liens après les morceaux de code que je vais balancer.

Tout d’abord, le JavaScript est un langage orienté objets à prototype, c’est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais qui sont chacun équipés de constructeurs permettant de générer leurs propriétés, et notamment une propriété de prototypage qui permet d’en générer des objets héritiers personnalisé (merci Wikipedia). Donc pour ceux qui suivent, nous allons utiliser des prototypes pour ajouter des propriétés à jQuery, et pour cela, nous allons utiliser la méthode prototype ou fn (je n’ai pas trouver de réelles différences, merci au framework Prototype qui me fausse mes recherches :’( ).
Pour illustrer ce tutoriel, je n’ai pas été franchement inspiré, j’ai créé 3 plugins qui ne servent pas à grand choses, mise à part à illustrer mon tuto en plus de récupérer la couleur du texte ou du fond d’un élément (génial !). Ce tuto ne sera pas très long, je l’ai découpé en 2 parties, les plugins simples et avec des paramètres.

Pour commencer, on va créer 2 blocs pas trop joli, je ne vous embête pas avec le code, le résultat est là http://jsbin.com/amaku3.
Nos deux premiers plugins vont nous permettre de connaitre les couleurs de texte et de fond du bloc.

// $(foo).thisTxtColor() retournera la couleur du texte de foo.
$.fn.thisTxtColor = function () {
    return $(this).css("color");
}

// $(foo).thisBgColor() retournera la couleur de fond de foo.
$.fn.thisBgColor = function () {
    return $(this).css("background-color");
}

Et voilà, nos plugins sont prêt, rien de plus simple. On y ajoute un petit événement lorsque l’on clique sur nos blocs et le tour est joué.

$("#test > div").click(function() {
    $("#results").text("La couleur du texte est " + $(this).thisTxtColor() + " et la couleur de fond est " + $(this).thisBgColor() + ".");
});

http://jsbin.com/amaku3/2/edit

Passons aux paramètres qui ne sont franchement pas compliqués à mettre en place, c’est comme pour les fonctions ! Donc nous allons créer un nouveau plugin qui, selon le paramètre, nous indiquera la couleur de fond ou la couleur du texte ou alors qui retournera false.

// $(foo).thisColor(bar) retournera la couleur du texte de foo si bar vaut txt, ou la couleur de fond de foo si bar vaut bg.
$.fn.thisColor = function (myVar) {
    if ( myVar === "txt" ) {
        return $(this).css("color");
    } else if ( myVar === "bg" ) {
        return $(this).css("background-color");
    } else {
        return false;
    }
}

Puis on y ajoute un petit input pour pouvoir y saisir n’importe quelle valeur :

$("input[type='button']").click(function() {
    if ( $("#lol").thisColor( $("#input").val() ) )
    {
        $("#results").text($("#lol").thisColor( $("#input").val() ));
    } else {
        $("#results").text('Problème, la valeur "' + $("#input").val() + '" n\'est pas prise en compte.');
    }
});

http://jsbin.com/amaku3/3/edit

Et c’est tout ! J’ai bien sûr simplifié au maximum pour que tout reste très simple, mais vous pouvez très bien remplacer la vulgaire variable par un objet pour rendre votre plugin encore plus modulaire.

Article rédigé par @Calvein