javascript设计模式-策略模式

Posted 2020-08-16 惊涛随笔

策略模式笔记
   将定义的一组算法封装起来，使其相互之间可以替换。
   封装的算法具有一定独立性，不会随客户端变化而变化。
   与状态模式异同？
     1. 结构上看，它与状态模式很像，也是在内部封装一个对象，然后通过返回的接口对象实现对内部对象的调用
     2. 不同点是，策略模式不需要管理状态，状态之间没有依赖关系、策略之间可以相互替换、策略对象内部保存的是相互独立的一些算法。
   demo:价格策略对象 、 表单正则验证策略对象

demo1：价格策略对象

 1             //价格策略对象
 2             var PriceStrategy = function(){
 3                 //内部算法对象
 4                 var strategy = {
 5                     //100 返 30
 6                     return30 : function(price){
 7                         return +price + parseInt(price / 100) * 30;
 8                     },
 9                     //100 返 50
10                     return50 : function(price){
11                         return +price + parseInt(price / 100) * 50;
12                     },
13                     //9折
14                     percent90 : function(price){
15                         return price * 100 * 90 / 10000;
16                     },
17                     //8折
18                     percent80 : function(price){
19                         return price * 100 * 80 / 10000;
20                     },
21                     //5折
22                     percent50 : function(price){
23                         return price * 100 * 50 / 10000;
24                     }
25                 }
26                 return function(algorithm,price){
27                     //如果算法存在，则调用算法，否则返回false
28                     return strategy[algorithm] && strategy[algorithm](price);
29                 }
30             }();

测试代码

1             var price = PriceStrategy(\'return50\',\'300\');
2             console.log(price);

控制台显示

demo2: 表单正则验证策略对象

 1             //表单正则验证策略对象
 2             var InputStrategy = function(){
 3                 var strategy = {
 4                     //是否为空
 5                     notNull : function(value){
 6                         return /\\s+/.test(value) ? \'请输入内容\' : \'\';
 7                     },
 8                     //是否是一个数字
 9                     number : function(value){
10                         return /^[0-9]+(\\.[0-9]+)?$/.test(value) ? \'\' : \'请输入数字\';
11                     },
12                     //是否是本地电话
13                     phone : function(value){
14                         return /^\\d{3}\\-\\d{8}$|^\\d{4}\\-\\d{7}$/.test(value) ? \'\' : \'请输入正确的电话号码格式，如：010-12345678 或 0418-1234567\';
15                     }
16                 }
17                 return {
18                     //验证接口 type算法 value 表单值
19                     check : function(type, value){
20                         //去除收尾空白符
21                         value =value.replace(/^\\s+|\\s+$/g, \'\');
22                         return strategy[type] ? strategy[type](value) : \'没有该类型的检测方法\'
23                     },
24                     //添加策略
25                     addStrategy : function(type, fn){
26                         strategy[type] = fn;
27                     }
28                 }
29             }();

拓展策略 添加策略

1          InputStrategy.addStrategy(\'nickname\', function(value){
2              return /^[a-zA-Z]\\w{3-7}$/.test(value) ? \'\' : \'请输入4-8位昵称，如：YYQH\';
3          });

测试代码

1          console.log(InputStrategy.check(\'nickname\',"1YQH"));

控制台显示