Discussion :

[doudou_rennes]

Bonjour à toutes et à tous,

je travaille actuellement sur un projet utilisant du javascript.

A l'heure actuel, nous avons un fichier .js assez gros (7000 lignes) et nous aimerions l'éclater en plusieurs plus petit.

Ce fichier étant utilisé dans pas mal de page, nous aimerions gardé les import de ce fichiers dans les pages appelante.

J'aimerais savoir s'il y a moyen d'importer d'autre .js à partir de celui ci.

En gros, pour l'instant, nous avons notre gros fichier, et à terme, on aimerais avoir n plus petit fichiers, et que notre gros fichier soit transformé en:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
import <petit fichier 1>.js
import <petit fichier 2>.js
            .
            .
            .
import <petit fichier n>.js

Merci d'avance pour votre aide

[SpaceFrog]

à part créer dynamiqueemnt une balise script, et encore je n'ai jamais testé ...

[d-Rek]

Hello,

Regarde mon post : http://www.developpez.net/forums/sho...php?t=427350#2
Ca pourrait t'aider..

[SpaceFrog]

pas vu de rapport là ... ?

les fonctions sont bien toutes dans des fichiers js séparés ... ?
pas juste un fichier js ...

[d-Rek]

Effectivement, je voulais mettre un lien vers un autre post où on insère dynamiquement un JS dans une page.
Mea culpa

[Sergejack]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
var head = document.getElementsByTagName('head').item(0);
 
var myScripts = new Array( [...tes fichiers...] );
 
foreach(x in myScripts) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = myScripts[x];
script.defer = true;
head.appendChild(script);
}

[Shinuza]

Bonjour à toutes et à tous,

je travaille actuellement sur un projet utilisant du javascript.

A l'heure actuel, nous avons un fichier .js assez gros (7000 lignes) et nous aimerions l'éclater en plusieurs plus petit.

Ce fichier étant utilisé dans pas mal de page, nous aimerions gardé les import de ce fichiers dans les pages appelante.

J'aimerais savoir s'il y a moyen d'importer d'autre .js à partir de celui ci.

En gros, pour l'instant, nous avons notre gros fichier, et à terme, on aimerais avoir n plus petit fichiers, et que notre gros fichier soit transformé en:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
import <petit fichier 1>.js
import <petit fichier 2>.js
            .
            .
            .
import <petit fichier n>.js

Merci d'avance pour votre aide

Compile le fichier en local, tu le sépares en différentes parties, et tu merges le tout.

Si tu sers plusieurs fichiers ça va ralentir le chargement de la page, et de beaucoup

[mr.socrate]

Bonjour,

je débute en javasript et j'essaye enfaite de me servir d'une librairie (Syntax highlighter qui importe dix huit fichiers js distincts) pour mettre en valeur du code informatique dans les articles de mon blog, j'ai le même problème j'aimerais alléger mon code en important les fichier js de cette librairie par le bien d'un autre, je trouve votre exemple fort intéressant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
var head = document.getElementsByTagName('head').item(0);
 
var myScripts = new Array( [...tes fichiers...] );
 
foreach(x in myScripts) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = myScripts[x];
script.defer = true;
head.appendChild(script);
}

seulement je ne sais pas trop comment m'y prendre, pourriez vous re-editer ce même code dans le contexte d'une exploitation réel par exemple pour importer ces fichiers :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<script type="text/javascript" src="scripts/shBrushSql.js"></script>
<script type="text/javascript" src="scripts/shBrushVb.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>

Merci d'avance! j'attends votre réponse avec impatience..

[Sergejack]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
var head = document.getElementsByTagName('head').item(0);
 
var myScripts = new Array( "scripts/shBrushSql.js", "scripts/shBrushVb.js", "scripts/shBrushXml.js");
 
foreach(x in myScripts) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = myScripts[x];
script.defer = true;
head.appendChild(script);
}

[hornetbzz]

attention cependant, un petit commentaire d'après la bataille pour ce thread intéressant :
au bémol près que foreach n'est pas implémentée dans toutes les versions de js (>1.6 il me semble), et pas forcément comprise de la même façon selon les navigateurs.
Donc préférez peut-être for (var ma_valeur in tableau) ou selon le besoin for(var i=0;i<tableau.length;i++)

[Bovino]

Oui, d'autant que la syntaxe correcte est

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Array.forEach(callback);

[hornetbzz]

certes

Allez, pour la bonne cause, je me fends d'un morceau de code -testé-, ça peut toujours servir car je n'ai pas trouvé grand chose sur le sujet:

HTML : on ajoute une petite div d'insertion du code javascript (utile si vous avez des codes spécifiques à des pages incluses et non à toutes vos pages - sinon à placer dans <head>)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<html>
<head>
</head>
<body>
<script type="text/javascript" src="lib/javascript/js_autoload.js" defer></script>
<div id="js_script_goes_here"></div>
</body>
</html>

