[GO] Verstehen Sie das Statusmuster, indem Sie JavaScript und Java-Code vergleichen

Einführung

Details und andere Muster werden in ** Grundlegendes zu Entwurfsmustern durch Vergleichen von Implementierungen in JavaScript und Java ** geschrieben. Ich habe ein Beispiel für JavaScript geschrieben, indem ich mir Java angesehen habe. Unterschiede in Funktionen wie Klassentyp / Prototypentyp, Typstärke und Zugriffsmodifikatoren werden nicht ausgenutzt. Bitte beachten Sie.

Zustandsmuster

"Zustand" als Klasse ausdrücken Zustand bedeutet "Zustand (Zustand der Dinge)"

Implementierungsbeispiel in Java

Stellen Sie sich ein sicheres Sicherheitssystem vor, bei dem sich der Sicherheitsstatus mit der Zeit ändert

Klassen Diagramm

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("Sichere Verwendung");
    private Button buttonAlarm = new Button("Notglocke");
    private Button buttonPhone = new Button("Ambulanter Anruf");
    private Button buttonExit = new Button("Ende");

    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 = "Die aktuelle Zeit ist";

        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 + "Von" + state + "Der Zustand hat sich geändert.");
        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("Sichere Verwendung(Tagsüber)");
    }
    public void doAlarm(Context context) {
        context.callSecurityCenter("Notglocke(Tagsüber)");
    }
    public void doPhone(Context context) {
        context.callSecurityCenter("Normaler Anruf(Tagsüber)");
    }
    public String toString() {
        return "[Tagsüber]";
    }
}

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("Notfall: Verwenden Sie den Safe nachts!");
    }
    public void doAlarm(Context context) {
        context.callSecurityCenter("Notglocke(Nacht)");
    }
    public void doPhone(Context context) {
        context.recordLog("Aufzeichnung von Nachtanrufen");
    }
    public String toString() {
        return "[Nacht]";
    }
}

Implementierungsbeispiel in JavaScript

Code

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Zustandsmuster</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>Sichere Verwendung</button>
		<button>Notglocke</button>
		<button>Normales Telefon</button>
		<button>Ende</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

/****************************************************************
allgemeiner Teil
****************************************************************/
/*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 "Sichere Verwendung":
                b.addEventListener("click", function() {
                    MAIN.context.state.doUse(MAIN.context);
                });
                break;
            case "Notglocke":
                b.addEventListener("click", function() {
                    MAIN.context.state.doAlarm(MAIN.context);
                });
                break;
            case "Normales Telefon":
                b.addEventListener("click", function() {
                    MAIN.context.state.doPhone(MAIN.context);
                });
                break;
            case "Ende":
                b.addEventListener("click", function() {
                    window.close();
                });
                break;
        }
    });
};

Context.prototype = {
    constructor: Context,

    setClock: function(hour) {
        var clockString = "Die aktuelle Zeit ist";

        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() + "Von k" + state.getName() + "Der Zustand hat sich geändert.");
        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 = "[Tagsüber]"
        return {
            doClock: function(context, hour) {
                if (hour < 9 || 17 <= hour) {
                    context.changeState(NIGHT_STATE.nightState.getInstance());
                }
            },
            doUse: function(context) {
                context.recordLog("Sichere Verwendung(Tagsüber)");
            },
            doAlarm: function(context) {
                context.callSecurityCenter("Notglocke(Tagsüber)");
            },
            doPhone(context) {
                context.callSecurityCenter("Normaler Anruf(Tagsüber)");
            },
            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 = "[Nacht]";
        return {
            doClock: function(context, hour) {
                if (9 <= hour && hour < 17) {
                    context.changeState(DAY_STATE.dayState.getInstance());
                }
            },
            doUse: function(context) {
                context.recordLog("Notfall: Verwenden Sie den Safe nachts!")
            },
            doAlarm: function(context) {
                context.callSecurityCenter("Notglocke(Nacht)");
            },
            doPhone: function(context) {
                context.callSecurityCenter("Aufzeichnung von Nachtanrufen");
            },
            getName: function() {
                return name;
            }
        };
    };

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

            return singleton;
        }
    };
})();

Zeichen im Statusmuster

** Staatliche Rolle **

Repräsentiert den Zustand Eine Sammlung von Methoden, die sich zustandsabhängig verhalten Beispielprogramm ⇒ Status (Schnittstelle)

** Die Rolle von Concreate State **

Darstellung bestimmter Einzelzustände Beispielprogramm ⇒ DayState (Klasse), NightState (Klasse)

** Die Rolle des Kontexts (Situation, Kontext, Kontext) **

Repräsentiert den aktuellen Status Beispielprogramm ⇒ Kontext (Schnittstelle)

Zustandsmuster-Klassendiagramm

Notwendigkeit für Staatsmuster

Sie können die Bewegung auch ändern, indem Sie die Statusänderung mit der if-Anweisung oder der switch-Anweisung anzeigen

Sample.java

public void method1(Status) {
  if (Zustand A.) {
    System.out.println("Seit dem Zustand A Hallo");
  }
  if (Zustand B.) {
    System.out.println("Guten Abend, weil es in Zustand B ist");
  }
}

public void method2(Status) {
  if (Zustand A.) {
    System.out.println("Hallo, weil es in Zustand A ist");
  }
  if (Zustand B.) {
    System.out.println("Guten Abend, weil es in Zustand B ist");
  }
}

Der Programmierer muss sich jedoch jedes Mal des Zustandsunterschieds bewusst sein. Viele Orte müssen bearbeitet werden, wenn Zustände hinzugefügt werden Wenn der Zustand als Klasse ausgedrückt wird, kann "Zustandsänderung" durch Umschalten der Klasse ausgedrückt werden.

Einfach zu verstehen, da Sie die ConcreateState-Rolle nur hinzufügen müssen, wenn Sie einen neuen Status hinzufügen

Bei Verwendung des Statusmusters

Verwandte Muster

• Singleton-Muster
• Fliegengewichtsmuster

Referenz

[Einführung in Entwurfsmuster, die in der erweiterten und überarbeiteten Java-Sprache gelernt wurden](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)