Let’s run through a practical example in JavaScript to see the beauty of applying this pattern.When creating web applications, there are times you want to delay the loading of scripts until you need them, especially those that are of large file size but whose code may not get used at all. Let’s modify the code to try it.Firstly, we’ll have to replace the boolean variable with a number, which stores the value of the current script loading state, and we define constants for all the possible states. Programming with human in mind 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js''https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js''https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' It is so simple that it has only one method called handleAction():Before we define the concrete states, let’s create a utility function which simplifies the construction of subclasses:Let’s start with the not start loading state.

Example. Cool!We do not always require using design pattern to solve a problem in programming, in fact it is dangerous to be too obsessed with design patterns when one is not really required (or preferred) to solve a particular problem. First we delete all the state constants and initialize the initial state as the “not start loading” state:And we no longer need the jQueryLoadedPendingActions array, it has been replaced by the pendingActions field inside the LoadingJQueryState.
This is best explained with an example. It receives the initial triggering action in constructor and make it the sole entry of the pending actions array. the rules of acceptable state transitions). It needs to perform different action depending on the current script loading state:And we need to update loadJQuery() to update the current state too:Let’s run our application again. The lesson learned is that a boolean variable is not enough when there is more than just true or false values, we’ve got to handle these states:It seems not too difficult, just change the boolean variable to a number variable, and define the states as constants would do the trick.
The state is set to “not start loading” initially.And we provide a function to update the state, so we can keep track of the changing of state event and log it to the console:We also need an array to store the pending actions that are triggered while the script is loading, so we can serve the callers after we’ve finished loading the script:The sayHelloFromJQuery() function thus becomes a little complicated. For a tutorial about Regular Expressions, read our JavaScript RegExp Tutorial . The Nullify Pattern is used to remove all references to local variables to make easier the job of the Garbage Collector. Pattern attribute support from caniuse.com.

Two other examples where the State pattern is useful include: vending machines that dispense products when a correct combination of coins is entered, and JavaScript Minitab Python SQL SQLite Tableau Windows Server WordPress pandas See All Library. What’s going on?It is because the loading of script is asynchronous, during loading user can still click the button, since we haven’t mark the jQueryLoaded flag to true yet, so it attempts to load the script again.

It’s handleAction() method simply adds the action to the pending actions array.The last state, which is also the easiest one, simply call each action as is in its handleAction() method:There are a few places to change in code in order to use the new state structure. Let’s run and see:From the output our application works just fine, but if you are a fast clicker, or you are in a very slow network, you would notice your application would load the jQuery script multiple times (notice the duplicated script element inside the head section)! If that happens the order needs to be handled appropriately. It is so elegant that this array now only visible in where it should be, instead of visible everywhere when using the old approach.And one more, we need to update the loadJQuery() function to change the state to “finish loaded” state when jQuery script has finished loading:Let’s test run our new application with the state pattern in action.Nothing really changes from the outcome, but now you’ve incorporated the state pattern to your JavaScript solution, which is much cleaner, more elegant, and it’s been made very flexible for adding/removing states if requirements changed (and as an experienced programmer you know, it will). For demonstration purposes, a built-in counter limits the number of state changes, or else the program would run indefinitely.

already signed up for our mailing list. State machines are often implemented using the State pattern.