1. Acceuil
  2. Cours
  3. Cours JavaScript
  4. Le state pattern

Le state Pattern

Fonctionnement

Le state pattern est un design pattern. Il consiste à créer un objet (context) qui à la possibilité de changer d'état de façon concécutive comme le feu tricolor

Le feu est ici le contexte. Celui-ci a 3 états :

  1. Feu vert
  2. feu orange
  3. feu rouge

Donc si le feu est vert il ne peut passer directement au feu rouge et s'il est orange et ne peut pas directement redevenir vert.

La page HTML

Pour commencer nous allons créer une page HTML avec un composant qui nous permettra de retranscrire le changement d'état.

  • <htmll>
    • <head>
      • <title>State pattern</title>
    • </head>
    • <body>
      • <span id="feu1">Etat du feu</span>
    • </body>
    </html>

L'objet contexte

A présent nous allons créer notre objet qui fera office de contexte traffic.

  • var traffic=function(){
    • count = 0;//Nombre de changement d'état
    • this.next=function(state){
      • //fonction qui permet de changer d'état
    • }
    • this.start=function(){
      • //fonction qui permet de déclencher les changements d'états
    • }
  • }

L'objet d'état

On a notre objet context maintenant il nous faut des objets qui traduisent les états possible.

Pour le moment on va se contenter d'afficher l'information dans la console.

  • var Vert=function(trfc){
    • this.feu = trfc;//Objet context
    • this.go=function(){
      • console.log(feu vert les voitures peuvent passer);
      • trfc.next(new Orange(trfc));//permet de passer au feu orange
    • }
  • }
  • var Orange=function(trfc){
    • this.feu = trfc;//Objet context
    • this.go=function(){
      • console.log(feu orange les voitures ralentissent);
      • trfc.next(new Rouge(trfc));//permet de passer au feu rouge
    • }
  • var Rouge=function(trfc){
    • this.feu = trfc;//Objet context
    • this.go=function(){
      • console.log(feu rouge les voitures s'arrêtent);
      • trfc.next(new Vert(trfc));//permet de repasser au feu vert
    • }
  • }

Réadapter le context

Maintenant on doit mettre à jour l'objet traffic

  • [...]
  • var CState=new Vert(this);//Correspond à l'état de l'objet
  • this.next=function(state){
    • if(count++>=4) return;//si le nombre de passages est inférieur à 5
    • CState=state;
    • CState.go();
  • }
  • this.start=function(){
    • CState.go();
  • }

Avant de finir on va faire un test pour savoir si cela marche

  • [...]
    • <script>
      • var feu=new traffic();
      • feu.start();
    • </script>
  • </body>

Finaliser notre objet

A présent la console affiche les changement de l'état s'il est déclaré, il ne reste plus qu'à l'adapter avec notre page

Pour ce faire on va faire passer le composant d'affichage en paramètre

  • var traffic=function(cmpt){
    • count = 0;//Nombre de changement d'état
    • this.compoment=cmpt;
    • this.next=function(state){
      • [...]
    • }
    • this.start=function(){
      • [...]
    • }
  • }

Il ne reste plus qu'à mettre à jour les 3 états par exemple le feu vert

  • var Vert=function(trfc){
    • this.feu = trfc;//Objet context
    • this.go=function(){
      • trfc.compoment.innerHTML+=("<br>feu vert les voitures peuvent passer");
      • trfc.next(new Orange(trfc));//permet de passer au feu orange
    • }
  • }
Partager