Live Coding : Le javascript orienté objet (ES6)

Par Nouvelle-Techno.fr le 31 août 2019 - Catégories : Javascript Nouvelle-Techno.fr Tutoriel Live-Coding

Lire l'article sur le site d'origine

Cet article est issu de la session de Live Coding d'aujourd'hui dont la vidéo est visible ci-dessous.

Les fichiers source de cette vidéo sont disponibles sur le Github de Nouvelle-Techno.fr.

Procédural ou orienté objet ?

Il est "facile" de développer en procédural, c'est à dire de déclarer des variables au fur et à mesure des besoins. Cependant, à l'exception des tableaux, chaque variable ne peut contenir qu'une seule valeur. On se retrouvera donc rapidement avec de nombreuses lignes de code, de plus en plus difficile à maintenir et à comprendre pour une personne qui n'est pas intégrée au projet.

L'utilisation du développement orienté objet permet d'apporter une structure au code mais aussi de simplifier sa maintenance et sa réutilisation.En effet, chaque objet sera indépendant et pourra donc facilement s'intégrer à un nouveau projet.

Mise en pratique

Dans cet article, nous allons prendre l'exemple de la gestion de compte bancaire. Chaque compte aura un solde, un titulaire et certains comptes pourront rapporter des intérêts.

Créer un objet

Prenons l'exemple, pour commencer, du titulaire du compte. Ce titulaire est une personne qui a donc un nom et un prénom.

En procédural, nous définirions donc deux variables, l'une pour le nom, l'autre pour le prénom.

En objet, nous allons définir ces informations dans une seule variable.

Un objet contient deux types d'éléments :

La première chose à faire est de créer un fichier javascript, dont le nom correspondra au nom de l'objet et commencera par une majuscule (convention).

La convention veut également qu'on ne mette qu'un objet par fichier.

Ainsi, pour un titulaire, nous allons créer un fichier "Titulaire.js"

Après l'avoir créé, il faut l'appeler depuis notre fichier html de cette façon

<script src="./js/Titulaire.js"></script>

Il est maintenant temps de créer notre objet. Nous allons donc le déclarer dans le fichier "Titulaire.js". La déclaration d'un objet se fait au moyen du mot clé "class" de cette façon

class Titulaire{

}

Afin de pouvoir fonctionner, notre objet doit avoir des propriétés, pour le titulaire il s'agit du nom et du prénom.

Nous allons donc devoir les déclarer.

Une méthode "magique" appelée "constructor" s'exécute dès l'utilisation de notre objet (appelé instanciation).

Cette méthode va permettre de créer nos propriétés.

A l'intérieur de l'objet, nous allons pouvoir faire référence à son instance en utilisant le mot clé "this".

Ainsi, notre constructeur ressemblera à ceci

// Nous déclarons les paramètres nom et prenom dans le constructeur
constructor(nom, prenom){
    // Nous stockons la variable nom dans la propriété nom de l'instance
    this.nom = nom;
    // Nous stockons la variable prenom dans la propriété prenom de l'instance
    this.prenom = prenom;
}

Notre objet ressemble donc maintenant à ceci

class Titulaire{
    constructor(nom, prenom){
        this.nom = nom;
        this.prenom = prenom;
    }
}

Utiliser un objet

Après avoir créé notre objet, nous allons l'utiliser.

Afin de pouvoir utiliser cet objet, nous allons créer un fichier javascript supplémentaire, que nous appellerons scripts.js (ou comme vous le souhaitez).

Il faudra penser à l'appeler depuis notre page html APRES le fichier de l'objet.

<script src="./js/Titulaire.js"></script>
<script src="./js/scripts.js"></script>

Dans ce fichier, nous pourrons donc instancier notre objet de cette façon

// Nous créons une instance de Titulaire stockée dans titulaire1
let titulaire1 = new Titulaire("Gambier", "Benoit");

// Nous créons une autre instance de Titulaire stockée dans titulaire2
let titulaire2 = new Titulaire("Talu", "Jean");

Les deux variables "titulaire1" et "titulaire2" contiennent toutes deux un titulaire, qui est une instance différente de l'objet "Titulaire".

Un petit console.log vous permettra de connaître leur contenu.

Vous pourrez également accéder à une propriété précise en utilisant son nom comme ceci

