2ème partie : Comment est structuré un plugin ?

A quoi sert un plugin jQuery ?

Un plugin jQuery permet d’ajouter des fonctionnalités sur le DOM que le framework ne permet pas actuellement. Par exemple si vous souhaitez surligner un élément quelconque du DOM, vous aimeriez bien utilisé une fonction du style jQuery('p').hilight();

Ce billet vous permet de comprendre comment faire un plugin pour faire vos propres fonctionnalitées

Squelette

Un plugin jQuery est pratiquement structuré de la même manière. En effet il existe différentes manières d’instancier la fonction qui étend l’objet. jQuery(function($){}); ou (function($){})(jQuery);. La seconde solution étant la plus utilisée.
La suite de cette article est une adaptation d’un tutoriel que vous trouverez ici

Je vais donc vous expliquer comment créer un plugin pour la fonctionnalité hilight()

Tout d’abord : la définition de la fonction
// Definition du plugin
$.fn.hilight = function() {
// on mettra le code du plugin ici
};

L’utilisation du « $ » ici est autorisé nous verrons pourquoi par la suite.

Nous allons ajouter la possibilité de gérer des options pour notre fonction.
// Definition du plugin
$.fn.hilight = function(options) {
var defaults = {
foreground: 'red',
background: 'yellow'
};
// la fonction extend() permet d'ajouter la gestion des options par défaut.
var opts = $.extend(defaults, options);
// La suite du code se placera ici
};
Nous avons donc défini deux options par défaut : « foreground » qui permettra de gérer la couleur du texte, et « background » pour la couleur du fond. De plus il nous est possible de modifier les couleurs en les précisant en argument de la fonction. Par exemple :
jQuery('#maDiv').hilight({
foreground: 'blue'
});

Ainsi le texte sera bleu.

Les variables par défaut que nous avons définies ne sont accessibles seulement par la fonction $.fn.hilight().
Nous allons maintenant rendre public ce tableau afin d’accéder rapidement aux variables par défaut pour les modifier avec un minimum de code.
Créons d’abord la variable du tableau :
$fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
Maintenant nous allons modifier la gestion des variables par défaut dans la fonction $fn.hilight()
$.fn.hilight = function(options) {
var opts = $.extend({}, $.fn.hilight.defaluts, options);
};

Grâce à cette méthode, nous pouvons directement modifier les variables par défaut avec $.fn.hilight.defaults.foreground = 'blue';.

Nous allons maintenant passer au développement de la fonction pour agir sur le texte afin de surligner ce que l’on souhaite.
Pour cela, nous allons utiliser la fonction $().css();.
Tout d’abord, il est important de noter l’utilisation de la fonction each(); qui prend en paramètre une fonction. Cette fonction permet d’appliquer notre fonction principale (hilight()) sur notre choix.
Ainsi on obtient le code suivant :
return this.each(function() {
var $this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
$this.css({
backgroundColor: o.background,
color: o.foreground
});


Passons maintenant à la normalisation en plugin jQuery.
Nous allons mettre le code défini précédemment dans la function (function ($){})(jQuery);.
Ce qui nous donne :
(function ($){
$.fn.hilight = function(options) {
var opts = $.extend({}, $.fn.hilight.defaluts, options);
return this.each(function() {
var $this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
$this.css({
backgroundColor: o.background,
color: o.foreground
});
};
$fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
})(jQuery);

Améliorations

La principale amélioration que l’on peut apporter est le débogage.
On peut ajouter une fonction dit privée à notre plugin : debug();.
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
Ainsi on peut utiliser au cours du plugin de cette manière :
(function($) {
$.fn.hilight = function(options) {
debug(this);
var opts = $.extend({}, $.fn.hilight.defaults, options);
// iterate and reformat each matched element
return this.each(function() {
$this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
// update element styles
$this.css({
backgroundColor: o.background,
color: o.foreground
});
});
};
//
// private function for debugging
//
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
//
// plugin defaults
//
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
})(jQuery);


Dans le prochain article, j’expliquerai le développement d’un plugin Weather qui affiche la météo en temps réel pour une ville donnée.