Mon cahier d’exercices sur jQuery & Co
Ce que je crois savoir. Ce que je pense devoir faire. Si je ne me trompe pas !

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

(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 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."

var obj = new Object() ;

obj["attribut"] = "valeur1";

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

(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 le forum jQuery
s'il vous plait.

Avertissement solennel

Autodidacte en informatique, l’auteur a tous les défauts de sa qualité. Si vous vous inspirez, copiez ou pire utilisez le contenu de cette page, vous êtes téméraire, inconscient du danger !

Reconnaissant avoir été dûment informé, vous déchargez l’auteur et à fortiori l’hébergeur du site de toute responsabilité dans les graves dégâts que vous causerez sûrement !

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

Tutoriel du 03/09/2009

Je vous signale que les trois premières fondations sont reprises dans un tutoriel : Outils pour construire un code jQuery évolutif.

Creative Commons License Attribution-Share Alike 2.0 Belgium Except where otherwise noted, content on this site is licensed under a Creative Commons License : Attribution-Share Alike 2.0 Belgium

Mention obligatoire : "Auteur : Hagnoul Daniel (http://www.developpez.net/forums/u285162/danielhagnoul/)"