Utilisez la fonction globale !
"Auteur : Hagnoul Daniel"
Texte : v1.0.0 2009-06-28
Introduction
Nous avons vu que la clôture1 offre un espace privé où le symbole $ est exclusivement attribué à jQuery.
Exemple n° 1
Description
Il s'agit de la version adaptée en jQuery d'un "news box" proposé par MARCHA en réponse à cette question.
"News box" : diffusion verticale continue, de bas en haut, de messages (bref, en principe) attirant l'attention sur de nouvelles informations. La courte pause avant la reprise de la diffusion indique au lecteur que la série est terminée.
Exemple 1
16 | if (pos < (-1 * $( "#newslist" ).height())) { |
21 | function startAnim() { |
22 | pos_initial = $( "#newsbox" ).height() + offset; |
24 | setInterval( 'anim()' , interval); |
27 | $( this ).ready( function (){ |
Bug !
Avec Firefox et l'extension Firebug, le programme s'interrompt sur l'erreur : "anim is not defined". Alors qu’en absence de clôture le programme donne entière satisfaction.
Je vous entends : "On nous agace avec la clôture et dès le premier véritable exemple rien ne va plus !"
Pourquoi ?
Le problème vient de la ligne de code n° 25 : setInterval('anim()', interval); qui demande à l'objet global "window" d'appeler la fonction anim() toutes les 60 millisecondes. Hors la fonction anim(), protégée par la clôture, est inaccessible pour l’objet global "window".
Ouvrez la porte !
Hé oui ! Nous avons besoin d’un point d’entrée dans la clôture.
Je cite 2 : "Je vous rappelle qu’en Javascript tout fonctionne en se fondant sur des objets. ... Le langage JavaScript permet de créer simplement un objet en se fondant sur l'objet Object ou en utilisant une forme littérale dont la syntaxe est décrite par la notation JSON."
1 | var obj = new Object() ; |
3 | obj[ "attribut" ] = "valeur1" ; |
5 | obj[ "methode" ] = function (param1, param2) { |
Fin de la citation 2.
Exemple n° 2
Nous pouvons donc écrire la fonction anim() de la manière suivante : var anim = function(){ … };
Mais nous devons omettre le mot clé "var" pour rendre anim() accessible depuis l’extérieur de la clôture.
Fonction globale et objet global
C'est cette construction : anim = function(){ … }; que j'appelle une fonction globale.
Exemple 2
16 | if (pos < (-1 * $( "#newslist" ).height())) { |
21 | function startAnim() { |
22 | pos_initial = $( "#newsbox" ).height() + offset; |
24 | setInterval( 'anim()' , interval); |
27 | $( this ).ready( function (){ |
Un fragment de code existant rarement seul, je me servirai de la fonction globale ou de l'objet global :
monObjet = { ... }; comme point d'entrée permettant de communiquer avec la clôture.
Pollution de l'espace de noms
En choisissant de promouvoir la clôture, espace privé, je souhaitai également libérer l'espace de noms "window", or chaque fonction globale ou objet global encombrera un peu plus cet espace de noms. De plus si comme il se doit, votre code est un composant réutilisable, le risque de collisions avec un autre composant du même nom est très élevé. Il est clair que l'utilisation de la clôture implique l'usage d'un espace de noms privé. Ce sera l'objet de notre prochain article : "Utilisez un espace de noms !"
À bientôt !
- 1
-
Clôturez jQuery !
- 2
-
Programmation orientée objet avec le langage JavasScript (1ère partie) par Thierry Templier.
Page 5 de la version PDF.