js之策略模式

最新推荐文章于 2023-04-26 21:56:37 发布
最新推荐文章于 2023-04-26 21:56:37 发布
阅读量434 收藏
点赞数
分类专栏： 设计模式 文章标签： javascript 模式 策略模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linhongyong/article/details/53426739
版权

策略模式

计算奖金

level01:最初的代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var calculateBonus = function (performanceLevel,salary){
            if(performanceLevel === 'S'){
                return salary*4;
            }
            if(performanceLevel === 'A'){
                return salary*3;
            }
            if(performanceLevel === 'B'){
                return salary*2;
            }
        }
        calculateBonus('B',2000);
        calculateBonus('S',2000);

    </script>
</body>
</html>

缺点：

  1. calculateBonus函数比较庞大
  2. calculateBonus缺乏弹性，如：再增加一个绩效等级C，或者想把绩效 S 的奖金系数改为 5，就必须必须深入calculateBonus
    函数的内部实现，这是违反开放-封闭原则。
  3. 算法的复用性差其他地方需要重用这些计算奖金的算法只能通过复制粘贴。

level02:使用组合函数重构代码

把各种算法封装到一个个的小函数里面，这些小函数有着良好的命名，可以一目了然地知道它对应着哪种算法，它们也可以被复用在程序的其他地方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
       var performanceS = function(){
           return  salary*4;
       }
       var performanceA = function(){
           return  salary*3;
       }
       var performanceB = function(){
           return  salary*2;
       }
       var calculateBonus = function () {
           if ( performanceLevel === 'S' ){
               return performanceS( salary );//变成了函数
           }
           if ( performanceLevel === 'A' ){
               return performanceA( salary );//变成了函数
           }
           if ( performanceLevel === 'B' ){
               return performanceB( salary );//变成了函数
           }
       };
       calculateBonus( 'A' , 10000 ); // 输出：30000
    </script>
</body>
</html>

优点：
1. 把算法封装在函数里便于以后维护和服用
2. 一目了然它对应着哪种算法

level03:使用策略模式重构代码（模仿传统面向对象语言中的实现）

策略模式指的是：定义一系列的算法，把他们一个个封装起来。
将不变的部分和变化的部分隔开是每个设计模式的主题策略模式
也不例外，策略模式的目的就是将算法的使用与算法的实现分离开来。
一个基于策略模式的程序至少由两部分组成：第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。 第二个部分是环境类 Context，Context接受客户的请求，随后把请求委托给某一个策略类。要做到这点，说明 Context中要维持对某个策略对象的引用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //定义一系列的算法，把它们各自封装成策略类，算法被封装在策略类内部的方法里。
        var performanceS = function(){};
        performanceS.prototype.calculate = function( salary ){
            return salary * 4;
        };
        var performanceA = function(){};
        performanceA.prototype.calculate = function( salary ){
            return salary * 3;
        };
        var performanceB = function(){};
        performanceB.prototype.calculate = function( salary ){
            return salary * 2;
        };
        //环境类 Context ：
        var Bonus = function(){
            this.salary = null; // 原始工资
            this.strategy = null; // 绩效等级对应的策略对象
        };
        Bonus.prototype.setSalary = function( salary ){
            this.salary = salary; // 设置员工的原始工资
        };
        //在客户对 Context发起请求的时候，Context总是把请求委托给这些策略对象中间的某一个进行计算。
        Bonus.prototype.setStrategy = function( strategy ){
            this.strategy = strategy; // 设置员工绩效等级对应的策略对象
        };
        Bonus.prototype.getBonus = function(){ // 取得奖金数额
            return this.strategy.calculate( this.salary ); // 把计算奖金的操作委托给对应的策略对象
        };

        var bonus = new Bonus();
        bonus.setSalary( 10000 );
        bonus.setStrategy( new performanceS() ); // 设置策略对象
        console.log( bonus.getBonus() ); // 输出：40000
        bonus.setStrategy( new performanceA() ); // 设置策略对象
        console.log( bonus.getBonus() ); // 输出：30000
    </script>
</body>
</html>

优点：

  1. 代码变得更加清晰
  2. 各个类的职责更加鲜明

level04:JavaScript 版本的策略模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        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', 20000 ) ); // 输出：80000
        console.log( calculateBonus( 'A', 10000 ) ); // 输出：30000
    </script>
</body>
</html>

表单校验

level01:表单校验的第一个版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http:// xxx.com/register" id="registerForm" method="post">
    请输入用户名：<input type="text" name="userName"/ >
    请输入密码：<input type="text" name="password"/ >
    请输入手机号码：<input type="text" name="phoneNumber"/ >
    <button>提交</button>
</form>
<script>
    var registerForm = document.getElementById( 'registerForm' );
    registerForm.onsubmit = function(){
        if ( registerForm.userName.value === '' ){
            alert ( '用户名不能为空' );
            return false;
        }
        if ( registerForm.password.value.length < 6 ){
            alert ( '密码长度不能少于 6 位' );
            return false;
        }
        if ( !/(^1[3|5|8][0-9]{9}$)/.test( registerForm.phoneNumber.value ) ){
            alert ( '手机号码格式不正确' );
            return false;
        }
    }
</script>
</body>
</html>

缺点：

  1. registerForm.onsubmit 函数比较庞大
  2. registerForm.onsubmit 函数缺乏弹性如果增加了一种新的校验规则，或者想把密码的长度校验从 6改成 8，我们都必须深入 registerForm.onsubmit 函数的内部实现，这是违反开放 — 封闭原则的。
  3. 算法的复用性差，如果在程序中增加了另外一个表单，这个表单也需要进行一些类似的校验，那我们很可能将这些校验逻辑复制得漫天遍野。

level02:用策略模式重构表单校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--用策略模式重构表单校验-->
<body>
<form action="http:// xxx.com/register" id="registerForm" method="post">
    请输入用户名：<input type="text" name="userName"/ >
    请输入密码：<input type="text" name="password"/ >
    请输入手机号码：<input type="text" name="phoneNumber"/ >
    <button>提交</button>
</form>
<script>
  /*  下面我们将用策略模式来重构表单校验的代码，很显然第一步我们要把这些校验逻辑都封装
    成策略对象：*/
  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 类在这里作为 Context:负责接收用户的请求并委托给 strategy 对象
  var validataFunc = function(){//这个函数可以不要，把里面代码直接放到onsubmit函数里面
      var validator = new Validator(); // 创建一个 validator 对象
      /***************添加一些校验规则****************/
      validator.add( registerForm.userName, 'isNonEmpty', '用户名不能为空' );
      validator.add( registerForm.password, 'minLength:6', '密码长度不能少于 6 位' );
      validator.add( registerForm.phoneNumber, 'isMobile', '手机号码格式不正确' );
      var errorMsg = validator.start(); // 获得校验结果
      return errorMsg; // 返回校验结果
  }
  var registerForm = document.getElementById( 'registerForm' );
  registerForm.onsubmit = function(){
      var errorMsg = validataFunc(); // 如果 errorMsg 有确切的返回值，说明未通过校验
      if ( errorMsg ){
          alert ( errorMsg );
          return false; // 阻止表单提交
      }
  }


  var Validator = function(){
      this.cache = []; // 保存校验规则（把定义效验规则的函数存入数组，，之后循环执行）
  };
  Validator.prototype.add = function( dom, rule, errorMsg ){
      var ary = rule.split( ':' ); // 把 strategy 和参数分开
      this.cache.push(function(){ // 把校验的步骤用空函数包装起来，并且放入 cache
          var strategy = ary.shift(); // 用于在strategies中选择对应的策略
          ary.unshift( dom.value ); // 把 input 的 value 添加进参数列表 策略函数的参数
          ary.push( errorMsg ); // 把 errorMsg 添加进参数列表 策略函数的参数
          //ary很巧妙的成了策略函数的参数列表
          return strategies[ strategy ].apply( dom, ary );
      });
  };
  Validator.prototype.start = function(){
      for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
          var msg = validatorFunc(); // 开始校验，并取得校验后的返回信息
          if ( msg ){ // 如果有确切的返回值，说明校验没有通过(就不用再执行下去了)
              return msg;
          }
      }
  };
</script>
</body>
</html>

level03:给某个文本输入框添加多种校验规则

和level02相比只是函数add和参数形式不同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--用策略模式重构表单校验-->
<body>
<form action="http:// xxx.com/register" id="registerForm" method="post">
    请输入用户名：<input type="text" name="userName"/ >
    请输入密码：<input type="text" name="password"/ >
    请输入手机号码：<input type="text" name="phoneNumber"/ >
    <button>提交</button>
</form>
<script>
    /***********************策略对象**************************/
    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 类**************************/
    var Validator = function(){
        this.cache = [];
    };
    Validator.prototype.add = function( dom, rules ){
        var self = this;//因为这里的this和内嵌函数的this不一样
        for ( var i = 0, rule; rule = rules[ i++ ]; ){
            (function( rule ){
                var ary = rule.strategy.split( ':' );
                var errorMsg = rule.errorMsg;
                self.cache.push(function(){
                    var strategy = ary.shift();
                    ary.unshift( dom.value );
                    ary.push( errorMsg );
                    return strategies[ strategy ].apply( dom, ary );
                });
            })( rule )
        }
    };
    Validator.prototype.start = function(){
        for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
            var errorMsg = validatorFunc();
            if ( errorMsg ){
                return errorMsg;
            }
        }
    };
    /***********************客户调用代码**************************/
    var registerForm = document.getElementById( 'registerForm' );
    var validataFunc = function(){
        var validator = new Validator();
        validator.add( registerForm.userName, [{
            strategy: 'isNonEmpty',
            errorMsg: '用户名不能为空'
        }, {
            strategy: 'minLength:6',
            errorMsg: '用户名长度不能小于 10 位'
        }]);
        validator.add( registerForm.password, [{
            strategy: 'minLength:6',
            errorMsg: '密码长度不能小于 6 位'
        }]);
        validator.add( registerForm.phoneNumber, [{
            strategy: 'isMobile',
            errorMsg: '手机号码格式不正确'
        }]);
        var errorMsg = validator.start();
        return errorMsg;
    }
    registerForm.onsubmit = function(){
        var errorMsg = validataFunc();
        if ( errorMsg ){
            alert ( errorMsg );
            return false;
        }
    };
</script>
</body>
</html>
linhongyong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS策略模式
weixin_45523520的博客
03-20 1643
策略模式是一种常用的设计模式，它可以使代码更加灵活、可复用，并且有利于可以在运行时动态地改变代码的行为。在 JavaScript 中，我们可以通过函数来实现策略模式。策略模式的核心思想是将相似的行为封装为一个类，并将该类的调用暴露给外部。由于每个类都包含一个不同的行为，因此我们可以在运行时根据需要选择适当的类实例。总体来讲，策略模式可以使代码更加灵活、可维护，并且使我们可以在运行时根据需求选择不同的代码实现。在实际开发中，如果遇到类似多重条件判断的问题，我们可以使用策略模式来简化代码并使其更加易于扩展。
js设计模式之策略模式
SK_study的博客
01-10 6551
深入学习实际开发设计思想，提升代码质量
策略模式（js）
小白目的博客
08-17 842
设计模式是软件工程的基石, 为了代码可重用性、让代码更容易被他人理解、保证代码可靠性, 设计模式使代码编写真正工程化。
JavaScript中的策略模式
m0_75198698的博客
04-26 339
然后我们定义了一个`Calculator`类，它接受一个策略对象作为参数，并且包含一个`execute()`方法，用于调用策略对象的`execute()`方法。上面的代码中，我们首先创建了一个 `Validator` 对象，并添加了两种验证策略：`isRequired` 和 `isMaxLen(10)`。首先，我们定义一个 `Validator` 类作为策略的容器，它会将各种验证策略存储在内部的数组中，并提供一个 `validate` 方法，来调用各种策略进行验证。接下来，我们定义各种验证策略。
js设计模式一之策略模式（通俗易懂实战）
m0_56895352的博客
02-26 326
if (!//ctrl+b隐藏侧边树状资源这里使用的是vue3，在挂载钩子和卸载钩子中进行处理});});在js中策略模式主要通过一个字典映射来构建对分支策略的处理，再通过一个通用的函数来调用获取反馈，相当于是通过对象的多态性来消除了if-else，只是js中通过函数的方式来处理，这个模式在平时的编码也非常实用。
JavaScript设计模式之策略模式实例
10-25
在JavaScript中，策略模式能够帮助我们更好地组织代码，提高代码的可复用性和可扩展性。在标题和描述中提到的jQuery的`animate`方法就是一个典型的策略模式应用案例。 jQuery的`animate`方法允许我们在执行动画时...
JavaScript设计模式之策略模式详解
10-19
在JavaScript中，策略模式的应用可以帮助我们更好地组织代码，提高代码的可扩展性和可维护性。以下是对策略模式的详细解析： 首先，策略模式的核心思想是将算法或策略封装在独立的对象中，这样就可以在不修改原有...
学习JavaScript设计模式之策略模式
10-23
主要为大家介绍了JavaScript设计模式中的策略模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下
JavaScript设计模式之策略模式实现原理详解
10-15
主要介绍了JavaScript设计模式之策略模式实现原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JS 中如何实现策略模式
lefex的博客
06-12 2072
来举个验证表单的例子，通常会这么写：var regForm = document.getElementById('regForm'); regForm.onsubmit ...
js代码-设计模式之策略模式--根据成绩等级计算最终得分
07-16
js代码-设计模式之策略模式--根据成绩等级计算最终得分
JavaScript 设计模式之策略模式.zip
04-03
JavaScript 设计模式之策略模式.zip
js策略模式和代理模式
11-22
javascript的策略模式和代理模式简介，附代码
JS设计模式之 ------ 策略模式
小白变怪兽
01-17 956
策略模式
5-策略模式
半颗茜
02-23 579
参考书籍: Javascript设计模式与开发实践（曾探） 在程序设计中，要实现某一个功能有多种方案可以选择。比如一个压缩文件的程序，既可以选择zip 算法，也可以选择gzip 算法。这些算法灵活多样，而且可以随意互相替换。这种解决方案就是本章将要介绍的策略模式。策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。一、使用策略模式计算奖金很多公司的年终奖是根据员工的工资
js中的策略模式
qq_43389371的博客
08-23 879
定义 策略模式指的是定义一系列的算法，把它们一个个封装起来。将不变的部分和变化的部分隔开是每个设计模式的主题，策略模式也不例外，策略模式的目的就是将算法的使用与算法的实现分离开来。 通常一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体 的算法，并负责具体的计算过程。 第二个部分是环境类 Context，Context 接受客户的请求，随后把请求委托给某一个策略类。 ...
JS策略模式_优化代码实例
比起未来可期，我更喜欢如约而至
11-05 265
策略模式 策略模式：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。 将不变的部分和变化的部分隔开是每个设计模式的主题，策略模式也不例外，策略模式的目的就是将算法的使用与算法的实现分离开来。 一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体 的算法，并负责具体的计算过程。 第二个部分是环境类Context，Context 接受客户的请求，随后 把请求委托给某一个策略类。要做到这点，说明Context中要维持对某个策略对象的引用。 JS设计模式 之 策略模式
js中设计模式策略模式
最新发布
09-03
- *2* [js设计模式之策略模式](https://blog.csdn.net/SK_study/article/details/122404194)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值