Ce n'est pas une tâche anodine, s'y atteler sans maîtriser les bases (CSS, HTML, DOM, JS, JSON, jQuery, et la gestion des événements) équivaut à partir en expédition dans la jungle amazonienne sans l'équipement adéquat. Vous ne trouverez ci-dessous aucune explication sur les matières réputées connues.
La plupart des plugins exécutent une seule tâche. Lorsque l'on souhaite inclure la modification des options et implémenter plusieurs méthodes on doit penser multitâche.
On peut trouver sur le Web de nombreuses méthodes pour écrire un plugin multitâche. Le guide officiel résume l'essentiel des bonnes pratiques, mais il ne s'agit que d'un point de départ. Il promeut l'usine de construction de widget UI, mais plusieurs auteurs trouvent cette méthode lourde et contraignante.
Plusieurs méthodes de construction utilisent une technique particulière pour résoudre un aspect particulier. Certains auteurs préfèrent mettre l'accent sur l'écriture de modules, sur l'utilisation de prototypes, sur l'utilisation des événements, etc.
Il n'existe pas un modèle idéal applicable en toutes circonstances et la méthode utilisée peut avoir une grande influence sur les performances, sur la lisibilité et sur la maintenabilité du code de votre plugin.
Addy Osmani a recensé et étudié les approches principales .
Plugin montâche
Je recommande la méthode de Mike Alsup.
/*
* Structure classique d'un plugin monotâche.
*
* Le code du plugin est toujours isolé dans une clôture (closure)
* où $ est l'alias de jQuery et W celui de window.
*/
( function( $, W ){
$.fn.monPlugin = function( options ){
/*
* opts est un nouvel objet qui contient les options
* par défauts modifiées par les options de l'utilisateur.
*
* Les objets "$.fn.monPlugin.defaults" et "options" ne sont
* pas modifiés.
*/
var opts = $.extend( true, {}, $.fn.monPlugin.defaults, options );
/*
* On doit toujours retourner l'objet jQuery original.
*
* Ici this est votre sélecteur $( selector ) et pas selector
* qui peut contenir plusieurs éléments du DOM.
*
* i : un numéro d'ordre de 0 à n.
* item : un élément du DOM contenu dans this.
*/
return this.each( function( i, item ){
// le code du plugin
});
};
/*
* Les options par défauts choisies par le créateur du plugin.
*/
$.fn.monPlugin.defaults = {
"background-color" : "lightgreen",
"color" : "blue"
};
/*
* Avec cette construction, l'utilisateur du plugin peut les
* modifier directement et indirectement.
*
* Directement, avant l'exécution des instances du plugin :
* $.fn.monPlugin.defaults[ "background-color" ] = "red";
*
* Indirectement, avant l'exécution d'une instance du plugin :
* $( selector ).monPlugin({
* "background-color" : "blue"
* });
*/
})( jQuery, window );
Plugin multitâche
Je ne connais pas une méthode simple correcte, elles négligent souvent de traiter des points très importants. Avant de choisir, je vous recommande la lecture de mon tutoriel Plugin multitâche : méthode de construction personnelle et exemples . Pour utiliser mes codes, vu la disparition de jQuery.sub(), vous devez le remplacer par jQuery, on y perd la protection offerte par l'encapsulation dans une version personnalisée de jQuery.