Quand on parle framework javascript, généralement on parle de jQuery. De loin le plus utilisé, il possède une très grande communauté, et donc un nombre impressionnant de plugins.

Plugin? Script?

Qu’est ce qu’un plugin jQuery, et pourquoi pas utiliser le terme script ? Ces deux termes sont utilisés généralement pour dire la même chose, mais il existe néanmoins une petite différence, pour moi :

Un script sera une portion de javascript ayant un effet sur la page de manière globale. Un script va par exemple modifier le markup HTML, ou bien déclarer une fonction accessible depuis la page, ce genre de chose.

Un plugin, lui, vas simplement ajouter des fonctions aux objets jQuery. Rien ne sera ajouté dans le scope global javascript, rien ne sera modifié sur la page. Il faudra donc ensuite appeler la fonction adéquate sur un objet jquery pour obtenir le résultat escompté.

Créer un plugin jQuery

Créer un plugin jquery est assez simple, si l’on sait par où commencer. J’ai préparé pour vous un embryon de plugin, que nous allons décortiquer ici. (Pour plaire au plus grand nombre, je vais prendre en exemple la version javascript. Une version coffeescript vous attend néanmoins dans l’archive que vous trouverez en bas de l’article)

Template

// project: 
// author:
// date:
//
// description:
// jquery version:
//
jQuery(function(){
  function($){
    $.fn.my_plugin = function(args){
      args = $.extend({
        key_1: "default_1",
        key_2: "default_2" 
      }, args);
      // place your code here
      

      // eoc
      return this; 
    }; 

  }(jQuery);
}); 

Maintenant, explications

Lignes 1-7: Les premières lignes sont explicites: Le header sert à garder une trace dans le projet de son nom, quand vous l’avez commencé, et quelle était sa fonction. Rien de bien excitant.

La ligne 8 permet d’attendre que le dom (et donc jQuery) soit chargé pour commencer à travailler. Sans cela, il peut arriver que jquery soit chargé après votre plugin, qui ne sera pas pris en compte.

jQuery n’est pas le seul framework javascript a faire usage du $ comme raccourci. La ligne 9 définit donc un scop dans lequel nous sommes sur que $ signifie bien jquery.

ligne 10: Voila la ligne qui créée notre plugin, réellement, en l’ajoutant au prototype jQuery. La fonction ainsi créée pourra ensuite être appelée depuis n’importe quel objet jquery. exemple : $(« #my_id »).my_plugin(). Vous pourrez ici ajouter des arguments obligatoires, avant args.

lignes 11-13: Un plugin demande en général de nombreux paramètres de configuration, pour être le plus souple possible. La ligne 10 permet de passer ces paramètres sous forme d’un hash, et de définir des valeurs par défaut.

C’est une méthode que je recommande pour plus que les plugins jQuery, personnellement. Il est bien plus simple, en revenant sur un site 6 mois après, de comprendre une fonction du style slide({duration: « 2s », transition: « opacity », id: « mySlide »}); qu’un autre avec des arguments standards slide(2, « opacity », « mySlide »);

(D’accord, mon exemple n’est peut être pas très bien choisi, les deux sont compréhensibles. Je vous fait néanmoins confiance pour en trouver un mieux, on est tous déjà tombés sur une fonction avec 4 ou 5 arguments qui se ressemblent tous…

Enfin, le render en ligne 18 permet de renvoyer l’objet sur lequel la fonction a été appelée, et donc de pouvoir chainer une autre fonction derrière

 Download les sources.

…Et c’est tout?

Oui, c’est tout ce dont vous avez besoin pour créer un plugin. Il ne vous reste plus maintenant qu’à choisir vos arguments obligatoires et optionnels, leurs valeurs par défaut, et commencer à coder. L’objet sur lequel la fonction a été appelée est nommé this dans le scop de la fonction, et vous savez maintenant tout. Le reste reviendrait à vous apprendre à développer en javascript, ce que je n’aurais pas la prétention de faire.