Discussion :

[topolino]

Bonjour,

Je dois faire une libraire Javascript avec laquelle je dois me connecter � un serveur de push et faire des requetes qui enverrons des reponses de facons asynchrones.
Si je devais le faire en c# j'aurais utilis� les evenements.

Mais en Javascript je suis un peu perdu entre les callbacks, les promises et les events.

J'ai compris que les promises seraient tres bien mais pas support�es par tous les navigateurs.


Quel est votre avis ? Le top serait d'avoir un petit exemple pour que je puisse comparer les differente solutions.

Merci � vous

[SylvainPV]

En fait les promises et le pattern Observer (ce dont je pense tu fais r�f�rence par "events") ne sont que des API construites par-dessus la notion de callback. Et un callback, c'est tout simplement une fonction pass�e en argument et appel�e suite � un traitement asynchrone. Il s'agit donc surtout d'une diff�rence de syntaxe plus que de fonctionnement.

Les promesses ont l'avantage d'�tre cha�nables et d'�viter le "callback hell", qui consiste � imbriquer des fonctions dans des fonctions dans des fonctions jusqu'� se retrouver avec une pyramide de code difficilement maintenable. Aussi, en cas d'erreur elles transportent l'erreur jusqu'� la fin de la cha�ne de traitements asynchrones, ce qui est pratique pour g�rer toutes les erreurs au m�me endroit. Il y a bien une API standard Promise en ES6 qui est tr�s peu support�e actuellement, mais d'autres librairies peuvent tr�s bien simuler une API de type Promise. jQuery le fait notemment avec les Deferred. Donc ce n'est pas trop un probl�me de support.

Je te conseille de commencer de mani�re simple avec des callbacks. Une fois que tu ma�triseras bien cette notion et que tu en auras vu les avantages/inconv�nients, tu pourras t'int�resser aux Promise et voir ce que �a apporte.

[topolino]

Merci pour ta reponse. Je me suis appuy� sur un tuto du site. J'ai voulu le mettre sur JSFiddler mais je n'y arrive pas. Sinon mon exemple fonctionne bien.

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
 
    <h1>Demo</h1>
    <input type="button" id="btnStart" value="start" />
    <input type="button" id="btnStop" value="stop" />
<hr>
Result <div id="result"></div>
   <script>
 
    var display = function(data, data2){
      document.getElementById('result').innerHTML = data;
    }
 
        $.getById('btnStart').on('click',function(){
            $.getById('btnStart').start(display)
          });
 
        $.getById('btnStop').on('click',function(){
            $.getById('btnStop').stop()
          });
   </script>

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
37
38
39
40
41
42
43
44
45
46
 
(function(){      
	var x;
    var myFWK = {
    	elems:[],
    	getById:function(){
        	var tempElems = [];
        	for(var i = 0; i<arguments.length; i++){
            	if(typeof arguments[i] === 'string'){
                	tempElems.push(document.getElementById(arguments[i]));
            	}
        	}
        	this.elems = tempElems;
        	return this;
    	},
 
    	on: function(action, callback){
        	if(this.elems[0].addEventListener){
            	for(var i = 0;i<this.elems.length;i++){
                	this.elems[i].addEventListener(action,callback,false);
            	}
        	}else if(this.elems[0].attachEvent){
            	for(var i = 0;i<this.elems.length;i++){
                	this.elems[i].attachEvent('on'+action,callback); 
            	}
        	}
        	return this; // Renvoie this dans l'ordre d'appel
    	},
 
    	start:function(callback){
        	x = setInterval(function(){
                var second = new Date().getSeconds();
                callback(second,'non')
            }, 1000);
        	return this;
    	},
 
    	stop:function(){
        	clearInterval(x);
        	console.log('stop');
        	return this;
    	}        
	}
 
	if(!window.$){window.$=myFWK;}
})();

Les callbacks fonctionnent bien. Pour implementer les promises comment dois je faire ? inclure la librairie q ?

[SylvainPV]

Tu risques d'avoir des probl�mes � stocker les �l�ments s�lectionn�s directement sous l'objet myFWK. Question b�te, pourquoi se lancer dans cette entreprise ? Auto-formation ? Un jQuery ou un Zepto ferait parfaitement l'affaire.

Enfin pour r�pondre � ta question, si tu veux une interface de type Promise effectivement il te faut choisir une impl�mentation. Q en est une, il y en a bien d'autres: Bluebird, when.js, then.js...

[topolino]

Nous avons une application financiere KnockOut avec un serveur de push Nodes.
Nous voulons donner � nos client la possibilit� de se connecter diretement � notre web serveur pour avoir que les donn�es.

Pour des questions de securit�, best practices... nous voulons leur donner une lib Javascript qui leur mache entierement le travail (connection, cache, transformation des donn�es.....) et qui ne soit pas dependante d'un framework.

La lib devra etre utilisable dans n'importe quels frameworks ou tout simplement en Javascript pur. Je cherche � comprendre comment creer de facon correct cette librairie

Tu risques d'avoir des probl�mes � stocker les �l�ments s�lectionn�s directement sous l'objet myFWK.

Peux tu precisier.

J'essaye de comprendre cette lib: https://github.com/andrew8088/dome/b...c/dome.js#L163
Pourquoi au debut il utilise les prototypes puis � la fin un objet literal ?

[SylvainPV]

Je pense que tu devrais s�parer les fonctions g�n�riques du style getById du reste de ton code propre au "m�tier". Un Zepto p�se moins de 10 Ko, on ne peut pas vraiment parler de framework. Il s'agit plus de libs utilitaires, histoire d'�viter de r�inventer la roue. Aussi, s'approprier la variable globale $ n'est pas la meilleure fa�on de s'assurer d'�tre compatible avec n'importe quel framework.

Tu risques d'avoir des probl�mes � stocker les �l�ments s�lectionn�s directement sous l'objet myFWK.

Imaginons que tu fais un traitement asynchrone comme une requ�te. Au callback, les �l�ments stock�s dans myFWK peuvent avoir �t� modifi�s par un autre appel. R�f�rence commune = usage synchrone ou rien ; c'est pour �a que dans la lib dome il stocke les �l�ments en variables locales, comme �a elles sont ind�pendantes � chaque appel

Regarde la diff�rence entre messageArgument et Notif.message dans le code ci-dessous:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
var Notif = {  
  message: null,
  show: function(messageArgument){
    Notif.message = messageArgument;
    setTimeout(function(){
      alert(messageArgument+ "/" + Notif.message)
    }, 1000)
  }
}
 
Notif.show("test1");
Notif.show("test2");

Pourquoi au debut il utilise les prototypes puis � la fin un objet literal ?

Dome est son constructeur interne, sa "classe" si tu pr�f�re. Elle n'est pas expos�e globalement. dome en minuscule est son namespace global, celui expos� � l'utilisateur lui permettent d'utiliser la lib. L'un est une fonction constructeur, l'autre un objet jouant le r�le d'API.