11496 sujets

JavaScript, DOM et API Web HTML5

Bonjour.

Je suis en train de developper un framework PHP et j'utilise depuis quelques jours Jquery , qui je dois l'avouer est vraiment bien foutu.

Pour etre efficace dans mon systeme, je veux :

- utiliser les versions pack de la biblio et des plugins ( + petite taille )
- appeller les différents plugins uniquement quand j'en ai besoin ( géré cote serveur ...)
- utiliser un fichier jquery.init.js ( appellé après tous les autres évidemment ! ), qui lui contiendrait tous les parametres de toutes fonctions, hstoire que l'on puisse tout avoir sous la main , et pas dans du JS inclu dans le HTML du <head> de chaque page.

Aucun souci si je n'ai qu'un plugin, mais dès que j'en rajoute un deuxieme, ca plante...la console JS ne me donne pas d'erreur.

Je suis a peu prêt sur que c'est une histoire de conflict d'objet ou de DOM...et ca fait deux heures que je cherche en vain. Une ame charitable pourrait elle me sortir de mon trou sans fin ? Smiley bawling

voila mon code .....
Je mets en exemple des plugins connus....parfaitement fonctionnels si je les mets a la fin des fichiers JS de leurs plugins respectifs mais absolument pas fonctionnels si regroupés dans un fichier jquery.init.js



<script type="text/javascript">

$(function(){

		$(".alert_tooltip").tooltip({ 
	       extraClass: "alert"
		}); 
					
		$(".fancytest a").fancybox({
		'hideOnContentClick': 	true,
		'overlayShow':true,
		'overlayOpacity':	0.7
		});	

});

</script>



Modifié par RoseGrenouille (28 Nov 2008 - 19:03)
RoseGrenouille a écrit :
- utiliser les versions pack de la biblio et des plugins ( + petite taille )

La version minified est plus lourde mais donne de meilleures performances car le temps de chargement supplémentaire n'est pas énorme, tandis que la version packed doit être «déchiffrée» une première fois avant d'être interprétée, ce qui fait perdre du temps d'exécution.
Le combo minified + compression gzip est généralement cité comme duo gagnant.
(Notons aussi que le temps de calcul supplémentaire induit par la version packed est valable à chaque chargement de page, tandis que le poids supplémentaire de la version minified est en partie absorbé par le cache du navigateur.)

RoseGrenouille a écrit :
utiliser un fichier jquery.init.js ( appellé après tous les autres évidemment ! ), qui lui contiendrait tous les parametres de toutes fonctions, hstoire que l'on puisse tout avoir sous la main , et pas dans du JS inclu dans le HTML du <head> de chaque page.

Aucun pour les paramètres. Mais est-ce que tu instancies les différentes fonctions dans ce fichier (comme le suggère le nom init.js) également? Parce que si tu appelles des fonctions inexistantes car correspondant à des plugins pas chargés pour telle ou telle page, ça peut poser problème, non?

RoseGrenouille a écrit :
Une ame charitable pourrait elle me sortir de mon trou sans fin ? Smiley bawling

En consultant une boule de cristal ou la page en ligne? Smiley cligne
Modérateur
Salut, Smiley jap

Le mieux aurait été une page en ligne pour bien se rendre compte du problème. Smiley cligne

Cela dit, mon horoscope disait "Tout vient à point à qui sait attendre..." ce que je traduis en remplaçant :
$(function(){ ...
par :
jQuery(function(){ ...
vu, que si tu places le bout de code que tu montres tel quel dans ton fichier js, les éléments que tu sélectionnes n'existent pas encore... donc... Faut-il croire en l'horoscope ? Smiley sweatdrop
Merci Florent, koala, pour vos réponses. Pas de page en ligne pour l'instant c'est sur un serveur SVN.....

a écrit :

Parce que si tu appelles des fonctions inexistantes car correspondant à des plugins pas chargés pour telle ou telle page, ça peut poser problème, non?

Oui tu as parfaitement raison, je viens d'allumer la dessus, c'est sur que ca créerait des problèmes.

Voila un peu plus de details....

Le framework est un MVC. Il appelle jquery.js (entre autres choses) pour toutes les pages.

Si j'ai une vue, presentant par exemple un diaporama, il se peut que je veuille utiliser les plugin Jquery.ToolTip et mettons Jquery.Cycle.

Pour cette vue , ces deux fichiers JS sont donc appellés , du genre


<script type="texte/javascript" src="chemin/jquery.cycle.js"</script>
<script type="texte/javascript" src="chemin/jquery.tootltip.js"</script>



Pour le moment a la fin de jquery.cycle.js et de jquery.tooltip.js , cela ressemble par exemple a cela :






//....300 lignes de codes au dessus de celle-ci

	
})(jQuery);
 
//Applying effects
 
$(function() {
				
		$(".alert_tooltip").tooltip({ 
	
		    extraClass: "alert"
		    
		}); 
		
				
});




Cet exemple est avec Tooltip , mais il est valable pour 'importe quel plugin.
Ce que je veux faire :

-1 : enlever toute la partie "applying effects" parce qu'au final elle ne fait pas partie du plugin , mais cree une instance de l'objet a laquelle on applique une fonction.

-2: Eviter d'avoir l'instanciation dans le <head>

-3 : idealement regrouper toutes les instanciations dans un meme fichier JS , lui aussi externe. Est ce qu'on pourrais pas verifier quels plugins sont chargés et si il le sont instancier ?

@ koala : $ n'est pas un alias de l'objet jQuery ?

est ce que je devrais le faire comme cela ?






<script type="text/javascript">

$jQuery(function(){

		$(".alert_tooltip").tooltip({ 
	       extraClass: "alert"
		}); 
					
		$(".fancytest a").fancybox({
		'hideOnContentClick': 	true,
		'overlayShow':true,
		'overlayOpacity':	0.7
		});	

});

</script>


Modérateur
RoseGrenouille a écrit :
@ koala : $ n'est pas un alias de l'objet jQuery ?
jQuery(function);
équivaut à :
$(document).ready(function);
RoseGrenouille a écrit :
-2: Eviter d'avoir l'instanciation dans le <head>

-3 : idealement regrouper toutes les instanciations dans un meme fichier JS , lui aussi externe. Est ce qu'on pourrais pas verifier quels plugins sont chargés et si il le sont instancier ?

Pas sûr que ça soit pertinent. On peut avoir besoin de paramètres bien spécifiques pour une page donnée, d'exécuter certaines fonctions et pas d'autres, etc. Placer les quelques lignes de JS spécifiques à la page (ou éventuellement type de page/catégorie/zone), ça me semble plutôt pertinent.
Ok ok....
Je vais y réfléchir plus longuement....je voulais faire un code très propre et segementée , mais si au final ca revient a vérifier des conditions partout, ma maintenance est pas plus facilitée.

Bref....creusage de méninges encore ....

Merci pour cette discussion !