Ecrire un plugin jQuery pour centrer des éléments

Lorsqu’on utilise jQuery, on peut écrire des fonctions javascript classiques qui font simplement appel à jQuery pour effectuer le traitement souhaité.

L’ennui avec ces fonctions est que leur utilisation est plus délicate que l’utilisation de jQuery.

Par exemple, prenons le cas d’une fonction qui permet de centrer un élément. Cette fonction peut s’écrire ainsi :

function centreElement(element) {
$(element).css({
'top': (($(window).height() - $(element).height()) / 2) + $(window).scrollTop(),
'left': (($(window).width() - $(element).width()) / 2) + $(window).scrollLeft()
});
}

Cette fonction peut être appelée sur n’importe quel élément, de cette façon centreElement('#image1'). Mais que se passe t-il si on veut centrer horizontalement plusieurs éléments images ?

Il suffit de modifier un peu cette fonction pour ne centrer qu’horizontalement. Par contre, il faut exécuter une boucle, par exemple avec la fonction each de jQuery, pour appeler autant de fois que nécessaire cette fonction. Une solution plus élégante peut être d’écrire son propre plugin jQuery, c’est à dire, tout simplement, une fonction personnelle qui se comporte comme une fonction intégrée de jQuery.

Voilà la façon dont on pourrait écrire un tel plugin :

(function($) {
$.fn.centreElement = function() {
this.each(function() {
var $e = $(this);
$e.css({
'left': (($(window).width() - $e.width()) / 2) + $(window).scrollLeft()
});
});
return this;
};
})(jQuery);

Un plugin jQuery nom est tout simplement une fonction définie avec $.fn.nom. Pour éviter tout télescopage avec d’autres bibliothèques installées, on utilise une fonction anonyme qui reçoit un paramètre $, et on appelle cette fonction avec jQuery :

(function($) {

// ici, $ représente jQuery sans aucun risque de télescopage avec une autre bibliothèque

})(jQuery);

Il suffit maintenant de définir une fonction anonyme pour $.fn.centreElement.
Cette fonction doit pouvoir être chainée avec d’autres appels de fonction jQuery et pour cela, elle doit renvoyer l’objet this fourni par jQuery.
Elle doit également exécuter son traitement sur chaque noeud référencé par jQuery, ce que l’on peut réaliser avec la fonction each().
Voilà donc la structure que doit avoir tout plugin jQuery :

$.fn.centreElement = function() {
this.each(function() { // boucle générique sur chacun de éléments avec la fonction each()
// code spécifique au plugin écrit
});
return this; // valeur de retour pour pouvoir effectuer le chainage
};

Et il ne reste plus, pour effectuer le centrage, qu’à reprendre ce que nous avions écrit dans la première fonction, en enlevant le top :

var $e = $(this);
$e.css({
'left': (($(window).width() - $e.width()) / 2) + $(window).scrollLeft()
});

Notre plugin permet maintenant d’écrire des instructions comme :

$('img').centreElement().show();

Cet exemple est parfois employé comme exercice de cours jQuery

GOTO : Fortran, C, C++, Java, C# et PHP

Lors des formations sur les langages de développement que je réalise, il y a toujours un moment fort lorsque les stagiaires sont des développeurs : la discussion sur le GOTO !

Discussion dont la longueur est très variable suivant le langage. En Fortran 77, il est impossible de quitter une boucle DO sans utiliser le GOTO. Ce n’est que dans des versions plus récentes de la norme que sont apparus CYCLE et EXIT.

Mais pourquoi des langages plus modernes, comme CC++ ou C#, continuent-ils à disposer d’une instruction GOTO ? Et pourquoi la dernière version de PHP (5.3) a-t-elle introduit cette instruction qui n’existait pas dans les versions précédentes ?

Les critiques sur le GOTO datent d’un article de 1968 Go To Statement Considered Harmful, écrit par Dijkstra. Vous trouverez dans l’article Goto Perl l’histoire détaillée de cet article et la polémique qui en a résulté. Polémique qui a dégénéré en réponses dogmatiques : « GOTO c’est mal » et « il ne faut pas utiliser GOTO ».

Certes, mais comment résoudre un problème d’algorithmique courant : la sortie de deux boucles imbriquées ? Pour y répondre, j’ai parfois vu des constructions alambiquées, utilisant des variables logiques, transformant des boucles à nombres d’itération connus (par exemple un parcours de matrice suivant les lignes et les colonnes) en boucles WHILE incompréhensibles demandant trois lectures pour commencer à entrevoir le traitement effectué.

Or, que reproche-t-on à GOTO ? De conduire à du code incompréhensible à un humain …

Le principal cas où il faut utiliser le GOTO dans des langages comme C, C++, C# ou PHP est la rupture de boucle. Ces quatre langages proposent les instructions break et continue pour quitter une boucle. Mais ils ne proposent pas la syntaxe break n du Java qui permet de quitter plusieurs boucles imbriquées. D’où la nécessité de disposer de l’instruction GOTO.

Suivant les cas, il peut également être légitime d’utiliser GOTO lorsqu’une erreur ou un évènement externe à l’algorithme se produit, lorsqu’on ne peut pas ou on ne veut pas utiliser d’exception.