JAVASCRIPT - code de js_autoload.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/**
 * Import js lib
 * @param js_librairies
 * @returns {Boolean}
 */
function init(){
 
	// lib import
	var myscript_location = document.getElementById('js_script_goes_here');
	/* if (undefined == myscript_location)
			alert('div not found');
		else
			alert('found div : ' + myscript_location);*/
	for (var i=0; i < js_librairies.length ; ++i) {
		var my_script = document.createElement('script');
		my_script.type = 'text/javascript';
		my_script.src = relative_path + js_librairies[i];
		my_script.defer = true;
		myscript_location.appendChild(my_script);
	}
    return false;
}
 
/**
 * Start non intrusive js
 * @param func
 */
function addLoadEvent(func) {
	  var oldonload = window.onload;
	  if (typeof window.onload != 'function') {
	    window.onload = func;
	  } else {
	    window.onload = function() {
	      if (oldonload) {
	        oldonload();
	      }
	      func();
	    };
	  }
}
 
 
// var globales
var relative_path = "lib/javascript/";
var js_librairies = new Array("trim.js", "getElementsByRegExpOnId.js", "htmlspecialchars.js");
 
//ONLOAD
addLoadEvent(init);

[hornetbzz]

Une petite touche finale pour le plaisir :

On peut ajouter une petite fonction de débogage au script js_autoload.js afin de vérifier que le chargement des scripts s'est bien déroulé :

Pour cela, il suffit d'ajouter le gestionaire d'evenement scriptLoaded dans la boucle de chargement (cf code ci-dessus) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

my_script.onload = scriptLoaded;

Et de coder ce petit gestionnaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function scriptLoaded(e) {
	var oLoadedScript = e.target || e.srcElement;
	alert ('loaded : ' + oLoadedScript.src);
	return false;
}

[aiphes]

je voudrais utiliser ce code pour charger pas mal de js mais j'ai cette erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Uncaught TypeError: Cannot call method 'appendChild' of null

avec ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/**
 * Import js lib
 * @param js_librairies
 * @returns {Boolean}
 */
function init(){
 
	// lib import
	var myscript_location = document.getElementById('js_script_goes_here');
	/* if (undefined == myscript_location)
			alert('div not found');
		else
			alert('found div : ' + myscript_location);*/
	for (var i=0; i < js_librairies.length ; ++i) {
		var my_script = document.createElement('script');
		my_script.type = 'text/javascript';
		my_script.src = relative_path + js_librairies[i];
		my_script.defer = true;
		myscript_location.appendChild(my_script);
                my_script.onload = scriptLoaded;
	}
    return false;
}
 
/**
 * Start non intrusive js
 * @param func
 */
function addLoadEvent(func) {
	  var oldonload = window.onload;
	  if (typeof window.onload != 'function') {
	    window.onload = func;
	  } else {
	    window.onload = function() {
	      if (oldonload) {
	        oldonload();
	      }
	      func();
	    };
	  }
}
 
 
// var globales - liste les js de zurb à charger
var relative_path = "../zurb/js/foundation/";
var js_librairies = new Array("foundation.alerts.js", "foundation.clearing.js", "foundation.cookie.js","foundation.dropdown.js","dummy.js",
"dummy.js","dummy.js","dummy.js","dummy.js","dummy.js","dummy.js","dummy.js","dummy.js","dummy.js");
 
//ONLOAD
addLoadEvent(init);
function scriptLoaded(e) {
	var oLoadedScript = e.target || e.srcElement;
	alert ('loaded : ' + oLoadedScript.src);
	return false;
}

quelle erreur ai-je fait ?

[Bovino]

Ben... il n'y a aucun élément dans ta page avec l'id js_script_goes_here...

[aiphes]

en effet maintenant ça fonctionne, j'ai juste un problème de chemin car je dois récupérer le chemin du thème drupal pour le mettre dans la variable path :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var relative_path = "../sites/all/themes/zurb/js/foundation/";

sous drupal je peux récupérer le chemin avec :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php
$theme_path = drupal_get_path('theme', 'zurbstarter');
include ($theme_path.'/templates/includes/footer.inc');
?>

j'ai trouvé ça mais je ne sai spas trop comment l'utiliser :
https://drupal.org/node/1427564#comment-6643530

[aiphes]

j'ai avancé mais j'ai une erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
Drupal.behaviors.yourThemeName = function (context) {
  var pathToTheme = Drupal.settings.basePath + "sites/all/themes/";
};
var relative_path = $pathToTheme + "zurb/js/foundation/";

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
Uncaught ReferenceError: $pathToTheme is not defined scripts.js:52
(anonymous function)

[aiphes]

nouvel essai sans succès mais qui montre une amélioration :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var pathToTheme = Drupal.settings.basePath + "sites/all/themes/";
var relative_path = pathToTheme + "zurb/js/foundation/";

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 http://d7-grawitz.vmdev/undefinedsites/all/themes/zurb/js/foundation/foundation.dropdown.js 404 (Not Found)