Utilisez la fonction globale !

"Auteur : Hagnoul Daniel"

Texte : v1.0.0 2009-06-28

Introduction

Nous avons vu que la clôture¹ 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

(function($){
	var speed = 1;
	var offset = 5;
	var interval = 60;
	var pos;
	var pos_initial;
	
	function anim() {
		$("#newslist").css({
			visibility:"visible",
			top:Math.floor(pos)
		});
		
		pos -= speed;
		
		if(pos < (-1 * $("#newslist").height())) {
			pos = pos_initial;
		}
	}
	 
	function startAnim() {
		pos_initial = $("#newsbox").height() + offset;
		pos = pos_initial;
		setInterval('anim()', interval);
	}
	
	$(this).ready(function(){
		$("#newsbox").hover(
			function(){
				speed = 0;
			},
			function(){
				speed = 1;
			}
		);
		
		startAnim()
	});
})(jQuery);

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 ² : "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."

var obj = new Object() ;

obj["attribut"] = "valeur1";

obj["methode"] = function(param1, param2) {
	...
}; 

Fin de la citation ².

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

(function($){
	var speed = 1;
	var offset = 5;
	var interval = 60;
	var pos;
	var pos_initial;
	
	anim = function() {
		$("#newslist").css({
			visibility:"visible",
			top:Math.floor(pos)
		});
		
		pos -= speed;
		
		if(pos < (-1 * $("#newslist").height())) {
			pos = pos_initial;
		}
	}
	 
	function startAnim() {
		pos_initial = $("#newsbox").height() + offset;
		pos = pos_initial;
		setInterval('anim()', interval);
	}
	
	$(this).ready(function(){
		$("#newsbox").hover(
			function(){
				speed = 0;
			},
			function(){
				speed = 1;
			}
		);
		
		startAnim()
	});
})(jQuery);

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.

 

Veuillez poser vos questions
techniques sur les forums DVP,
s'il vous plait.

Vous n'aurez jamais fini d'apprendre la programmation, aussi apprenez à apprendre en vous amusant.