Module-Pattern-en-JavaScript

Bonjour à tous,

Je dépoussière le tuto Module-Pattern-en-JavaScript d'un peut plus d'un an pour vous demander de l'aide. En premier lieu, merci à Spoke pour ce tuto très clair. Je pense avoir tous compris, cependant, je me heurte a un problème que je n'arrive pas a résoudre.

Etant pas expert en Javascript, mais cherchant à m'améliorer et surtout coder de manière plus propre, j'ai cherché un tuto pour créer une app modulaire. Donc ce tuto correspond parfaitement.

Seulement lorsque j'essaye d'étendre un module depuis un autre fichier, je n'y arrive pas.

Exemple :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

/**
 * 
 * FileManager.js : 
**/

'use strict';
let NNM = NNM || {};

NNM.FileManager = (function(self, extentionName) {
  self.toto = 'Yo Toto';
  console.log(NNM);
  console.log(self);
  return self;
})(NNM.FileManager || {}, 'FileManager');

export default NNM;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/**
 * 
 * TMDBLink.js : 
**/

'use strict';
let NNM = NNM || {};
NNM.FileManager = (function(self, extentionName) {
  console.log(NNM);
  console.log(extentionName);
  self.titi = 'Yup TiTi';
  return self;
})(NNM.FileManager || {}, 'SelectMovieExtention');

export default NNM;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

/**
 * 
 * Core.js : 
**/

'use strict';
let NNM = NNM || {};

let socket = io();

// ES6 Static Legacy Import
import 'FileManager.js';


// API Dynamic Loader
socket.on('ModulesToLoad', function (data) {
  let temp = JSON.parse(data);
  temp.NameModules.forEach (function(module, index) {
    System.import(module);
  });
});

Pour résumer, j'ai un fichier Code.js qui est la pour gérer mes module (pour l'instant il ne fait que les imports), du fait que j'utilise la norme ES6 me permet de faire des imports static, mais pas encore (et peut-être jamais) les import dynamique. Pour cette raison et parce que les import ES6, ne sont pas encore gérer par les navigateurs, j'utilise un transpilleur pour convertir du ES6 en ES5 (que system.js utilise).

Comme expliqué plus haut, mon code ne permet pas d'étendre un module, il recrée un nouveau. Je pense que cela vient du fait que le module n'arrive pas au code qui doit étendre le module.

J'ai essayer dans un même fichier:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

'use strict';
let NNM = NNM || {};

// Module original
NNM.FileManager = (function(self, extentionName) {
  self.toto = 'Yo Toto';
  console.log(NNM);
  console.log(self);
  return self;
})(NNM.FileManager || {}, 'FileManager');

// Simulation d'un deuxième fichier
NNM = NNM || {};

// étend le module original
NNM.FileManager = (function(self, extentionName) {
  self.titi = 'Yup ... TiTi';
  console.log(self);
  return self;
})(NNM.FileManager || {}, 'SelectMovieExtention');

Donc pour moi le problème, est bien que mon module NNM n'est pas passé en paramètre lors du chargement des modules qui vont soit créer un sous module (NNM.FileManager) soit étendre un sous module (NNM.FileManager).

J'ai cherché sur le net, et sur la doc de system.js, je n'ai pas trouvé comment lors d'un import ,passer en paramètre mon module NNM.

Dans le tuto, je n'ai pas vu non plus d'explication. Quelqu'un aurait une réponse a ma problématique ?

Merci d'avance.

Cette Application est destiné aux navigateurs (en excluant IE bien entendu ;), pour l'instant je me base sur Google Chrome et Google Chrome Canary pour le Développement.

Bonjour à tous,

personne n'a de solution ?

Est ce que mon analyse est juste ?

Avez vous des pistes pour m'aider à me débloquer ?

Merci d'avance