Discussion :

[Doksuri]

Bonjour, je suis tombe sur un concept que je trouve genial, mais que j'ai du mal a implementer (code simple/concis)
un service va commencer par initialiser un tableau qui stockera les commandes a executer quand le script principal sera telecharge
par exemple monService = monService || {cmd:[] } ainsi, on peux ajouter ce qu'on veut : monService.cmd.push(() => { console.log('ok'); });.
et quand monService sera telecharge, il executera tout ce qu'il y aura dans monService.cmd.

jusque la ca va, mais meme apres telechargement du service, on pourra toujours faire monService.cmd.push(() => console.log('re'); }); et celui-ci sera quand meme execute

comment implementeriez-vous ca : un setInterval degeux qui verifie le contenu de monService.cmd ?
un observer sur l'array ?
autre ?

les solutions que je trouve sur internet me semblent completement dysproportionnes par rapport au probleme

[mathieu]

quand le script principal sera telecharge

vous parlez du moment où le script est téléchargé par le navigateur ?

on pourra toujours faire

qui est ce "on" ?

[Doksuri]

vous parlez du moment où le script est téléchargé par le navigateur ?

=> oui

en gros, dans l'ordre chronologique, ca ferait ca :

Code javascript :

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

1
2
3
4
5
6
monService.cmd.push(() => { console.log('1'); });
monService.cmd.push(() => { console.log('2'); });
<script src="monService.js"></script>
/* monService.js execute tout ce qu'il y a dans monService.cmd (1 & 2) */
monService.cmd.push(() => { console.log('3'); });
/* monservice.js execute la nouvelle commande (3)*/

[mathieu]

et qu'est ce que vous souhaitez obtenir comme résultat ?

[Doksuri]

bah, ce que j'ai explique dans mon dernier message : la chronologie

pouvoir ajouter des commande avant & apres qu'un script soit telecharger, mais sans passer par un timeout degeu, ni par une solutions spagetti

voici ce que j'essaye de faire (j'ai volontairement mis un long timeout que vous puissiez comrendre comment ca fonctionne)

Code javascript :

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
monService = monService || {cmd:[]};
monService.cmd.push(() => { console.log('before 1'); });
monService.cmd.push(() => { console.log('before 2'); });
/* simulation fin telechargement monService.js */
var monService = {
    cmd:monService.cmd || [],
    checkQueue:function() {
        for(let i=0; i<this.cmd.length; ++i) {
            this.cmd[0]();
            this.cmd.shift();
        }
    },
    init:function() {
        monServiceLoop = setInterval(() => {
            this.checkQueue();
        }, 1E3);
    }
};
monService.init();
/* fin monService.js */
 
/* continuite de mon code */
monService.cmd.push(() => { console.log('after 1'); });
monService.cmd.push(() => { console.log('after 2'); });

[NoSmoking]

Bonjour,
j'aurais mis une méthode add plutôt qu'un push direct.

Quand est-ce que les « cmd » sont exécutées,

• une fois initialisée ;
• exécutée qu'une que fois toutes sont initialisées ;
• après que celles en cours sont terminées.

Pour moi elles exécuteront bien dans l'ordre !

[Doksuri]

c'est pas l'ordre qui me pause probleme, mais l'execution apres chargement du script (dans mon exemple, c'est les after qui me posent probleme)

[NoSmoking]

Si on en revient à :

comment implementeriez-vous ca

je ferais à première vu quelque chose comme :

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
const Service = {
  queue: [],
  isStart: false,
  add: function (callback) {
    this.queue.push(callback);
    if( this.isStart) {
      this.action();
    }
    return this;
  },
  action: function () {
    while (this.queue[0]) {
      this.queue[0]();
      this.queue.shift();
    }
  },
  start: function () {
    this.isStart = true;
    this.action();
    return this;
  },
  stop: function () {
    this.isStart = false;
    return this;
  },
}

avec une utilisation du type :

Code :

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

1
2
3
4
5
6
7
8
Service
  .add(() => { console.log('service 1'); })
  .add(() => { console.log('service 2'); })
  .add(() => { console.log('---------'); });
Service.start();
Service
  .add(() => { console.log('service 3'); })
  .add(() => { console.log('service 4'); });

Je ne sais pas si c'est ce que tu cherches à faire ou un truc dans ce style !

[Doksuri]

ton script fonctionne uniquement si le fichier qui contient ton Service a ete charge avant les appels a Service.add()

ce que j'essaye de faire, c'est pouvoir stocker des commandes en attendant que le service soit charge, qu'il les charge (quand le service est charge), puis que les nouvelles commandes (post chargement) soit executees

(mon probleme est si tordu que ca ?)

[Watilin]

pouvoir ajouter des commande avant & apres qu'un script soit telecharger, mais sans passer par un timeout degeu, ni par une solutions spagetti

Moi ça me fait penser à Cron, où à la boucle principale des navigateurs et de la plupart des jeux vidéo. On a une « routine » qui consulte le tableau périodiquement (typiquement, 60 fois par seconde) et sa période est fixe, ce qui donne un certain nombre de garanties. Vouloir asservir le déclenchement de cette routine à ce qui se passe dans le tableau, c’est à mon avis se compliquer la vie. Donc je pense que dans le cas présent, un timeout n’est pas dégueu, c’est un cas d’utilisation tout à fait justifié.

[Doksuri]

Donc je pense que dans le cas présent, un timeout n’est pas dégueu, c’est un cas d’utilisation tout à fait justifié.

ok, je vais donc rester sur cette formule (meme si elle ne me plait pas trop)

[NoSmoking]

ce que j'essaye de faire, c'est pouvoir stocker des commandes en attendant que le service soit charge,

c'est quand même pas bien orthodoxe

Il existe une solution d'« écoute » en passant par un new Proxy qui pourrait dans ce cas te convenir.

Le principe étant d'encapsuler ton tableau monService.cmd dans un Proxy qui va intercepter les actions sur celui-ci et ce une fois ton init réalisé et après traitement des données déjà présentes.

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
var monService = {
  cmd: monService.cmd || [],
 
  init: function() {
    // on traite les éléments déjà stockés
    while (this.cmd[0]) {
      this.cmd[0]();
      this.cmd.shift();
    };
    // on encapsule l'array dans un Proxy
    this.cmd = new Proxy(this.cmd, {
      set: function(target, prop, val) {
        if ("function" === typeof val) {
          val();
          target.unshift();
        }
        return true;
      },
    })
  }
};

Le peu que je viens de tester semble fonctionner.

[Doksuri]

Il existe une solution d'« écoute » en passant par un new Proxy qui pourrait dans ce cas te convenir.

Le principe étant d'encapsuler ton tableau monService.cmd dans un Proxy qui va intercepter les actions sur celui-ci et ce une fois ton init réalisé et après traitement des données déjà présentes.

genial ! c'etait typiquement un truc comme ca que je cherchais ! merci