introduction

Les détails et autres modèles seront écrits dans ** Comprendre les modèles de conception en comparant les implémentations en JavaScript et Java **. J'ai écrit un exemple de JavaScript en regardant Java. Nous ne tirons pas parti des différences de fonctionnalités telles que le type de classe / type de prototype, la force typée et les modificateurs d'accès. Notez s'il vous plaît.

Modèle d'état

Exprimer "l'état" en tant que classe état signifie "état (état des choses)"

Exemple d'implémentation en Java

Envisagez un système de sécurité sûr où l'état de la sécurité change avec le temps

Diagramme de classe

code

`Main.java`


public class Main {
    public static void main(String[] args) {
        SafeFrame frame = new SafeFrame("State Sample");
        while (true) {
            for (int hour = 0; hour < 24; hour++) {
                frame.setClock(hour);
                try {
                    Thread.sleep(1000);
                } catch (InterruptedException e) {

                }
            }
        }
    }
}

`Context.java`


public interface Context {
    public abstract void setClock(int hour);
    public abstract void changeState(State state);
    public abstract void callSecurityCenter(String msg);
    public abstract void recordLog(String msg);
}

`SafeFrame.java`


import java.awt.Frame;
import java.awt.Label;
import java.awt.Color;
import java.awt.Button;
import java.awt.TextField;
import java.awt.TextArea;
import java.awt.Panel;
import java.awt.BorderLayout;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;

public class SafeFrame extends Frame implements ActionListener, Context {
    private TextField textClock = new TextField(60);
    private TextArea textScreen = new TextArea(10, 60);
    private Button buttonUse = new Button("Utilisation sûre");
    private Button buttonAlarm = new Button("cloche d'urgence");
    private Button buttonPhone = new Button("Appel ambulatoire");
    private Button buttonExit = new Button("Fin");

    private State state = DayState.getInstance();

    public SafeFrame(String title) {
        super(title);
        setBackground(Color.lightGray);
        setLayout(new BorderLayout());

        add(textClock, BorderLayout.NORTH);
        textClock.setEditable(false);

        add(textScreen, BorderLayout.CENTER);
        textScreen.setEditable(false);

        Panel panel = new Panel();
        panel.add(buttonUse);
        panel.add(buttonAlarm);
        panel.add(buttonPhone);
        panel.add(buttonExit);

        add(panel, BorderLayout.SOUTH);

        pack();
        setVisible(true);

        buttonUse.addActionListener(this);
        buttonAlarm.addActionListener(this);
        buttonPhone.addActionListener(this);
        buttonExit.addActionListener(this);
    } 

    public void actionPerformed(ActionEvent e) {
        System.out.println(e.toString());
        if (e.getSource() == buttonUse) {
            state.doUse(this);
        } else if (e.getSource() == buttonAlarm) {
            state.doAlarm(this);
        } else if (e.getSource() == buttonPhone) {
            state.doPhone(this);
        } else if (e.getSource() == buttonExit) {
            System.exit(0);
        } else {
            System.out.println("?");
        }
    }

    public void setClock(int hour) {
        String clockstring = "L'heure actuelle est";

        if (hour < 10) {
            clockstring += "0" + hour + ":00";
        } else {
            clockstring += hour + ":00";
        }
        System.out.println(clockstring);
        textClock.setText(clockstring);
        state.doClock(this, hour);
    }

    public void changeState(State state) {
        System.out.println(this.state + "De" + state + "L'état a changé.");
        this.state = state;
    }

    public void callSecurityCenter(String msg) {
        textScreen.append("call! " + msg + "\n");
    }

    public void recordLog(String msg) {
        textScreen.append("record ... " + msg + "\n");
    }
}

`State.java`


public interface State {
    public abstract void doClock(Context context, int hour);
    public abstract void doUse(Context context);
    public abstract void doAlarm(Context context);
    public abstract void doPhone(Context context);
}

`DayState.java`


public class DayState implements State {
    private static DayState singleton = new DayState();
    
    private DayState() {

    }
    public static State getInstance() {
        return singleton;
    }
    public void doClock(Context context, int hour) {
        if (hour < 9 || 17 <= hour) {
            context.changeState(NightState.getInstance());
        }
    }
    public void doUse(Context context) {
        context.recordLog("Utilisation sûre(Jour)");
    }
    public void doAlarm(Context context) {
        context.callSecurityCenter("cloche d'urgence(Jour)");
    }
    public void doPhone(Context context) {
        context.callSecurityCenter("Appel normal(Jour)");
    }
    public String toString() {
        return "[Jour]";
    }
}

`NightState.java`


public class NightState implements State {
    private static NightState singleton = new NightState();

