11487 sujets

JavaScript, DOM et API Web HTML5

Pages :
(reprise du message précédent)

Une question que je me pose ...

Tu disais un peu plus haut que Galleria avait été remplacé par "c" si mes souvenirs sont bons.

Est-ce que ça signifie que "minifié", cette variable "Galleria" n'existe plus ? Et donc fatalement que si tu essais d'y accéder sur un script séparé, cette variable n'existant pas, elle renvoi une erreur sur ton script actuel ?
Tu me donnes des sueurs Smiley smile

Alors oui, ça aurait pu être une explication mais en fait non, pour deux raisons :
1/ Comme dis plus haut, ça marche sans faire toutes ces manipulations, hors, je ne change pas mon Gruntfile.js. Les processus sont donc les mêmes.
2/ Je passe à Uglify (qui s'occupe donc de la minification et concaténation de fichiers) les fichiers de Galleria, thème, et autre et donc mon script. Donc si Galleria est transformé en c, cette modification est la même partout.
Bon y a un truc que je ne comprends pas, voici mes balises scripts (histoire de rien louper) :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="/js/main.min.js"></script>
		
		<script src="/js/vendor/galleria/galleria.min.js"></script>
		<script src="/js/vendor/galleria/img-datas.min.js"></script>
		<script src="/js/vendor/galleria/galleria.conf.min.js"></script>


main.min.js : comprends des JS de Bootstrap, plus d'autres trucs commun à toutes les pages (minifié, compacté, etc.).
galleria.min.js : Galleria, le script de la bibliothèque
img-datas.min.js : les datas au format JSON (valide, je viens encore de le tester)
galleria.conf.min.js : le script sur lequel on papote depuis quelques posts maintenant.

Tous ces scripts sont présent dans le navigateur, donc il les trouvent bien, malgré tout Galleria et dataGalleria sont à undefined !!!

Je suis revenu légèrement en arrière pour obtenir ce résultat, voici le code :

(function($) {
	'use strict';

	$(document).ready(function () {
		var Galleria = Galleria;// || null;
		var dataGalleria = dataGalleria;// || [];

		console.log('Galleria : ', Galleria);
		console.log('dataGalleria : ', dataGalleria);

		//if (Galleria === null) { return; }

		// Galleria settings :
		var indexGalleria = 0;
		var valueForAutoPlay = 3000;

//...

Modifié par MagicCarpet (01 Feb 2015 - 00:01)
Et la conclusion Smiley smile ?

Je suis quand même sûr du code que je t'ai fournis, donc là ... pour moi le soucis c'est la minification, sans, ça fonctionne ?

Sinon, fournis une page d'exemple, ça sera vite vu.
Pas de conclusion vu que je n'y comprends rien Smiley smile

Alors tu trouveras ici le nouveau site, comme c'est dans un dossier temporaire, tu n'auras que la page d'index et celle de la galerie qui fonctionneront (les liens sont casser sur les autres pages, le dossier tmp pose problème). De plus il y a des erreurs car le plugin Vegas ne trouves pas les images qu'il doit afficher en background. Mais tout cela ne concernant pas Galleria, ça ne pose pas de problème particulier.

De plus, j'ai essayé sans la concaténation mais ça ne change rien (c'est cette version qui est actuellement en ligne). J'espère que la mise en ligne aidera.

Merci en tout cas pour ton aide.
Modifié par MagicCarpet (01 Feb 2015 - 15:46)
Solution provisoire :

var Gal = Galleria || null, data = dataGalleria || [];


(et fatalement, modifier les Galleria et dataGalleria ensuite).
On en reviens à cette erreur :

Running "jshint:all" (jshint) task

   app/_javascript/galleria/galleria.conf.js
      8 |    var Gal = Galleria || null, data = dataGalleria || [];
                       ^ 'Galleria' is not defined.
      8 |    var Gal = Galleria || null, data = dataGalleria || [];
                                                ^ 'dataGalleria' is not defined.
     10 |    console.log('Galleria : ', Galleria);
                                        ^ 'Galleria' is not defined.
     11 |    console.log('dataGalleria : ', dataGalleria);
                                            ^ 'dataGalleria' is not defined.


Je pense que je vais voir pour modifier les options de JSlint et passer à autre chose. Au bout de 5 jours sans résoudre ce problème, je pense que je dois passer à autre chose Smiley smile

Merci en tout cas, on verra bien si quelqu'un arrive à comprendre le pourquoi du comment.

EDIT : j'ai oublié de modifier les console.log mais bon...
Modifié par MagicCarpet (01 Feb 2015 - 19:58)
bonjour
petite information sur (function() { })(); qui comporte deux notions

1) Dans de nombreux language la portée des variables est redéfinie par la présence de bracket {} . En javascript la nouvelle portée n'est pas les brackets mais la fonction donc on écrit explicitement autour de *
function( ){*}.


2) L explication intéressante serait pourquoi encore enveloppé function(){} par (* ) () ?
(function(){*} ) ()

cordialement
Modifié par 75lionel (02 Feb 2015 - 13:11)
En gros, il faut considéré que (*)(); soit équivalent à nom_fonction(); (appel de la fonction)

Ce code permet donc d'envoyer un paramètre/argument à la fonction, la fonction étant anonyme dans le cas présent.

Donc quand tu fais

(function($) { .... })(jQuery);

on pourrait faire

function maFonctionGlobal($) { ... }
maFonctionGlobal(jQuery);

Précision quand même, même si tu ne mets pas de paramètre, ça revient à déclarer une fonction anonyme que tu ne lances jamais ... Donc il ne se passe rien

C'est comme si tu faisais

function maFonctionGlobal($) { ... }

et c'est tout ... (il ne se passerait évidemment rien)
Modifié par kenor (02 Feb 2015 - 13:29)
Merci beaucoup pour les explications même si je me demande si il n'y aurait pas dans cette syntaxe une notion de contexte ( DOM window) géré par jquery .
J' ai horreur des raccourcis et des choses implicites ($ est déja un raccourci jQuery ) . Si je sais pourquoi , cela ne me dérange pas. Discuter d'un each() ( qui est une implémentation de la boucle for ( , , ) par jQuery) à un débutant javascript comme vous le faites dans ce post ; cela doit être un peu difficile .Heureusement vous explicitez les choses .
Modifié par 75lionel (05 Feb 2015 - 19:30)
@75lionel : Utiliser la syntaxe (function( x ){ ... })( y ); n'a pas de rapport avec jQuery c'est juste pour cloisonner son code et pour donner à toutes les variables/fonctions une portée locale.

L'alias $ (= jQuery) est implicite (il fallait le savoir!), alors qu'avec (function( $ ){ ... })( jQuery ); on sait clairement que $ correspond à jQuery car il est passé en paramètre lors de l'appel à la fonction.
Pages :