preface

I think you’re going to get an if else judgment a lot when you’re developing, right? Very common judgment.


if(x == 100) {
    console.log(100)
} else if (x == 200) {
    console.log(200)
}

Copy the code

Two days later, the leader came to communicate with you about the new requirements. You found that you need to change the if judgment and add more and more business operations

if(x == 1) { console.log(1) } else if (x == 2) { console.log(2) } else if(x == 3) { ... console.log(3) ... . . . . . . . }Copy the code

There is a problem if the leader wants various SAO operation, we can only keep satisfying his SAO operation to add more if judgment…

This will cause our if function to be too long, and if there’s a lot of business in the if function, I guarantee you don’t want to see the if judgment for a long time.

Modified? You can try it, you can try it… / eye smile

refactoring

Abstract function

Some of you might think, “If is more, if is more,” so let’s separate the “if” judgment.

const xTypeOne = () => {
    console.log(1)
}

const xTypeTwo = () => {
  console.log(2)
}

const xTypeThree = () => {
  console.log(3)
}

if(x == 1) {
   xTypeOne();
} else if (x == 2) {
   xTypeTwo()
} else if(x == 3) {
   xTypeThree()
}

Copy the code

Good, good, good, good, good, good, good, good, good, good, good, good, good, good, good. Clap.

Policy pattern decoupling

We can also cooperate with the strategy mode, strategy mode is relatively simple, let’s first understand what strategy means.

Strategy refers to tactics; Counsel. Generally refers to:

  1. A collection of solutions that can achieve goals;
  2. The course of action and methods of struggle drawn up in light of the development of the situation;
  3. He has the art of fighting, and he pays attention to ways and means.

Focus: the set of solutions to achieve the goal

const xTypeOne = () => { console.log(1) } const xTypeTwo = () => { console.log(2) } const xTypeThree = () => { Console. log(3)} // Put all the methods in xType. const xType = { "1": xTypeOne, "2": xTypeTwo, "3":xTypeThree, } xType["1"](); // 1 xType["2"](); // 2 xType["2"](); / / 3Copy the code

You’ll need to add or modify it later, just focus on the xType object.

Think about


if(x == 1) {
   xTypeOne();
} else if (x == 2) {
   xTypeTwo()
} else if(x == 3) {
   xTypeThree()
} else {

}

Copy the code

Although we use the policy pattern for decoupling, what do we do with the last else? I don’t think I can handle that in strategic mode.

Proxy Proxy + policy mode

If you haven’t used proxy before, you probably know about it, right? What can’t? That’s okay. I’m sure you’ll use it after reading this article.

Modernize JavaScript tutorials Proxy and Reflect

The proxy definition:

A Proxy object that wraps another object and intercepts operations such as read/write properties and other operations can choose to handle them themselves or transparently allow the object to handle them.

const xTypeOne = () => { console.log(1) } const xTypeTwo = () => { console.log(2) } const xTypeThree = () => { console.log(3) } const notFind = () => { console.log("notFind") } let xType = { "1": xTypeOne, "2": xTypeTwo, "3":xTypeThree, "not": notFind, } let xTypeProxy = new Proxy(xType, { get(target, phrase) { if (phrase in target) { return target[phrase]; } else { return target["not"]; }}}); xTypeProxy['1']() // 1 xTypeProxy['2']() // 2 xTypeProxy['3']() // 3 xTypeProxy['4']() // notFindCopy the code

Why would you do that?

Why write so much code to handle such a simple function? What started out as a small function only needed a few ifs.

Are you adding strategy mode and proxy?

If (x == 1) {console.log(1)} else if(x == 2) {console.log(2)} else if(x == 3) {console.log(2)} else if(x == 3) {... console.log(3) ... } else {} const xTypeOne = () => {console.log(1)} const xTypeTwo = () => {console.log(2)} const xTypeThree = ()  => { console.log(3) } const notFind = () => { console.log("notFind") } let xType = { "1": xTypeOne, "2": xTypeTwo, "3":xTypeThree, "not": notFind, } let xTypeProxy = new Proxy(xType, { get(target, phrase) { if (phrase in target) { return target[phrase]; } else { return target["not"]; }}}); xTypeProxy['1']() // 1 xTypeProxy['2']() // 2 xTypeProxy['3']() // 3 xTypeProxy['4']() // notFindCopy the code

I’ve seen a PHP project with 4 Alipay plugins (I don’t know why 4 plugins are needed), 2W lines of code in a PHP file with CTRL + C CTRL + V everywhere. How do you handle it when you have to maintain the project? I dare not modify the logic of this project, and can only write down slowly according to the rules of shishan.

If you were writing this PHP project at that time, try to separate the code logic as much as possible, pay attention to reuse when writing, pay attention to later requirements expansion. So later maintenance, or others to take over the maintenance, is relatively easy?

To say… Because people are alive and code is dead. At least don’t screw yourself up when writing code! Better to make your code simpler and more maintainable!