Discussion :

[Koobor]

Bonjour,

Sur mes différentes pages html, j'ai des fonctions javascript qui effectuent différentes opérations.

Comme certaines fonctions étaient utilisées par plusieurs pages html, je les ai réunies dans un fichier "fonctions.js" que j'ai inclu dans ces pages html.

Je me suis dit ensuite que ce serait bien d'avoir toutes mes fonctions javascript dans un seul fichier que je pourrai alors inclure dans toutes mes pages, comme je l'ai fait pour mes pages PHP.

J'ai constaté ensuite que les fonctions javascript qui n'étaient pas utilisées par certaines pages html étaient quand même lues et provoquaient des erreurs (par exemple lors de l'initialisation de variables javascript en récupérant des variables php qui ne sont pas connues dans ces pages html). Ces erreurs empêchent les autres fonctions d'être appelées (un message me dit que la fonction est introuvable alors qu'elle est bien là).

J'ai compris ce problème en isolant la fonction que je voulais utiliser dans un fichier. En incluant ce fichier, cela fonctionne à nouveau.

Ma question : Y'a-t-il un moyen d'avoir toutes mes fonctions javascript dans un fichier ?

Si cela n'est pas possible, je pense que je vais devoir éclater mes fonctions dans plusieurs fichiers (1 fonction = 1 fichier) et inclure chacun de ces fichiers dans les bonnes pages html...

Merci pour votre aide.

Alex

[marcha]

Salut,

d'un point de vue des performances, il faut savoir qu'une fois ton fichier
chargé, il va rester en cache. Maintenant cela dépend du comportement
des utilisateurs pour pouvoir te dire si c'est rentable ou pas.

En ce qui concerne l'organisation de ton code tu peux faire des espaces
de nommage

Un exemple simple:

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
 
var util = {
 
  message: function(msg) {
    alert("Erreur: " + msg);
  },
 
  calcul: function(a, b) {
    return a + b;
  }
};
 
var navigation = {
 
  goto: function(path) {
    document.location.href = "http://www.monsite.com/" + path;
  }
}

A l'usage:

Code :

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

1
2
3
 
  navigation.goto('index.html');
  alert( util.calcul(2, 4) );

C'est une piste parmi d'autres :-)

[Koobor]

Merci mais ça ne m'aide pas vraiment (ou alors j'ai pas encore tout compris, ce qui est fort probable vu que je ne suis pas un développeur confirmé...)

Ma question ne se rapportait pas à la performance de cette méthode mais à sa faisabilité.

Mon problème, c'est qu'une fonction n'est plus exécutée car elle n'est plus trouvée. Elle n'est plus trouvée car une autre fonction (qui n'est pas utilisée) provoque une erreur. Je voulais savoir s'il existait un moyen pour éviter ce problème.

Pour donner un exemple concret :

J'ai une fonction CheckString qui remplace un caractère interdit par un retour arrière dans un input box. Cette fonction est utilisée dans tous mes formulaires.

J'ai une autre fonction Init_ChangeRequest qui doit initialiser un formulaire selon des données contenues dans des variables PHP. J'initialise des variables javascript en recupérant la valeur d'une variable PHP.

Or, cette 2ème fonction ne sera utilisée que dans 2 formulaires. Pour les autres formulaires qui n'utilisent pas cette fonction, cela pose un problème car la variable PHP n'est pas connue, la variable javascript ne peut donc pas être initialisée, ce qui va causer une erreur. La fonction CheckString ne sera pas exécutée.

Meilleures salutations,
Alex

[marcha]

Salut,

Pour pouvoir t'aider, un petit bout de code illustrant le problème pourrait
servir.

[RomainVALERI]

La solution de premier abord semble être d'isoler ces deux fonctions et de ne les inclure que sur les pages prévues, où elles ne provoquent donc pas d'erreur (je veux dire : pas a priori ).
Pour les autres, effectivement, tu peux très bien les regrouper dans un seul fichier, avec éventuellement un regroupage par espaces de noms comme le propose marcha, et l'inclure sur toutes les pages.