    private NightState() {

    }
    public static State getInstance() {
        return singleton;
    }
    public void doClock(Context context, int hour) {
        if (9 <= hour && hour < 17) {
            context.changeState(DayState.getInstance());
        }
    }
    public void doUse(Context context) {
        context.callSecurityCenter("Urgence: utilisez le coffre-fort la nuit!");
    }
    public void doAlarm(Context context) {
        context.callSecurityCenter("cloche d'urgence(Nuit)");
    }
    public void doPhone(Context context) {
        context.recordLog("Enregistrement des appels de nuit");
    }
    public String toString() {
        return "[Nuit]";
    }
}

Exemple d'implémentation en JavaScript

code

`index.html`


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Modèle d'état</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main container flex">
	<input type="text" name="output" disabled="disabled">
	<textarea disabled="disabled"></textarea>
	<div class="button_area flex">
		<button>Utilisation sûre</button>
		<button>cloche d'urgence</button>
		<button>Téléphone régulier</button>
		<button>Fin</button>
	</div>
</div>
<script src="Main.js"></script>
<script src="Context.js"></script>
<script src="DayState.js"></script>
<script src="NightState.js"></script>
</body>
</html>

`style.css`


/****************************************************************
partie commune
****************************************************************/
/*reset*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, 
fieldset, input, textarea, p, blockquote, th, td{
    margin: 0;
    padding: 0;
}
html{
}
h1, h2, h3, h4, h5, h6{
    font-size: 100%;
    font-weight: normal;
}
ol, ul{
    list-style:none;
}
fieldset, img{
    border:0;
}
table{
    border-collapse: collapse;
    border-spacing:0;
}
caption, th{
    text-align: left;
}
address, caption, cite, code, dfn, em, strong, th, var{
    font-style: normal;
    font-weight: normal;
}
img {
   vertical-align: bottom;
}
html {
    font-size: 10px;
    font-size: 62.5%;
}
a {
    color: #000;
    text-decoration: none;
}
/*setting*/
body {
    font-size: 10px;
    font-size: 1rem;
    background-color: #dbdbdb;
}
.container {
    width: 490px;
    margin: 0 auto;
}
.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/*main*/
.main {
	margin-top: 20px;
	flex-direction: column;
}
.main input {
	width: 100%;
	height: 25px;
	border: 1px solid #000;
	box-sizing: border-box;
}
.main textarea {
	width: 100%;
	height: 200px;
	box-sizing: border-box;
	border: 1px solid #000;
	border-top: 0;
    overflow: scroll;
}
.main textarea:focus {
	outline: 0;
	
}
.main .button_area {
	width: 100%;
	border:1px solid #000;
	border-top: 0;
	justify-content: center;
	box-sizing: border-box;
}
.button_area button {
	margin: 5px;
}

`Main.js`


MAIN = {};
MAIN.context;
MAIN.timer;
MAIN.hour;

MAIN.init = function() {
    MAIN.context = new Context();
    MAIN.hour = 0;
    MAIN.timer = setInterval(MAIN.mainLoop, 500);
};
MAIN.mainLoop = function() {
    MAIN.context.setClock(MAIN.hour);
    MAIN.hour += 1;
    if (MAIN.hour === 25) {
        MAIN.hour = 0;
    }
};

window.addEventListener("load", MAIN.init);

`Context.js`


var Context = function() {
    this.state = DAY_STATE.dayState.getInstance();
    this.textFieldElm = document.querySelector(".main input[type='text']");
    this.textAreaElm = document.querySelector(".main textarea");

    document.querySelectorAll(".main .button_area button").forEach(function(b) {
        switch (b.innerText) {
            case "Utilisation sûre":
                b.addEventListener("click", function() {
                    MAIN.context.state.doUse(MAIN.context);
                });
                break;
            case "cloche d'urgence":
                b.addEventListener("click", function() {
                    MAIN.context.state.doAlarm(MAIN.context);
                });
                break;
            case "Téléphone régulier":
                b.addEventListener("click", function() {
                    MAIN.context.state.doPhone(MAIN.context);
                });
                break;
            case "Fin":
                b.addEventListener("click", function() {
                    window.close();
                });
                break;
        }
    });
};

Context.prototype = {
    constructor: Context,

    setClock: function(hour) {
        var clockString = "L'heure actuelle est";

        if (hour < 10) {
            clockString += "0" + hour + ":00";
        } else {
            clockString += hour + ":00";
        }
        console.log(clockString);
        this.textFieldElm.value = clockString;
        this.state.doClock(this, hour);

    },
    changeState: function(state) {
        console.log(this.state.getName() + "À partir de k" + state.getName() + "L'état a changé.");
        this.state = state;
    },
    callSecurityCenter: function(msg) {
        this.textAreaElm.value += msg + "\n";
        this.textAreaElm.scrollTop = this.textAreaElm.scrollHeight;
    },
    recordLog: function(msg) {
        this.textAreaElm.value += msg + "\n";
        this.textAreaElm.scrollTop = this.textAreaElm.scrollHeight;
    }
};

`DayState.js`