// Accéder au nom du titulaire1 et l'afficher dans la console
console.log(titulaire1.nom);

Les méthodes

Vous pouvez, bien sûr, accéder aux informations, mais il peut aussi être utile d'effectuer des actions. Si nous souhaitons accéder à l'identité complète du titulaire, nous pourrons créer une "méthode" (équivalent à une fonction). Nous appellerons cette méthode "identite" et elle retournera une phrase contenant l'identité du titulaire.

identite(){
    console.log(`Le titulaire s'appelle ${this.prenom} ${this.nom}`);
}

Vous remarquez ici que nous utilisons la syntaxe ES6 pour injecter les variables dans le texte.

Il faut, pour ce faire, utiliser l'accent grave ` qui s'écrit, sur PC, en utilisant ALTGR + 7.

Notre objet "Titulaire" finalisé ressemblera donc à ceci

/**
 * Titulaires de comptes
 */
class Titulaire{
    /**
     * Titulaires de comptes bancaires
     * @param {string} nom Nom du titulaire
     * @param {string} prenom Prénom du titulaire
     */
    constructor(nom, prenom){
        this.nom = nom;
        this.prenom = prenom;
    }

    /**
     * Afficher l'identité du titulaire
     */
    identite(){
        console.log(`Le titulaire s'appelle ${this.prenom} ${this.nom}`);
    }
}

Vous remarquerez les commentaires en JSDoc qui permet de documenter la classe et ses méthodes pour fournir une aide à la saisie.

Nous allons créer l'objet "Compte" sur le même modèle. A l'ouverture d'un compte, nous allons donner le titulaire et le montant de départ du compte. Si ce montant n'est pas donné, nous mettrons le solde à 0.

Nous commençons par créer le fichier "Compte.js" et l'appeler depuis notre fichier html

<script src="./js/Titulaire.js"></script>
<script src="./js/Compte.js"></script>
<script src="./js/scripts.js"></script>

 Nous insérons le fichier "Compte.js" entre "Titulaire" et "scripts" pour lui permettre de connaître "Titulaire".

Notre fichier "Compte.js" ressemble à ceci

/**
 * Compte bancaire
 */
class Compte{
    /**
     * Création du compte
     * @param {Titulaire} titulaire Titulaire du compte
     * @param {number} montant Montant de départ
     */
    constructor(titulaire, montant = 0){
        this.titulaire = titulaire;
        this.solde = montant;
    }
}

Mais un compte bancaire évolue dans le temps, on y verse et retire de l'argent. Il sera donc nécessaire de le "crediter" et le "debiter", nom des méthodes respectives que nous allons ajouter à notre objet.

/**
 * Compte bancaire
 */
class Compte{
    /**
     * Création du compte
     * @param {Titulaire} titulaire Titulaire du compte
     * @param {number} montant Montant de départ
     */
    constructor(titulaire, montant = 0){
        this.titulaire = titulaire;
        this.solde = montant;
    }

    /**
     * Créditer le compte
     * @param {number} montant 
     */
    crediter(montant){
        this.solde += montant;
    }

    /**
     * Débiter le compte
     * @param {number} montant 
     */
    debiter(montant){
        this.solde -= montant;
    }
}

Nous pourrons appeler ces méthodes comme ceci

let titulaire3 = new Titulaire("Penneflamme", "Katy");
let compte1 = new Compte(titulaire3, 25);

// Nous créditons le compte de 150 euros
compte1.crediter(150);

// Nous débitons le compte de 20 euros
compte1.debiter(20);

Enfin, si nous souhaitons afficher le solde, nous ajouterons la méthode "afficherSolde"

/**
 * Compte bancaire
 */
class Compte{
    /**
     * Création du compte
     * @param {Titulaire} titulaire Titulaire du compte
     * @param {number} montant Montant de départ
     */
    constructor(titulaire, montant = 0){
        this.titulaire = titulaire;
        this.solde = montant;
    }

    /**
     * Créditer le compte
     * @param {number} montant 
     */
    crediter(montant){
        this.solde += montant;
    }

    /**
     * Débiter le compte
     * @param {number} montant 
     */
    debiter(montant){
        this.solde -= montant;
    }

