JS : plug-in de jQuery, première approche

21 mai 2011
web js jquery

Le visualiseur de diapositives décrit dans un autre post aurait sa place dans un plug-in de jQuery et n'a aucune raison d'être instancié dans une fonction personnelle et encore moins en dur dans le code d'une page. Aussi on va décrire les étapes de l'intégration de ce bout de code dans l'espace de nom de jQuery. Tout repose sur le bout de code qui suit :

$.fn.NomDuPlugin = function()       {
    //Mon plug-in
}

Si on est certain que l'on n'utilise que jQuery ceci fonctionnera, mais si on a YUI ou Prototype qui traîne on utilisera une fonction auto-exécutable et une closure qui permettra d'utiliser le caractère $ sans que cela pose de problème :

(function($)        {
    $.fn.NomDuPlugin = function()   {
        //Mon plug-in
    }
})(jQuery)

Si à présent on déplace ce code dans un fichier JS externe et qu'on l'inclue avant son utilisation et après l'inclusion de jQuery on a effectivement transformé notre programme en module, externe et réutilisable. Dans le cas présent j'ai même pu éliminer la sélection du containeur du visualiseur et on instancie ce dernier comme suit, après inclusion du fichier js/simpleSlider.js :

$("#container").simpleSlider()

Plus simple ? Je suis pas sûr que ça soit possible :)
Source : la page de jQuery.com qui parle des plug-ins

Accueil