(mais pour plus de précisions montre quand même ton code ^^)

[Koobor]

Voici le bout de code, comme demandé. Pour vous situer un peu, mon site permet aux administrateurs système de demander des machines virtuelles. Ils peuvent éditer leur demandes, modifier les VM existantes, demander des clones, des templates, etc...

Dans mon fichier html, j'inclus le fichier de fonctions javascript :

Code :

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

1
2
3
<?PHP
include("./incl_fonctions.js");
?>

La première fonction est utilisée lors de la modification d'une demande. Je vais récupérer la config de la VM dans la DB que je stocke dans des variables PHP, puis je transmet ces valeurs dans des variables javascript. Selon la valeur de ces variables, certains éléments de mon formulaire sont activés, désactivés, affichés, cachés, ...

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
   function InitConfigOS()
      {
      var StrOSName = '<?php echo($StrOSName); ?>';
      var IntOSPreInst = '<?php echo($IntOSPreInst); ?>';
      var StrOSType = '<?php echo($StrOSType); ?>';
      var IntOSArch = '<?php echo($IntOSArch); ?>';
 
      if(IntOSPreInst == "1")	//OS pre-installe = oui
         {
         document.getElementById('OSYes').checked=true;
         }
      else
         {
         document.getElementById('OSNo').checked=true;
         document.getElementById('txtOSKey').value='';
         document.getElementById('txtOSKey').disabled=true;
         }
 
      if(StrOSType == "STANDARD")
         {
         document.getElementById('StandardOS').checked=true;
         document.getElementById('selOSid').disabled=false;
         document.getElementById('selOSid').value=StrOSName;
         document.getElementById('txtOSOther').value='';
         document.getElementById('txtOSOther').disabled=true;
         }
      else
         {
         document.getElementById('SpecificOS').checked=true;
         document.getElementById('txtOSOther').disabled=false;
         document.getElementById('txtOSOther').value=StrOSName;
         document.getElementById('selOSid').disabled=true;
         }
	  //Selection 32 ou 64bit
      document.getElementsByName('rbOS32-64')['OS'+IntOSArch].checked=true;
      } // fin fonction InitConfigOS

Voici une autre fonction qui est utilisée à peu près sur tous mes formulaires où on trouve des input de type textbox. Par exemple, lorsque je demande une adresse IP, je remplace tout ce qui n'est pas des chiffres et des "." par un retour arrière :

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
   function ChkStr(StrField, StrValue)
      {
      // Remplacement des caracteres interdits par un backspace lors de la frappe
      var digits = new RegExp(StrValue);
      var verif;
 
      for(i = 0; i < StrField.value.length; i++)
         {
         verif = digits.test(StrField.value.charAt(i));
 
         if(verif == false)
            {
            StrField.value = StrField.value.substr(0,i);
            }
         }
     }  //Function ChkStr

Cette 2ème fonction n'est pas exécutée (le message dit qu'elle est introuvable) et j'obtiens un message d'erreur relatif à l'initialisation de la variable javascript "StrOSName" :

Code :

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

var StrOSName = '<?php echo($StrOSName); ?>';

En effet, la variable PHP $StrOSName est inconnue (dans le cas où on n'est pas en train d'éditer une demande) et il ne va pas plus loin.

Je pense que la solution la plus facile sera d'éclater ces fonctions dans différents fichiers et de ne regrouper QUE les fonctions qui sont utilisées partout.

Meilleures salutations,
Alex

[marcha]

Salut,

Est-ce que tu as FireFox avec les extensions Web Developper et FireBug ?

[Koobor]

Non, j'utilise Firefox mais jusqu'à maintenant, je m'en suis sorti avec la Console d'erreurs standard.

Mais je vais aller jeter un coup d'oeil sur ces extensions...