DAY_STATE = {};
DAY_STATE.dayState = (function() {
    var singleton;
    var name;

    var init = function() {
        name = "[Jour]"
        return {
            doClock: function(context, hour) {
                if (hour < 9 || 17 <= hour) {
                    context.changeState(NIGHT_STATE.nightState.getInstance());
                }
            },
            doUse: function(context) {
                context.recordLog("Utilisation sûre(Jour)");
            },
            doAlarm: function(context) {
                context.callSecurityCenter("cloche d'urgence(Jour)");
            },
            doPhone(context) {
                context.callSecurityCenter("Appel normal(Jour)");
            },
            getName: function() {
                return name;
            }
        };
    };

    return {
        getInstance: function() {
            if (!singleton) {
                singleton = init();
            }

            return singleton;
        }
    }
})();

`NightState.js`


NIGHT_STATE = {};
NIGHT_STATE.nightState = (function() {
    var singleton;
    var name;

    var init = function() {
        name = "[Nuit]";
        return {
            doClock: function(context, hour) {
                if (9 <= hour && hour < 17) {
                    context.changeState(DAY_STATE.dayState.getInstance());
                }
            },
            doUse: function(context) {
                context.recordLog("Urgence: utilisez le coffre-fort la nuit!")
            },
            doAlarm: function(context) {
                context.callSecurityCenter("cloche d'urgence(Nuit)");
            },
            doPhone: function(context) {
                context.callSecurityCenter("Enregistrement des appels de nuit");
            },
            getName: function() {
                return name;
            }
        };
    };

    return {
        getInstance: function() {
            if (!singleton) {
                singleton = init();
            }

            return singleton;
        }
    };
})();

Caractères dans le modèle État

Rôle de l'État

Représente l'état Une collection de méthodes qui se comportent de manière dépendante de l'état Exemple de programme ⇒ État (interface)

Le rôle de Concreate State

Représenter des états individuels spécifiques Exemple de programme ⇒ DayState (classe), NightState (classe)

Le rôle du contexte (situation, contexte, contexte)

Représente l'état actuel Exemple de programme ⇒ Contexte (interface)

Diagramme de classe de modèle d'état

Besoin d'un modèle d'état

Vous pouvez également changer le mouvement en voyant le changement d'état avec l'instruction if ou l'instruction switch

`Sample.java`


public void method1(Statut) {
  if (État A) {
    System.out.println("Depuis l'état un bonjour");
  }
  if (État B) {
    System.out.println("Bonsoir car il est en état B");
  }
}

public void method2(Statut) {
  if (État A) {
    System.out.println("Bonjour car il est dans l'état A");
  }
  if (État B) {
    System.out.println("Bonsoir car il est en état B");
  }
}

Mais le programmeur doit être conscient de la différence d'état à chaque fois. De nombreux endroits doivent être modifiés lors de l'ajout d'états Si l'état est exprimé sous forme de classe, le "changement d'état" peut être exprimé en changeant de classe.

Facile à comprendre car il suffit d'ajouter le rôle ConcreateState lors de l'ajout d'un nouvel état

Lors de l'utilisation du modèle State

Modèles associés

Motif Singleton
Motif poids mouche

référence

[Introduction aux modèles de conception appris dans le langage Java augmenté et révisé](https://www.amazon.co.jp/%E5%A2%97%E8%A3%9C%E6%94%B9%E8%A8%82% E7% 89% 88Java% E8% A8% 80% E8% AA% 9E% E3% 81% A7% E5% AD% A6% E3% 81% B6% E3% 83% 87% E3% 82% B6% E3% 82% A4% E3% 83% B3% E3% 83% 91% E3% 82% BF% E3% 83% BC% E3% 83% B3% E5% 85% A5% E9% 96% 80-% E7% B5 % 90% E5% 9F% 8E-% E6% B5% A9 / dp / 4797327030)

Comprendre le modèle d'état en comparant le code JavaScript et Java

introduction

Modèle d'état

Exemple d'implémentation en Java

Diagramme de classe

code

Main.java

Context.java

SafeFrame.java

State.java

DayState.java

NightState.java

Exemple d'implémentation en JavaScript

code

index.html

style.css

Main.js

Context.js

DayState.js

NightState.js

Caractères dans le modèle État

** Rôle de l'État **

** Le rôle de Concreate State **

** Le rôle du contexte (situation, contexte, contexte) **

Diagramme de classe de modèle d'état

Besoin d'un modèle d'état

Sample.java

Lors de l'utilisation du modèle State

Modèles associés

référence

`Main.java`

`Context.java`

`SafeFrame.java`

`State.java`

`DayState.java`

`NightState.java`

`index.html`

`style.css`

`Main.js`

`Context.js`

`DayState.js`

`NightState.js`

Rôle de l'État

Le rôle de Concreate State

Le rôle du contexte (situation, contexte, contexte)

`Sample.java`