Module et développement objet

Modules

1. Les causes

Jusqu’ici, nous pouvons structurer notre code JavaScript en fichiers indépendants. Supposons que nous ayons besoin régulièrement dans nos projets d’effectuer un type de calcul. Il est donc préférable de concentrer ces calculs dans un fichier JavaScript indépendant puis de le charger au besoin dans notre page HTML.

Par exemple, nous avons ici un fichier JavaScript calcul.js contenant un calcul élémentaire d’addition.

function calcul(a,b) { 
    return a+b; 
}

Si nous voulons maintenant utiliser notre calcul avec ce code, nous pouvons simplement charger notre calcul à partir de notre site web pour afficher un résultat dans la console du navigateur.

<html> 
    <head> 
        <script src="calcul.js"></script> 
        <script> 
            console.log(calcul( 10,20 ) ); 
        </script> 
    </head> 
    <body></body> 
</html>

Ou bien nous pouvons avoir un ensemble de fichiers JavaScript qui vont travailler avec calcul en évitant d’ajouter du code directement dans la page HTML. Nous aurons alors un nouveau fichier app.js contenant par exemple :

function monApp() { 
   console.log( calcul( 10, 20 ) ); 
} 
document.addEventListener("DOMContentLoaded", () => { 
   monApp(); 
});

Nous avons une fonction monApp qui effectue un traitement mais au chargement de notre page HTML (qui affiche « 30 » dans la console). En effet, nous ne voulons généralement pas que le code JavaScript s’exécute avant que notre page HTML soit complètement chargée par le navigateur. Pour cela, nous allons ajouter une instruction document.addEventListener qui nous sert à exécuter une fonction (ici monApp) lorsque qu’un événement DOMContentLoaded (le document est bien chargé et converti en document contenant des nœuds DOM). Ainsi, nous n’avons plus besoin d’intégrer de code...

Développement Objet

1. Concepts Objets

a. L’objet

Un objet est un concept abstrait pour désigner une valeur existant, caractériser des propriétés (son état) et des méthodes qui s’y appliquent (ses services). C’est une forme de structure de données qui garantit une homogénéité du code au sein de briques élémentaires et réutilisables. L’idée étant de ne plus avoir d’un côté les données et de l’autre les méthodes, mais de ne créer que des blocs cohérents combinant des données et des méthodes.

Un objet se base sur le même principe qu’un objet dans tout environnement, c’est-à-dire le fait qu’il ait un état et que des actions soient possibles sur ce dernier. Prenons l’exemple d’un Rubik’s cube, il possède un état constitué du positionnement de chaque case de couleur sur chaque face, mais il possède également des actions pour faire diverses rotations.

Figure 1 - Rubik’s Cube

Si nous avions à définir un Rubik’s cube en langage informatique, nous aurions quelque chose dans ce style :

Objet : Rubik’s cube

État : couleurs pour les 6 faces

Action : faire la rotation d’une ligne de couleurs

Nous pourrions avoir plein de Rubik’s cube, le principe serait le même, l’état dépendrait pour chaque objet des actions déjà effectuées (état initial plus la somme des actions faites).

b. La classe

Tous les objets qui appartiennent à une même famille sont issus d’une classe. Le concept de classe est donc plus générique. On parle de classe pour désigner une catégorie d’objets. La classe des Rubik’s cube, la classe des employés, la classe des voitures, la classe des chaises… La notion de classe est abstraite, c’est à vous de décider ce qui doit être une classe ou non selon vos besoins.

La classe sert à fabriquer un objet et l’objet est donc toujours issu d’une classe. Elle contient tout ce que peut faire l’objet et donne également à chaque création d’un objet aussi son état initial.

Classe de Rubik’s cube

Création...