Open source et architecture logicielle

Bibliothèque JavaScript pour manipuler les polynomes - 2eme partie

par

autran

, 15/01/2017 à 14h43 (2318 Affichages)

Maintenant que vous vous êtes familiarisé avec la classe Monome et une Interface très (trop) simpliste de test. Voici le code source de la classe Polynome et de son interface HTML5 de test un peu plus aboutie.
Fichier polynome.js

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
class Monome {
  constructor(puissance, valeur) {
    this.degre = puissance;
  	this.coef = valeur;
    this.integrale = () => new Monome(this.degre+1, this.coef/(this.degre+1));
    this.toString = () => this.coef + "x^" + this.degre;
    this.derivee = () => this.degre === 0 ? new Monome(0,0) : new Monome(this.degre-1, this.degre*this.coef);
    this.calculer = x => this.coef * Math.pow(x, this.degre);
    this.multiplier = monome => new Monome(this.degre + monome.degre, this.coef * monome.coef);
    this.compareTo = monome => this.degre - monome.degre;
  }
}
 
class Polynome {
  constructor() {
    this.monomes = new Array();
    this.calculer = x => this.monomes.reduce((a,b) => a.calculer(x) + b.calculer(x));
  }
  ajouterMonome(monome) {
    var found = false;
    this.monomes.forEach((item, index, arr) => {
      if (item.degre === monome.degre) {
        found = true;
        arr[index].coef += monome.coef;
      }
    })
    if (!found) this.monomes.push(new Monome(monome.degre, monome.coef));
    this.monomes.sort((a,b) => a.compareTo(b));
  }
 
  toString() {
    var result = "";
    this.monomes.forEach((item,index) => {
      if (index === 0) result += item.toString();
      else result += " + " + item.toString();
    });
    return result ;
  }
 
  derivee() {
    var result = new Polynome();
    result.monomes = this.monomes.map(item => item.derivee());
    return result;
  }
 
  integrale() {
    var result = new Polynome();
    result.monomes = this.monomes.map(item => item.integrale());
    return result;
  }
 
  additionner(poly) {
    var result = new Polynome();
    this.monomes.forEach(item => result.ajouterMonome(item));
    poly.monomes.forEach(item => result.ajouterMonome(item));
    return result;
  }
 
  multiplierMonome(m) {
    var result = new Polynome();
    this.monomes.forEach(item => result.ajouterMonome(item.multiplier(m)));
    return result;
  }
 
  multiplier(poly) {
    var result = new Polynome();
    this.monomes.forEach(item => {
      result = result.additionner(poly.multiplierMonome(item));
    });
    return result;
  }
}

Et l'IHM de test, le fichier polynome.html