    /**
     * Afficher le solde du compte
     */
    afficherSolde(){
        console.log(`Le compte présente un solde de ${this.solde} euros.`);
    }
}

Cette méthode s'appellera comme ceci

compte1.afficherSolde();

L'héritage

Parfois, il peut être nécessaire de créer des objets qui auront les mêmes propriétés qu'un objet existant mais qui ont des propriétés complémentaires.

Par exemple, un compte d'épargne est un compte bancaire, mais il bénéficie d'un taux d'intérêts et d'un rythme de versement de ces intérêts.

Nous allons donc créer un objet "CompteEpargne" qui va "hériter" de toutes les propriétés de "Compte" et ajouter la gestion des intérêts.

Commençons par créer le fichier "CompteEpargne.js" et l'ajouter à notre html

<script src="./js/Titulaire.js"></script>
<script src="./js/Compte.js"></script>
<script src="./js/CompteEpargne.js"></script>
<script src="./js/scripts.js"></script>

Cet objet va se déclarer de la même façon que tout autre objet, mais nous allons préciser qu'il "étend" (extends) l'objet "Compte", de cette façon

/**
 * Compte épargne
 */
class CompteEpargne extends Compte{

}

Son constructeur sera également similaire, à la différence près que nous devrons transmettre les informations nécessaires à l'objet "Compte".

Dans une classe "enfant", la classe "parent" est accessible par la méthode "super".

Pour créer un compte épargne, nous aurons besoin d'un titulaire, d'un montant de départ, d'un taux d'intérêts et d'un rythme.

Nous l'utiliserons donc dans notre constructeur comme ceci

/**
 * Création du compte
 * @param {Titulaire} titulaire Titulaire du compte
 * @param {number} montant Montant de départ
 * @param {number} taux Taux d'intérêts
 * @param {number} rythme Rythme de versement des intérêts (en millisecondes)
 */
constructor(titulaire, montant = 50, taux = 0.005, rythme = 1000){
    // Nous transférons les informations utiles à l'objet Compte
    super(titulaire, montant);

    // Nous créons les propriétés spécifiques à un compte épargne
    this.taux = taux;
    this.rythme = rythme;
}

Pour créer un compte épargne qui donne 0.5% d'intérêts toutes les 5 secondes (irréaliste mais pour la démo c'est mieux que d'attendre 1 an), nous l'instancions de cette façon

let compteEpargne = new CompteEpargne(titulaire2, 15, 0.005, 5000);

Enfin, nous allons mettre en place le système de versement des intérêts au rythme demandé. Avec l'utilisation de "setInterval" nous allons executer cette fonction au rythme demandé de cette façon.

// Intérêts de taux toutes les "rythme" millisecondes (0.5% toutes les 5 secondes)
setInterval(() => {
    this.solde *= 1+this.taux;
}, this.rythme);

Vous noterez l'utilisation d'une fonction flêchée. l'équivalent en fonction "standard" est

// Intérêts de taux toutes les "rythme" millisecondes (0.5% toutes les 5 secondes)
let that = this;
setInterval(function(){
    that.solde *= 1+that.taux;
}, this.rythme);

Notre objet "CompteEpargne" finalisé est donc

/**
 * Compte épargne
 */
class CompteEpargne extends Compte{
    /**
     * Création du compte
     * @param {Titulaire} titulaire Titulaire du compte
     * @param {number} montant Montant de départ
     * @param {number} taux Taux d'intérêts
     * @param {number} rythme Rythme de versement des intérêts (en millisecondes)
     */
    constructor(titulaire, montant = 50, taux = 0.005, rythme = 1000){
        // Nous transférons les informations utiles à l'objet Compte
        super(titulaire, montant);

        // Nous créons les propriétés spécifiques à un compte épargne
        this.taux = taux;
        this.rythme = rythme;

        // Intérêts de taux toutes les "rythme" millisecondes (0.5% toutes les 5 secondes)
        setInterval(() => {
            this.solde *= 1+this.taux;
        }, this.rythme);
    }
}

Et voilà qui termine ce Live Coding, n'hésitez pas à commenter et à vous abonner à la chaîne Youtube de Nouvelle-Techno.fr

#Tutoriel #Javascript #Youtube #Live-Coding #POO #Orienté Objet #ES6