[strategic mode] like Zhugeliang's brocade bag

This article introduces a design pattern , You may deal with it every day , But I don't know it , It is “

The strategy pattern

”.

The strategic model is like Zhugeliang's brocade bag , It is reflected in the code like this ：

For example , We have a sales campaign , It has different sales strategies

function getPrice(originalPrice, status) {
 if (status === 'pre-sale') { //  Pre sale  8  fold
 return originalPrice * 0.8
 }
 
 if (status === 'promotion') { //  The sales promotion is  9  Discount or cheap  20
 if (origialPrice <= 100) {
 return origialPrice * 0.9
 } else {
 return originalPrice - 20
 }
 }

 if (status === 'black-friday') { //  There are many discount strategies on Friday
 if (origialPrice >= 100 && originalPrice < 200) {
 return origialPrice - 20
 } else if (originalPrice >= 200) {
 return originalPrice - 50
 } else {
 return originalPrice * 0.8
 }
 }
 
 if (status === 'default') { //  No discount by default
 return originalPrice
 }
}


Write it like this , Is there anything wrong ？

The old audience knows ： Of course there are , It violates “ Opening and closing principle ” and “ Principle of single responsibility ”.（ These two principles are often mentioned , Key points ）

Why violate “ Opening and closing principle ”？ Because when you want to add a new strategy , To be modified  getPrice  Function internal code , This is not what we advocate , We advocate ： Infrequently modify the function body , Add functions through reserved extension interfaces ;

namely ： Modify the internal of the function  ⇒ no, Expand function functions  ⇒ yes

Why is it illegal “ Single responsibility ”？ because  getPrice  Functions are responsible for too many judgments , This and that , Too many responsibilities , There is no decoupling ;

There's a bigger problem , When one of the policy codes reports an error , It will affect the whole  getPrice  Downward execution of function .

For the above reasons , So , The strategy mode comes on stage ！！

function preSalePrice(origialPrice) { //  Pre sale  8  fold
 return originalPrice * 0.8
}

function promotionPrice(origialPrice) { //  The sales promotion is  9  Discount or cheap  20
 if (origialPrice <= 100) {
 return origialPrice * 0.9
 } else {
 return originalPrice - 20
 }
}

function blackFridayPrice(origialPrice) { //  There are many discount strategies on Friday
 if (origialPrice >= 100 && originalPrice < 200) {
 return origialPrice - 20
 } else if (originalPrice >= 200) {
 return originalPrice - 50
 } else {
 return originalPrice * 0.8
 }
}

function defaultPrice(origialPrice) { //  No discount by default
 return origialPrice
}

let priceStrategies = { //  Discount strategy
 'pre-sale': preSalePrice,
 'promotion': promotionPrice,
 'black-friday': blackFridayPrice,
 'default': defaultPrice
}

function getPrice(originalPrice, status) { //  Get the price according to the strategy
 return priceStrategies[status](originalPrice)
}


After optimization , The code starts like this ：

It goes like this ：

picture source

Perfect solution ！！ Code looks simpler 、 Clear .

If you have a lot of code  if…else…  Judge , The codes in each judgment are independent of each other , Consider using the policy pattern , Code that encapsulates each judgment , use  map  The way , Take out your tricks

The strategy pattern , Is this , The original design pattern is around us ~~

Reference resources ：

useful-design-patterns

author ：

bytefish

OK, The above is the sharing of this article . Like, follow the comments , Help good writing

I'm Anthony nuggets   100  Popular front-end technology bloggers with a reading volume of 10000   INFP  Writing personality persistence  1000  Japanese Geng Wen    Pay attention to me , Spend the long programming years with you