Code html :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!doctype html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<title> Calcul de polynomes </title>
		<script type="text/javascript" src="polynome.js"></script>
		<script type="text/javascript">
                        poly1 = new Polynome();
                        poly2 = new Polynome();
 
                        var showPolynome1 = () => {
                                var coef1 = parseFloat(document.getElementById("coef1").value, 10);
                                var degre1 = parseInt(document.getElementById("degre1").value, 10);
                                if (degre1 < 0) {
                                        alert("entrer un entier positif ou nul");
                                        return false;
                                }
                                var monome1 = new Monome(degre1, coef1);
                                poly1.ajouterMonome(monome1);
                                document.getElementById("poly1").innerHTML = poly1.toString();
                        }
 
                        var showPolynome2 = () => {
                                var coef2 = parseFloat(document.getElementById("coef2").value, 10);
                                var degre2 = parseInt(document.getElementById("degre2").value, 10);
                                if (degre2 < 0) {
                                        alert("entrer un entier positif ou nul");
                                        return false;
                                }
                                var monome2 = new Monome(degre2, coef2);
                                poly2.ajouterMonome(monome2);
                                document.getElementById("poly2").innerHTML = poly2.toString();
                        }
 
                        var resetPolynome1 = () => {
                                document.getElementById("poly1").innerHTML = "";
                                document.getElementById("deriv1").innerHTML = "";
                                document.getElementById("integ1").innerHTML = "";
                                document.getElementById("add").innerHTML = "";
                                document.getElementById("mult").innerHTML = "";
                                poly1 = new Polynome();
                        }
 
                        var resetPolynome2 = () => {
                                document.getElementById("poly2").innerHTML = "";
                                document.getElementById("deriv2").innerHTML = "";
                                document.getElementById("integ2").innerHTML = "";
                                document.getElementById("add").innerHTML = "";
                                document.getElementById("mult").innerHTML = "";
                                poly2 = new Polynome();
                        }
 
                        var derivee1 = () => document.getElementById("deriv1").innerHTML = poly1.derivee().toString();
 
                        var derivee2 = () => document.getElementById("deriv2").innerHTML = poly2.derivee().toString();
 
                        var integrale1 = () => document.getElementById("integ1").innerHTML = poly1.integrale().toString();
 
                        var integrale2 = () => document.getElementById("integ2").innerHTML = poly2.integrale().toString();
 
                        var multiplier = () => document.getElementById("mult").innerHTML = poly1.multiplier(poly2).toString();
 
                        var additionner = () => document.getElementById("add").innerHTML = poly1.additionner(poly2).toString();
                </script>
	</head>
	<body>
		<section>
			<article>
				<legend><h1>Entrer les parametres des polynomes</h1></legend>
				<fieldset>
					<label>Degré =</label>
					<input id="degre1" type="number" style="width:100px">
					<label>Coefficient =</label>
					<input id="coef1" type="number" style="width:100px">
					<button type="submit" onclick="showPolynome1()">Ajouter monome</button>
					<h1></h1>
					<label><b>Polynome 1 : </b></label>
					<label id="poly1"></label>
					<button type="submit" onclick="resetPolynome1()">Effacer Polynome 1</button>
					<h1></h1>
					<button type="submit" onclick="derivee1()">Derivée</button>
					<label id="deriv1"></label>
					<h1></h1>
					<button type="submit" onclick="integrale1()">Integrale</button>
					<label id="integ1"></label>
				</fieldset>
				<fieldset>
					<label>Degré =</label>
					<input id="degre2" type="number" style="width:100px">
					<label>Coefficient =</label>
					<input id="coef2" type="number" style="width:100px">
					<button type="submit" onclick="showPolynome2()">Ajouter monome</button>
					<h1></h1>
					<label><b>Polynome 2 :</b></label>
					<label id="poly2"></label>
					<button type="submit" onclick="resetPolynome2()">Effacer Polynome 2</button>
					<h1></h1>
					<button type="submit" onclick="derivee2()">Derivée</button>
					<label id="deriv2"></label>
					<h1></h1>
					<button type="submit" onclick="integrale2()">Integrale</button>
					<label id="integ2"></label>
				</fieldset>
			</article>
			<article>
				<legend><h1>Addition</h1></legend>
				<fieldset>
					<button type="submit" onclick="additionner()">Additionner</button>
					<label><b>Polynome 1 + Polynome 2  = </b></label>
					<label id="add"></label>
				</fieldset>
			</article>
			<article>
				<legend><h1>Multiplication</h1></legend>
				<fieldset>
					<button type="submit" onclick="multiplier()">Multiplier</button>
					<label><b>Polynome 1 x Polynome 2  = </b></label>
					<label id="mult"></label>
				</fieldset>
			</article>
		</section>
	</body>
</html>

Revenons à travers ce code source au thème principal de cette série de billets, c'est à dire comment coder en JavaScript lorsque l'on vient d'un autre langage objet comme Java ou C++. Tout d'abord, on remarquera que j'ai utilisé aussi souvent que possible la syntaxe ES6 qui se rapproche d'une notation fonctionnelle. Pour des raisons de lisibilité du code j'ai mis dans les constructeurs de classe les methodes (en notation fléchée) qui s'écrivent sur une unique ligne, tandisque les autres méthodes sont sorties du constructeur.
Pour des raison d'homogeneité, toutes les fonctions JavaScript de ma page HTML sont elles aussi écrites à l'aide de la notation fléchée. Pour certains core-developpers je reconnais que les méthodes additionner et multiplier de la classe Polynome auraient pu s'écrire également sur une ligne avec un Object et un reduce, mais je pense que l'on aurait alors perdu en lisibilité pour un utilisateur venant de la programmation impérative.
Les opérations que j'ai définies étant des lois de composition interne sur le corps des polynomes, j'ai donc interdit dans l'interface graphique de rentrer des degrés de polynomes negatifs afin de conserver cette stabilité.

À titre de retour d'experience, j'avais développé une classe Polynome en Java pour les besoin d'un système d'aide à la décision et le volume de code nécessaire pour faire les mêmes opérations était environ 3 fois plus important au désaventage de Java. Je tiens à la disposition de ceux qui me le demanderont le code Java de ma classe Polynome.
Si vous voyez maladresses ou erreurs de conception dans mon code, n'hésitez pas à me le signaler pour que j'y remédie.