Detailed explanation of the use of JS strategy pattern

This time I will bring you a detailed explanation of the use of JS strategy mode. What are the precautions when using JS strategy mode? Here are practical cases, let’s take a look.

Concept reference of strategy pattern:

We often encounter similar situations in software development. There are multiple algorithms or strategies to implement a certain function. We can use Depending on the environment or conditions, different algorithms or strategies are selected to complete this function.

Such as searching, sorting, etc., a common method is to hard code it in a class. If you need to provide multiple search algorithms, you can write these algorithms into a class, in this class Provides multiple methods, each method corresponds to a specific search algorithm; of course, these search algorithms can also be encapsulated in a unified method, through if...else...or case and other conditionsjudgment statements choose.

We can call these two implementation methods hard coding. If you need to add a new search algorithm, you need to modify the source code of the encapsulated algorithm class; to change the search algorithm, you also need to modify the client calling code. .

A large number of search algorithms are encapsulated in this algorithm class. This type of code will be more complex and difficult to maintain. If we include these strategies on the client, this approach is even more undesirable. It will cause the client program to be large and difficult to maintain. The problem will become more serious if there are a large number of algorithms to choose from.

Examples:

1. Travel: We can have several strategies to consider: riding a bicycle, car, taking a train, or flying. Each strategy achieves the same results, but they use different resources.

Choose a strategy based on cost, time, tools and convenience of each method.

2. In a shopping mall, an event was held on May Day, so the following discount strategy was made for book products based on the purchase amount

1. 10% off for purchases over 199 yuan.
2. 20% off for purchases over 399 yuan
3. 30% off for purchases over 599 yuan;

function BookStrategy() {
 this.calcPrice = function( price ) {
 console.log("未打折 = " + price);
 }
}
function BookCalc9Strategy() {
 this.calcPrice = function( price ) {
 console.log("原价是："+ price +";打9折后：" + (price * 0.9));
 }
}
function BookCalc8Strategy() {
 this.calcPrice = function( price ) {
 console.log("原价是："+ price +";打8折后：" + (price * 0.8));
 }
}
function BookCalc7Strategy() {
 this.calcPrice = function( price ) {
 console.log("原价是："+ price +";打7折后：" + (price * 0.7));
 }
}
function PriceCalc( _strategy ) {
 this.strategy = _strategy;
 this.getPrice = function( price ) {
 return this.strategy.calcPrice( price );
 }
}
function Client() {
 var price = 100;
 var priceCalc = null;
 if ( 199 <= price && price < 399 ) {
 priceCalc = new PriceCalc(new BookCalc9Strategy());
 } else if ( 399 <= price && price < 599 ) {
 priceCalc = new PriceCalc(new BookCalc8Strategy());
 } else if ( 599 <= price ) {
 priceCalc = new PriceCalc(new BookCalc7Strategy());
 } else {
 priceCalc = new PriceCalc(new BookStrategy());
 }
 priceCalc.getPrice(price);
}
Client();

Running results:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use datepicker

Detailed explanation of the use of high-order components of mixin

Using ejsExcel template in Vue.js

The above is the detailed content of Detailed explanation of the use of JS strategy pattern. For more information, please follow other related articles on the PHP Chinese website!