Let’s talk about dating today.

We often ask one person, why are you still single?

The answers are as follows:

  • I didn’t meet the right one.
  • Too busy to have time.

The other answer is either one or both.

However, in my opinion, the two correspond to the policy pattern and the state pattern respectively.

Those of you who use background languages know that policy mode and state mode are twins, separated only after birth.

Or they look like each other, but have very different personalities.

I don’t think that’s quite the point. To be more precise, they’re a couple, a boy and a girl.

1. Policy mode

So what are strategic patterns?

Strategy, strategy, is about doing the same thing can have different moves.

So many books like to use the word “magic bullet” to describe it.

var doSomething1 = function() {
  console.log('xxx');
};
var doSomething2 = function() {
  console.log('yyy');
}
/ / core
var doSomething = function(strategy) {
  if (strategy == 'xxx') doSomething1();
  if (strategy == 'yyy') doSomething2();
};
doSomething('xxx'); // xxx
doSomething('yyy'); // yyy
Copy the code

The above code is an if-else implementation of the policy.

In the front end, the policy pattern can be implemented as follows:

var doSomething = function(strategy) {
  strategys[strategy]();
};
var strategys = {
  xxx: function() {
    console.log('xxx');
  },
  yyy: function() {
    console.log('yyy'); }}; doSomething('xxx'); // xxx
doSomething('yyy'); // yyy
Copy the code

Strategic mode, you pass, I use what move!

2. State mode

Now that the analysis of strategic patterns is over, what is a state?

State, state, today is not in the mood to go to work, this mood is state.

I saw a joke before:

A: Coming? B: Yes. A: Coming? B: Yes. A: Come? B: No.

The meaning of this joke is that “coming” depends on the current state.

A specific example, switch, is the best representation of state.

var state = 'off';
var doSomething1 = function() {
  if (state == 'off') {
    console.log('doSomething1 and turn to on');
    flag = 'on';
  }
  if (state == 'on') {
    console.log('doSomething1 else'); }};var doSomething2 = function() {
  if (state == 'off') {
    console.log('doSomething2');
  }
  if (state == 'on') {
    console.log('doSomething2 else and turn to off');
    flag = 'off';
  }
}

doSomething1(); // doSomething1 and turn to on
doSomething1(); // doSomething1 else
doSomething2(); // doSomething2 else and turn to off
doSomething2(); // doSomething2
Copy the code

Every time you do something, the outcome depends on the current state.

The above logic is implemented in state mode:

var doSomething1 = function () {
  state.doSomething1();
};
var doSomething2 = function () {
  state.doSomething2();
};
var off = {
  doSomething1: function () {
    console.log('doSomething1 and turn to on');
    state = on;
  },
  doSomething2: function () {
    console.log('doSomething2'); }}var on = {
  doSomething1: function () {
    console.log('doSomething1 else');
  },
  doSomething2: function () {
    console.log('doSomething2 else and turn to off'); state = off; }}var state = off
doSomething1(); // doSomething1 and turn to on
doSomething1(); // doSomething1 else
doSomething2(); // doSomething2 else and turn to off
doSomething2(); // doSomething2
Copy the code

Ok, so that’s state-directed behavior.

3. Relationships

It should be relatively clear what policy patterns and state patterns are and how to implement them simply.

With patterns, the code becomes clearer and easier to deal with changes.

You can add different policies, you can add different states.

Now, why are they in a relationship?

Policy mode selects different policies based on external conditions.

State patterns determine different responses based on internal states.

“Every elephant has a right, and every right has a wrong.”

One out, one in.

These two sentences seem to be perfectly opposed. But look at the code of both, don’t think so?

The discovery strategy pattern has a small amount of code, while the state pattern has a large amount of code, which is almost twice as large.

To say that the two are male and female, the strategy should be male and the state female.

Men care about how to solve problems quickly and come up with solutions.

Women care about the current mood and emotional comfort, pay attention to the internal state.

Judging from the amount of code above, girls think more heart things.

Let’s make the example code equal.

Here’s a strategy model that tries to mimic your skills and interests.

varStunt = {think:function () {
    console.log("Have a wild imagination"); }, reading a book:function() {
    console.log('In one go'); }};varHobby = {brag:function () {
    console.log("The cow is in the sky."); }, smoking:function() {
    console.log("Up in the clouds"); }};varYou = {show stunts:function(strategy) {stunts [strategy] (); }, show hobbies:function(strategy) {love [strategy] (); }}; You. Show your stunts ("Thinking"); // Make a fool of yourselfYou. Show your stunts ("Reading"); // All at onceYou. Show your hobbies ("Brag"); // The cow is in the skyYou. Show your hobbies ("Smoking"); // In the clouds
Copy the code

The code encapsulates two sets of algorithms, each of which is determined by the outside world.

So for state patterns, let’s also write about ourselves.

varBother = {brag:function() {
    console.log('Blow it. It'll make you feel better.'); Current mood = cool; }, smoking:function() {
    console.log('When you're in a bad mood, smoking gets boring.'); }};varCool = {boast:function() {
    console.log('The more I blow, the better I feel.'); }, smoking:function() {
    console.log('I started to feel bad when I thought smoking was bad for my health'); Current mood = upset; }};varCurrent mood = upset;varLao Yao = {brag:function() {current mood ["Brag"] (); }, smoking:function() {current mood ["Smoking"] (); }}; Lao Yao. Brag ();// Blow on itLao Yao. Brag ();// The more I blow, the better I feelLao Yao. Smoking ();// The thought of smoking is bad for your health makes me feel badLao Yao. Smoking ();// When you are in a bad mood, smoking becomes more and more boring
Copy the code

The state mode encapsulates each state, and the state encapsulates all behaviors. A specific behavior is determined by the current state.

Now we have the same amount of code. Do you see a dual relationship?

Policy pattern: Defines a series of algorithms, encapsulates each algorithm, and makes them interchangeable. The policy pattern lets the algorithm change independently of the customers that use it.

State mode: Allows an object to change its behavior when its internal state changes. Object appears to have modified its class.

In both definitions, there is the word “different.”

Every elephant has a right, and every right has a wrong.

The policy pattern depends on the policies that are passed in.

The state depends on the current state since the last call.

However, the strategic pattern is easy to understand. It’s also easy to use. Like a teenager, with no thought.

State mode? I think it’s better.

For a complex process, state patterns are really powerful.

It’s about how you divide the states, how you construct the state machine.

Looks like there’s more to women than half the sky.

The use of state mode reminds me of a story.

Said there was a mental patient, ran into the house, locked the door from the inside.

I’m going to lock you in and never get out!!


I don’t know if I made that clear, but I hope it helps.

Also welcome to read my JS regular mini book.

In this paper, to the end.