Nous poursuivons dans cette seconde partie l'illustration du design pattern Command à l'aide d'une démo en Javascript. Nous testons la démo JS via PhantomJS.
La première partie a rappelé brièvement la signification de ce design pattern et son objectif, nous passons donc directement à la pratique.
La démo étudie un cas simple de calculs effectués avec plusieurs opérations (fonctions).
On applique notre design pattern pour encapsuler et regrouper les invocations.
Nous commençons par écrire une fonction JS nommée Command:
Où le code de l'objet Receiver s'écrit ainsi:
Command attend trois arguments:
- Le premier argument indique l'opération (plus précis, c'est Receiver.op ) à effectuer,
- Le second une chaîne donnant son signe ou son libellé,
- Le dernier argument est la valeur sur laquelle va opérer la fonction (fournie par le premier argument).
Justement le premier argument peut être l'une de ces deux implémentations, exemple:
Basé sur les deux fonctions plus et moins ci-dessous :
Ainsi, voici quelques déclarations concrètes de Command:
Mais on préfère plutôt ces déclarations paramétrées:
Écrivons un Sender comme suit :
On voit bien que le Sender n'est pas couplé au Receiver. Il ne voit que Command qu'il envoie.
Ici il récupère la valeur de current via l'appel à execute de Command qui délègue cet appel au Receiver.
A noter que tous les codes JS précédents doivent être consignés dans un fichier nommé "DPCommandBlog.js
" dans le même répertoire que le test à venir.
Vous pouvez sinon télécharger tout le code à la fin de cet article.
Enfin, écrivons un test avec PhantomJS pour voir tout cela en action:
Le morceau de code ci-dessous, spécifique à phantomJS, permet de tester notre démo JS:
Enregistrez ce code dans un fichier nommé par exemple "DPCommandBlogTest.js" , puis exécutez ce test avec la commande dos donnée ci-après.
Pour l'instant donnons quelques explications:
- La ligne 3, injecte notre code JS écrit précédemment (ou le fichier
DPCommandBlog.js
à télécharger), - Les lignes 9 à 11, le client prépare tout le contexte pour effectuer les demandes de calculs à envoyer.
Tout est englobé dans page.evaluate pour que PhantomJS l'exécute. - La ligne 12, logger.affiche(), trace toutes les actions depuis la première commande reçue.
Lançons la commande dos ci-dessous pour exécuter le test phantomJS:
Avec le logger que j'ai ajouté dans les sources à télécharger vous pouvez voir cet affichage:
J'espère que l'illustration en javascript est suffisamment claire.
Vous constatez qu'avec les fonctions JS, l'illustration de ce design est très concis.
Les sources peuvent être téléchargées ici.
@Enjoy,