Le blog

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:

var Command = function (receiver, signOp,value) {
    this.execute = receiver.op;
    this.signOp=signOp;
    this.value = value;
}

Où le code de l'objet Receiver s'écrit ainsi:

var Receiver=function(op){
	this.op=op;
}

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:

var recPlus=new Receiver(plus);
var recMoins=new Receiver(moins);	

Basé sur les deux fonctions plus et moins ci-dessous :

function plus(a, b)  { return a + b; }
function moins(a, b) { return a - b; }

Ainsi, voici quelques déclarations concrètes de Command:

new Command(recPlus,"+", 100);

ou encore

new Command(recMoins, "-",200);

Mais on préfère plutôt ces déclarations paramétrées:

var recPlus=new Receiver(plus);
var recMoins=new Receiver(moins);

var Command = function (receiver, signOp,value) {
    this.execute = receiver.op;
    this.signOp=signOp;
    this.value = value;
}
//concertes impl Command 
var PlusCmd = function (value) {
	return new Command(recPlus," + ", value);
};
//concerte 
var MoinsCmd = function (value) {
    return new Command(recMoins, " - ",value);
};

Écrivons un Sender comme suit :

var sender = function (initVal) {
	var current = initVal; 
    return {
        send: function (command) {
        //recalcul of current with operator cmd
        current = command.execute(current, command.value);
       }
    }
} (0); //inited wwith a 0 as initValue, naturel!

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:

var page = require('webpage').create();
var system = require('system');
page.injectJs('./DPCommandBlog.js');

page.onConsoleMessage = function(msg) {
	system.stderr.writeLine('\nSorties console:\n' + msg);
};

page.evaluate(function() {
    sender.send(new PlusCmd(260));
    sender.send(new MoinsCmd(240));
    logger.affiche();	
})

//console.log("phantomjs exit ok");
phantom.exit(0);

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:

phantomJS DPCommandBlogTest.js

Avec le logger que j'ai ajouté dans les sources à télécharger vous pouvez voir cet affichage:

>phantomJS DPCommandBlogTest.js

Sorties console:

Operation  +  sur 0 et 260:

0 + 260= 260

Operation  -  sur 260 et 240:

260 - 240= 20

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,