How to implement the strategy pattern in Javascript

Overview
Code Implementation
Summarize

Overview

The strategy pattern is a behavioral design pattern in JavaScript design patterns;

definition:

Define a series of algorithms and encapsulate each of these algorithms into a strategy class (method), then separate the unchanged part from the variable part, and these algorithms can be replaced with each other

Vernacular explanation:

In fact, the so-called strategy mode refers to executing different methods according to different strategies, which is very similar to if-else branch judgment; but the strategy mode is used to solve multiple conditional judgment statements;

Code Implementation

need:

As the year-end is approaching, a company decided to issue year-end bonuses in advance. However, there are certain rules for calculating year-end bonuses, and the amount of year-end bonuses is closely related to performance appraisal. Therefore, the year-end bonus plan of a company is as follows:

For employees with an S performance rating, the year-end bonus is four times their monthly salary;

For employees with an A performance rating, the year-end bonus is three times their monthly salary;

For employees with a performance rating of B, the year-end bonus is twice their monthly salary;

Seeing this, you can start writing programs. Generally, most of the code is like this:

function calculateBonus(level,salary){
    if(level === 'S'){
        return salary*4;
    }
    
    if(level === 'A'){
        return salary*3
    }

    if(level === 'B'){
        return salary*2
    }
}

console.log(calculateBonus("S",14000)); //56000
console.log(calculateBonus("A",10000)); //30000
console.log(calculateBonus("B",5000)); //10000

There is no problem in using the above code to solve the current needs, but from the perspective of program design, the above code can still be optimized; because this method is relatively large, has many branch judgments, and lacks flexibility; if the year-end bonus plan is changed, do we need to add a C plan? Do we have to add branch judgment to the method? This violates the open-closed principle;

optimization:

var strategies = {
    "S": function (salary) {
        return salary*4
    },
    "A": function (salary) {
        return salary*3;
    },
    "B": function (salary) {
        return salary*2
    }
}

var calculateBonus =function(level,salary){
    return strategies[level](salary);
} 
console.log(calculateBonus("S",14000)); //56000
console.log(calculateBonus("A",10000)); //30000
console.log(calculateBonus("B",5000)); //10000

After optimizing the above code, the strategy pattern is used to transform the code. We can see that we define a strategy object, and then calculateBonus can calculate the amount of the year-end bonus according to the level and salary passed in by the user. After the transformation, the structure of the code becomes more concise;

In web development, the registration and login functions of the login page all require form submission; however, verification and screening must be performed during the submission process, and those that do not meet the verification rules will not be submitted directly; before learning the design pattern, our verification may also be the same as above, with multiple if branches, and now we use the strategy pattern to implement a form verification:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <form action="http://xxx.com/register" id="registerForm" method="post">
            Please enter your username: <input type="text" name="userName"/ >
            Please enter your password: <input type="text" name="password"/ >
            Please enter your phone number: <input type="text" name="phoneNumber"/ >
            <button>Submit</button>
        </form>
</body>
<script>
        // Define strategy class algorithm verification rules var strategies = {
        isNonEmpty: function( value, errorMsg ){
            if ( value === '' ) {
                return errorMsg;
            }
        },
        minLength: function( value, length, errorMsg ){
            if ( value.length < length ){
                return errorMsg;
            }
        },
        isMobile: function( value, errorMsg ){
            if ( !/(^1[3|5|8][0-9]{9}$)/.test( value ) ){
                return errorMsg;
            }
        }
    };
    //Validator class var Validator = function(){
        // Save verification rules this.cache = [];
    };
    //Method for adding validation rules Validator.prototype.add = function( dom, rules ){
        var self = this;
        for ( var i = 0, rule; rule = rules[ i++ ]; ){
            (function( rule ){
                //Split the value of the strategy attribute in the validation rule object var strategyAry = rule.strategy.split( ':' );
                var errorMsg = rule.errorMsg;
                self.cache.push(function(){
                    //Return the first value of the strategy attribute in the validation rule object and put it into strategy var strategy = strategyAry.shift();
                    //Composition parameters strategyAry.unshift( dom.value );
                    //Assembly parameters strategyAry.push( errorMsg );
                    //Find the strategy object execution method and put it into the cache variable return strategies[ strategy ].apply( dom, strategyAry );
                });
                console.log(strategyAry);
            })( rule )
        }
    };
    //Start verification method Validator.prototype.start = function(){
        for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
             //Loop cache execution method verification var errorMsg = validatorFunc();
            //If errorMsg is returned in the execution strategy object method, it means that the method has reported an error (failed to pass the verification rule)
            if ( errorMsg ){
                return errorMsg;
            }
        }
    };

    //Call verification var registerForm = document.getElementById( 'registerForm' );
    //Define method to customize validation rules var validataFunc = function(){
        //Instantiate the object var validator = new Validator();
        //Customize validation rulesvalidator.add(registerForm.userName, [{
            strategy: 'isNonEmpty',
            errorMsg: 'Username cannot be empty'
        }, {
            strategy: 'minLength:6',
            errorMsg: 'The user name cannot be less than 10 characters long'
        }]);
        validator.add( registerForm.password, [{
            strategy: 'minLength:6',
            errorMsg: 'The password length cannot be less than 6 characters'
        }]);
        //Call method to execute verification in loop var errorMsg = validator.start();
        return errorMsg;
    }
    //Click the submit button (submit event)
    registerForm.onsubmit = function(){
        //Execute the above custom verification method var errorMsg = validataFunc();
        //If errorMsg exists, it means the verification failed if ( errorMsg ){
            alert ( errorMsg );
            return false;
        }

    };
</script>
</html>

We can use the strategy pattern to solve problems such as large-scale repeated if-else judgments in form validation. I have given detailed comments on the code above. To learn design patterns, you must carefully taste the code and learn the ideas. Anyway, one of the main ideas of the strategy pattern is to define a series of algorithms, then pass in parameters, and execute different algorithm rules according to different parameters.

Summarize

advantage:

1. Use combination, delegation and polymorphism technology and ideas to avoid multiple conditional selection statements;

2. Encapsulate the algorithm in an independent strategy class, making it easy to switch, understand, and expand;

3. The strategy pattern can be reused in other parts of the system to avoid repeated copy and paste work;

shortcoming:

1. Many strategy classes or strategy objects will be added to the program;

2. When using strategy classes, you must have a clear understanding of all strategy algorithms, otherwise you will not know how to choose.

The above is the details of JavaScript strategy pattern. For more information about JavaScript strategy pattern, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

Detailed explanation of the use of JavaScript strategy mode from form validation
JavaScript design pattern strategy pattern implementation principle detailed explanation
JS form validation plug-in data and logic separation operation example analysis [strategy mode]
JavaScript Design Patterns – Strategy Pattern Principles and Usage Examples
Analysis of the concept and usage of strategy pattern in JS design pattern
JavaScript rewrites the asynchronous validation form into a synchronous form
Summary of three methods of submitting the form after js verifies the form
Easily master JavaScript strategy mode
How to use JavaScript strategy pattern to validate forms

<<: Detailed explanation of the use of the MySQL parameter sql_safe_updates in the production environment

>>: A complete guide to Linux environment variable configuration