Discussion :

[kerinel]

Bonjour,

j'ai un petit problème pour ajouter dynamiquement des méthodes à mes objets à partir du nom de la méthode.

Tout d'abord j'ai un fichier avec des méthodes particulières :

Code :

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

1
2
3
4
5
6
7
8
//  FICHIER 1
function maMethodeMachin(unParametre){
  blablabla;
}
 
function maMethodeTruc(unParametre){
  blablabla;
}

d'autre part j'ai un fichier xml qui décrit les propriétés de certains objets assez semblables mais certains ayant des méthodes particulières.

Code xml :

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

1
2
3
4
5
6
7
8
9
10
// FICHIER XML
<UneChose Name="Bidule"/>
 
<UneChose Name="Machin">
  <MethodeSpeciale Name="maMethodeMachin">
</Objet>
 
<UneChose Name="Truc">
  <MethodeSpeciale Name="maMethodeTruc">
</Objet>

dans mon code je récupère le fichier xml et je crée des "choses" en fonction des besoins (on demande unBidule OU unMachin OU ...).

Code :

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

1
2
3
//  FICHIER 2
var unBidule = new Chose();
var unMachin = new Chose();

et c'est là que je bloque.
Comment ajouter dynamiquement la méthode "maMethodeMachin" à unMachin ?
J'ai ceci

Code :

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

1
2
//  FICHIER 2
var nomFonctionSpeciale = getNomFonctionSpecialeDepuisLeXML(); // ici je récupère un String qui vaut "maMethodeMachin"

Mais ensuite ? Comment interpréter le contenue de nomFonctionSpeciale pour obtenir l'équivalent de

Code :

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

unMachin[nomFonctionSpeciale] = maMethodeMachin;

Actuellement j'utilise un artifice dans le premier fichier

Code :

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

1
2
3
4
5
6
7
8
//  FICHIER 1
function getMethode(unNomDeMethode){
  switch (unNomDeMethode){
   case "maMethodeTruc": return maMethodeTruc;
   case "maMethodeBidule": return maMethodeBidule;
   ... 
  }
}

mais ça oblige à compléter cette fonction dès que je rajoute une nouvelle méthode spéciale et il va y en avoir beaucoup.

Je cherche quelque chose comme

Code :

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

unMachin[nomFonctionSpeciale] = FaisLeLienVers(maMethodeMachin);

J'ai choisi cette approche car je ne voulais pas créer plein de classes supplémentaires à chaque fois qu'il fallait rajouter un comportement supplémentaire spécifique pour uneChose. Je précise que si j'utilise JavaScript ce n'est pas sur un site web, il n'y a pas de problème de version de navigateur etc....

Merci pour votre aide,
bon code,
kerinel

[NoSmoking]

Bonjour,
je ferais un truc tout « simple » comme par exemple

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
// nom de la fonction a appeller
var f = "maFonction";
 
// function attachée à l'objet global window
function maFonction ( param){
  alert('Bien le bonjour de maFonction !\nparam : ' + param);
}
// function attachée à l'objet MesFct, namespace
var MesFct = {
  "maFonction" : function( param){
      alert('Bien le bonjour de MesFct.maFonction ! !\nparam : ' + param);
  }
}
var o = {
  w_fct : window[f],
  mf_fct : MesFct[f]
}
o.w_fct('window');
o.mf_fct('MesFct');

[danielhagnoul]

@NoSmoking : o.w_fct(); // Uncaught TypeError: o.w_fct is not a function(…)

Pour que cela fonctionne, il faudrait écrire :

Code JavaScript :

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

1
2
3
4
// function attachée à l'objet global window
window.maFonction = function( param ){
  console.log('Bien le bonjour de maFonction !\nparam : ' + param);
}

Ce qui n'est pas conseillé !

[NoSmoking]

@NoSmoking : o.w_fct(); // Uncaught TypeError: o.w_fct is not a function(…)

Bonjour Daniel, dans quel contexte obtiens tu cette erreur ?

[danielhagnoul]

Bonjour Daniel, dans quel contexte obtiens tu cette erreur ?

Chrome Version 54.0.2840.34 beta-m (64-bit)

EDIT

Object expected sur Microsoft Edge 38.14393.0.0 Microsoft EdgeHTML 14.14393

TypeError: o.w_fct is not a function sur Firefox 51.0a2 (2016-09-28) (32 bits)

[Beginner.]

Salut,

Par curiosité, n'est-ce pas possible de faire cela avec la méthode eval() ?

[NoSmoking]

@danielhagnoul :
j'ai l'imression que l'on va au devant d'ennuis car je viens de tester sous (mise à jour automatique sauf peut être pour Edge)

• FireFox 49.0.1 September 23, 2016
• Chrome 53.0.2785.116 m (64-bit)
• Microsoft Edge 25.10586.0.0 Microsoft EdgeHTML 13.10586

et pas de soucis.

Si le window.maFonction te chagrine, ce qui est compréhensible, on peut plus élégamment passer par une expression de fonction

Code :

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

1
2
3
4
5
6
7
8
// déclaration de fonction
function maFonction ( param){
  console.log('Bien le bonjour de maFonction !\nparam : ' + param);
}
// expression de fonction
var maFonction = function( param){
  console.log('Bien le bonjour de maFonction !\nparam : ' + param);
}

Ma préférée restant le NameSpace.

@Beginner. : Dès l'instant où il existe une autre possibilité autant oublier la méthode eval(), « eval is evil ».

[danielhagnoul]

@NoSmoking : il n'y a pas de problème avec ton code ! Désolé !

C'est moi qui me suis fait piéger, en testant ton code dans le gestionnaire d'événement "load".

Voir et tester le code ci-dessous.

Code HTML :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
 
  </style>
  <script>
    'use strict';
      
    function maFunc(){
      console.log( "Bonjour" );
    }
      
    document.addEventListener( 'DOMContentLoaded', function( ev ){
      
    });
    
    window.addEventListener( 'load', function( ev ){
      
      function noFunc(){
        console.log( "Hello" );
      }
 
      if ( 'function' == typeof window.noFunc ){
        noFunc();
      } else {
        console.error( `window.noFunc n'existe pas` );
      }
      
      if ( 'function' == typeof window.maFunc ){
        maFunc();
      } else {
        console.error( `window.maFunc n'existe pas` );
      }
      
    });
  </script>
</head>
<body>
  <main>
 
  </main>
</body>
</html>

Il y aura certainement d'autres personnes qui tomberont dans ce piège. Je pense plus particulièrement aux codes utilisant la notation arrow.