/weblog/cedric

Cet article est la traduction d’un article publié sur le blog de Jim GARVIN.

Beaucoup de programmes javascript nécessitent l’exécution de code dès lors que le chargement d’une page est arrivé à terme. jQuery rend facile le branchement à cet événement et beaucoup de développeurs l’utilise comme tel :

$(document).ready(function(){
	// code du programme... tout est là

	var term = searchParameter();

	if (term) $("#search_form input[type=text]").val(term).addClass("focus")

	// .. 200 lignes plus loin ...
	// ah, voici le code que vous devez modifier
});

Ce type de code est très certainement suffisant pour de petites applications, mais dès lors que vous avez quelques centaines de lignes de code qui grouillent, il est fort probable que vous commenciez à souffrir pour travailler. Vous pouvez essayer de ponctuer le code de commentaires – nous savons tous que ce n’est pas idéal – ou encore découper le code en plusieurs appels de $document.ready(), les uns après les autres. Pas très propre…

Une façon d’obtenir un plus haut-niveau de compréhension de votre code consiste à sortir les sections sans rapport dans leurs propres fonctions pour ensuite les appeler depuis la fonction d’initialisation :

$(document).ready(function(){
	initializeSearchForm();
	initializeRowPointer();
	initializeThumbnailSizeSlider();
	initializeQueueStatuses();
	// et cetera ...
});

function initializeSearchForm() {
	var term = searchParameter();
	if (term) $("#search_form input[type=text]").val(term).addClass("focus");
};

// et toutes les autres fonctions ...

Désormais, nous avons une vue d’ensemble claire de ce qui se passe au chargement de la page et nous pouvons aisément accéder à telle ou telle fonction pour voir son fonctionnement et lui apporter des modifications. C’est mieux, et c’est comme celà que je procède depuis longtemps, mais en utilisant le patron de conception de Ryan McGeary, nous pouvons rendre ce code encore plus révélateur de ce qu’il fait et améliorer sa maintenabilité en embraçant le style jQuery.

Transformation en micro-plugin

$(document).ready(function(){
	$("#search input[type=text]").searchForm();
	$("#orders").selectableRows();
	$("#slider").thumbnailSizeSlider("td.picture img");
	$("#queue_statuses .status").queueStatus();
	// et cetera...
});

// micro-plugin
$.fn.searchForm = function() {
	var term = searchParameter();
	if (term) this.val(term).addClass("focus");
	return this;
};

// et tous les autres micro-plugins...

En réécrivant nos fonctions en tant que plugins jQuery, nous bénéficions de nombreux avantages par rapport à la première approche :

• Nous déplaçons le sélecteur dans la section d’initialisation où nous pouvons facilement le retrouvez et le modifier. Cela nous donne une meilleure vision de ce que le code fait, tout cela sans effort.
• C’est un plugin jQuery ! N’importe quel autre développeur habitué à jQuery et ne connaissant pas votre code, pourra immédiatement l’appréhender et se l’approprier,
• C’est un plugin jQuery ! C’est facilement réutilisable, même si ce n’est pour l’instant pas l’objectif.

Si vous n’aviez jamais écrit de plugin jQuery auparavant, ceci devrait vous convaincre de la simplicité d’implémentation. Il n’est pas nécessaire de comprendre tous les méandres d’un framework. Vous adjoignez simplement une fonction à jQuery.fn et accédez à l’objet courant grâce à this. C’est la simplicité du système de plugins jQuery qui rend les micro-plugins possibles.

Quelle est cette pitrerie !? Un plugin, tout simplement !

Faisons tout de même bien la distinction entre un plugin et un micro-plugin. La différence réside principalement dans l’intention de l’auteur qui rédige le code. Généralement, les plugins jQuery sont écrits prioritairement pour être réutilisables et partageables. À l’inverse, les micro-plugins sont créés pour rendre le code local d’une application plus clair et plus facilement maintenable, sans intention de partage et/ou de réutilisation.

Ainsi, si vous réutilisez un micro-plugin dans un autre projet, et que ce plugin devient un outil souvent utile, pourquoi pas ne pas le documenter, le partager et le considérer comme plugin à part entière !

Note du traducteur : une erreur de traduction, une approximation disgracieuse, une suggestion, …, utilisez les commentaires pour me soumettre votre proposition et ainsi améliorer cette traduction ! Merci !

Note bis : les emphases sont de mon fait.