Module-Pattern-en-JavaScript

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour à tous,

Avant tout, je tient à préciser que si mon post n'est pas situé au bon endroit, je m'en excuse par avance, et les Modérateurs peuvent déplacer mon post au bon endroit, ou me le signaler pour que je le supprime / re-crée au bon endroit.

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.

C'est quelle application qui lit ton Javascript ? Sinon je pense que tu peux ouvrir un topic sur le forum et indiquer le lien dans un prochain message ici.

Yarflam

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.

Édité par darkterra01

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte