Le module jQuery étant créé on peut vouloir lui ajouter des fonctionnalités ou un paramétrage. Pour reprendre l'exemple des visualiseurs d'images décrit ailleurs, j'ai 3 modes de transition représentant chacun un bout de code. On peut imaginer que le mode choisi pour le visualiseur soit un paramètre et que les trois programmes cohabitent au sein d'un module slider. Pour cela, on va déplacer les deux autres codes dans le module simpleSlider et lui faire accepter un objet littéral en entrée pour le paramétrer.

Concernant les fonctionnalités supplémentaires elles feront l'objet de fonctions filles de la fonction principale qui se retrouve être un hub et concernant les paramètres d'entrée on définira dans le corps de la fonction un objet littéral, miroir de ce que l'utilisateur envoie au plugin, avec tous les paramètres par défaut. Il suffira de la ligne suivante pour faire obtenir la réunion des deux avec les paramètres utilisateur overridant ceux par défaut :

$.fn.MonModule = function(options)      {
    var Settings = { /* Les paramètres acceptés avec leurs valeurs par défaut /* }
    $.extend(Settings, options)
    /* Settings contient à présent les paramètres de l'utilisateur réunis avec ceux par défaut */
}

Si le module ne renvoie pas de valeur particulière, on n'oubliera pas de lui faire retourner this pour que le chaînage des appels JS/jQuery puisse perdurer sur le même objet 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

Rapidement dit : var sert à implanter une variable dans le contexte courant.

Moins rapidement, si on utilise une variable sans var, l'interpréteur JS va remonter les contextes jusqu'à trouver une variable du même nom et l'utiliser. On voit d'ici les problèmes qui peuvent se poser si on déclare une variable en global et qu'on utilise une variable du même nom, sans var, au sein d'une fonction...

Ainsi, il peut paraître prudent de mettre un var avant toute déclaration de variables, mais on peut vouloir utiliser une variable d'un autre contexte.

Le Javascript c'est très bien mais les disparités entre navigateurs font que ce langage ne peut exprimer toute son élégance sans une série d'abstractions (comprenez fonctions et objets cachés). L'utilisation de jQuery simplifie ces manipulations browseriennes et on aboutit à du code très élégant comme il n'aurait jamais dû cesser de l'être.
La preuve ?
Je voulais faire un slider d'images, un visualiseur de diapositives en français, qui permet de passer à l'image suivante à l'aide d'un clic de souris. Le code repose sur du HTML très simple et référençable par un moteur de recherche : un DIV positionné en relative ou absolute contenant des IMG dont on doit spécifier les tailles et, si la variable ContainerId contient l'Id du DIV sus-mentionné, ça donne les 13 lignes qui suivent ainsi que la démo juste au-dessous.

var Left = MaxWidth = MaxHeight = 0
$("#container img").each(function(idx, item)        {
    $(this).css({"position":"absolute", "top":"0px", "left":Left+"px"})
    Left += $(this).width()
    MaxWidth = Math.max($(this).width(), MaxWidth)
    MaxHeight = Math.max($(this).height(), MaxHeight)
    $(this).click(function()    {
        var NextImg = $(this).next("img")
        var ShiftPosition = !NextImg.length ? 0 : NextImg.css("left")
        $("#container-inner-container").animate({"left":"-"+ShiftPosition}, 500, "swing")
    })
}).wrapAll("<div id='container-inner-container'></div>")
$("#container-inner-container").css({position:"absolute", top:"0px", left:"0px", witdh:Left+"px", height:MaxHeight+"px"})
$("#container").css({overflow:"hidden", position:"relative", width:MaxWidth, height:MaxHeight})

Quant à son fonctionnement, c'était le premier slider que je faisais en jQuery, donc tout est assez basique : je donne une position absolue à toutes les images qui sont filles du container passé en paramètre et je les place toutes les une à la suite des autres avec une petite fonction qui réagit au clic souris pour chacune d'entre elle et qui exécute un scroll à la suivante, simplement en animant la propriété CSS left.