Easily master JavaScript strategy mode

Definition: Define a series of algorithms, encapsulate them one by one into functions, or they can be uniformly encapsulated into an object as attributes, and then define a method. This method can automatically select and execute the corresponding algorithm based on the parameters.

It is generally used in situations where there are many options to choose from when implementing a function.

Example 1: Calculate the year-end bonus based on employee salary, performance grades S, A, B, and C.

 //The policy object that encapsulates all algorithms var strategies = { 'S': function(salary){ return salary*4; }, 'A': function(salary){ return salary*3; }, 'B': function(salary){ return salary*2; }, 'C': function(salary){ return salary*1; }} //Define the method of automatic selection algorithm var calculateBonus = function(level,salary){ return strategies[level](salary);}//Use calculateBonus('S',9000); //36000calculateBonus('B',5000); //10000

Example 2: Form Verification

 //The policy object that defines the verification algorithm var strategies = function(){ isEmpty:function(value,errorMsg){ if(value = ''){ return errorMsg; } } outRangle:function(value,min,max,errorMsg){ if(value.length > max || value.length < min){ return errorMsg; } } isSame:function(oldValue,newValue,errorMsg){ if(newValue !== oldValue){ return errorMsg; } } isMobile:function(value,errorMsg){ if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){ return errorMsg; } } ......}

You can also not define the following Validator class, and directly call the attribute method of the strategies object when the loss of focus event is triggered to verify the current input item.

 //Define Validatorvar Validator = function(){ this.cache = [];}Validator.prototype.add = function(elem,rules){ var self = this; for(var i = 0, rule; rule = rules[i++]){ (function(rule){ var strategyAry = rule.strategy.split(':'); var errorMsg = rule.errorMsg; self.cache.push(function(){ var strategy = strategyAry.shift(); strategyAry.unshift(elem.value); strategyAry.push(errorMsg); return strategies[strategy].apply(elem,strategyAry); }) })(rule) }}Validator.prototype.start = function(){ for(var i = 0, func; func = this.cache[i++]){ var errorMsg = func(); if(errorMsg){ return errorMsg; } }}

use:

 var validator = new Validator();validator.add(elem.userName,[ {strategy:'isEmpty', errorMsg:'Username cannot be empty'}, {strategy:'outRangle:6:12', errorMsg:'Username length is 6-12 bits'}]);......var errorMsg = validator.start();......

Attachment: Parameter configuration object

If there is a function foo(a,b,c,d,e,f...), it has many parameters, such functions are difficult to use and parameters are difficult to remember! A better way is to use an object to contain these parameters, and then pass the object to the function, and then process the properties of the object.

 var prop = { a:55, b:'ss', c:function(){...} d:{x:1,y:2} ...}foo(prop);

In this way, there is no need to remember the parameter order when using functions. Just remember several attribute names of the parameter object, which is not easy to make mistakes

References: "JavaScript Pattern" "JavaScript Design Pattern and Development Practice"

The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.