I want to learn the state patterns of design patterns

This is the 12th day of my participation in the August Text Challenge.More challenges in August

State mode: Object behavior changes based on state changes.

What is “state mode”?

State mode: Object behavior changes based on state changes.

It is the change in internal state that leads to the change in external behavior. For example, the same method may behave differently when called at different times.

The advantages and disadvantages

Advantages:

Encapsulates theTransformation rulesFor a large number of branching statements, consider using state classes for further encapsulation.
eachStates are deterministic and object behavior is controllable.
Put all the behavior associated with a state into a single class, and you can easily add new states by simply changing the object’s state to change its behavior.
You can makeMultiple environment objects share a state objectAnd thusReduce the number of objects in the system.

Disadvantages:

The key to the realization of state mode is to encapsulate the state of things into a separate class, and the methods of this class are “the behavior corresponding to this state”. Therefore, the program overhead increases.
Will increase the number of system classes and objects, and the structure and implementation are more complex. State mode pair”The "open closed principle" is not very well supported, for the state mode that can be switched

Examples of application

When playing basketball, players can be normal, abnormal and abnormal.
In Zenghouyi chime bells,’ bell is abstract interface ‘,’ bell A’ is concrete state, and ‘Zenghouyi chime bells’ is concrete environment.

Code implementation

ES6 implementation

In JavaScript, you can simply replace the status class with a JSON object.

The following code shows three FSM states: Download, Pause, and deleted. The code that controls state transitions is also there.

The DownLoad class is a Context object whose behavior changes as the state changes.

const FSM = (() = > {
    let currenState = "download";
    return {
        download: {
            click: () = > {
                console.log("Pause download");
                currenState = "pause";
            },
            del: () = > {
                console.log("Pause, then delete."); }},pause: {
            click: () = > {
                console.log("Continue downloading");
                currenState = "download";
            },
            del: () = > {
                console.log("Delete task");
                currenState = "deleted"; }},deleted: {
            click: () = > {
                console.log("Task deleted. Please start again.");
            },
            del: () = > {
                console.log("Task deleted"); }},getState: () = >currenState }; }) ();class Download {
    constructor(fsm) {
        this.fsm = fsm;
    }
    handleClick() {
        const { fsm } = this;
        fsm[fsm.getState()].click();
    }
    hanldeDel() {
        const { fsm } = this; fsm[fsm.getState()].del(); }}// Start downloading
let download = new Download(FSM);
download.handleClick(); // Pause the download
download.handleClick(); // Continue downloading
download.hanldeDel(); // Delete cannot be performed while downloading
download.handleClick(); // Pause the download
download.hanldeDel(); // Delete the task
Copy the code

I want to learn the state patterns of design patterns