阅读 159

设计模式之--策略模式

1. 定义

策略模式:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。

2. 使用策略模式计算奖金

策略模式有着广泛的应用。以年终奖的计算为例进行介绍。例如,绩效为S的人年终奖有4倍工资,绩效为A的人年终奖有3倍工资,而绩效为B的人年终奖是2倍工资。提供一段代码,来计算员工的年终奖。

2.1 最初的代码实现

编写一个名为 calculateBonus 的函数来计算每个人的奖金数额。 函数接收两个参数: 员工的工资数额和他的绩效考核等级。

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', 20000) // 输出: 40000
calculateBonus('S', 6000)  // 输出: 24000
复制代码

这段代码十分简单,但是存在着显而易见的缺点。

  • calculateBonus 函数十分庞大,包含了很多 if-else 语句,这些语句需要覆盖所有的逻辑分支。

  • calculateBonus 函数缺乏弹性,如果增加了一种新的绩效等级C,或者想把绩效S的奖金系数改为5,那我们必须深入 calculateBonus 函数的内部实现,这是违反开放-封闭原则的。

  • 算法的复用性差,如果在程序的其他地方需要重用这些计算奖金的算法呢?我们的选择只有复制和粘贴。

2.2 使用组合函数重构代码

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

var performanceS = function(salary){
    return salary * 4;
}

var performanceA = function(salary){
    return salary * 3;
}

var performanceB = function(salary){
    return salary * 2;
}

var calculateBonus = function(performanceLevel, salary) {
    if (performanceLevel === 'S') {
        return performanceS(salary)
    }
    
    if (performanceLevel === 'A') {
        return performanceA(salary)
    }
    
    if (performanceLevel === 'B') {
        return performanceB(salary)
    }
}

calculateBonus('A', 10000) // 输出: 30000
复制代码

程序得到了一定的改善,但非常有限,依然没有解决:calculateBonus 函数有可能越来越大,而且在系统变化的时候缺乏弹性。

2.3 使用策略模式重构代码

策略模式指的是定义一系列的算法,把它们一个个封装起来。将不变的部分和变化的部分隔开是每个设计模式的主题,策略模式也不例外,策略模式的目的就是将算法的使用与算法的实现分离开来。

在这个例子里,算法的使用方式是不变的,都是根据某个算法取得计算后的奖金数额。而算法的实现是各异和变化的,每种绩效对应着不同的计算规则。

一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类,策略类封装了具体的算法,并负责具体的计算过程。第二个部分是环境类Content, Content 接受客户的请求,随后把请求委托给某一个策略类。要做到这点,说明Content中要维持对某个策略对象的引用。

现在用策略模式来重构上面的代码。第一个版本是模仿传统面向对象语言中的实现。先把每种绩效的计算规则都封装在对应的策略类里面:

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;
};

// 接下来定义奖金类Bonus:
var Bonus = function(){
    this.salary = null; //原始工资
    this.strategy = null; //绩效等级对应的策略对象
}

Bonus.prototype.setSalary = function(salary) {
    this.salary = salary; //设置员工的原始工资
}

Bonus.prototype.setStrategy = function(strategy) {
    this.strategy = strategy; //设置员工绩效等级对应的策略对象
}

Bonus.prototype.getBonus = function(){ //取得奖金数额
    if(!this.strategy) {
        throw new Error('未设置strategy属性')
    }
    return this.strategy.calculate(this.salary) //把计算奖金的操作委托给对应的策略对象
}
复制代码

在完成最终的代码之前,回顾下策略模式的思想:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。

这句话如果说得更详细一点,就是: 定义一些列的算法,把它们各自封装成策略类,算法被封装在策略类内部的方法里。在客户对Context发起请求的时候,Context总是把请求委托给这些策略对象中间的某一个进行计算。

现在我们来完成这个例子中剩下的代码。先创建一个bonus对象,并且给bonus对象设置一些原始的数据,比如员工的原始工资数额。接下来把某个计算奖金的策略对象也传入bonus对象内部保存起来。当调用bonus.getBonus()来计算奖金的时候,bonus对象本身并没有能力进行计算,而是把请求委托给了之前保存好的策略对象:

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
复制代码

通过策略模式重构之后,代码变得更加清晰,各个类的职责更加鲜明。但这段代码是基于传统面向对象语言的模仿。

3.JavaScript 版本的策略模式

在前面的例子中,strategy 对象从各个策略类中创建而来,这是模拟一些传统面向对象语言的实现。实际上在JavaScript语言中,函数也是对象,所以更简单和直接的做法是把 strategy 直接定义为函数:

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

同样, Context也没有必要必须用 Bonus 类来表示,我们依然用 calculateBonus 函数充当 Context 来接受用户的请求。

var calculateBonus = function(level, salary) {
    return strategies[level](salary);
}

console.log(calculateBonus('S', 20000)); //输出: 80000 
console.log(calculateBonus('A', 10000)); //输出: 30000 
复制代码

4. 多态在策略模式中的体现

通过使用策略模式重构代码,我们消除了原程序中大片的条件分支语句。所有跟计算奖金有关的逻辑不再放在Context中,而是分布在各个策略对象中。Context并没有计算奖金的能力,而是把这个职责委托给了某个策略对象。每个策略对象负责的算法已被各自封装在对象内部。当我们对这些策略对象发出“计算奖金”的请求时,它们会返回各自不同的计算结果,这正是对象多态性的体现,也是“它们可以互相替换”的目的。替换Context中当前保存的策略对象,便能执行不同的算法来得到我们想要的结果。

5. 使用策略模式实现缓动动画

5.1 实现动画效果的原理

把一些差距不大的原画以较快的帧数播放,来达到视觉上的动画效果。在JavaScript中,可以通过连续改变元素的某个CSS属性,比如:left、top、background-position来实现动画效果。

5.2 思路和一些准备工作

目标: 编写一个动画类和一些缓动算法,让小球以各种各样的缓动效果在页面中运动。

思路:运动开始之前,需要的信息:

  • 动画开始时,小球所在的原始位置;
  • 小球移动的目标位置
  • 动画开始时的准确时间点
  • 小球运动持续的时间

通过 setInterval 创建一个定时器,定时器每隔19ms循环一次。在定时器的每一帧里,把动画已消耗的时间、小球原始位置、小球目标位置和动画持续的总时间等信息传入缓动算法。该算法会通过这几个参数,计算出小球当前应该所在的位置。最后再更新该div对应的CSS属性, 小球就能顺利地运动起来了。

5.3 让小球运动起来

缓动算法: 接受4个参数,含义分别是:动画已消耗的时间、小球原始位置、小球目标位置、动画持续的总时间,返回的值是动画元素应该处在的当前位置。

var tween = {
    linear: function(t,b,c,d) {
        return c*t/d + b;
    },
    easeIn: function(t,b,c,d) {
        return c * (t/= d) * t + b;
    },
    strongEaseIn: function(t,b,c,d) {
        return c * (t/= d) * t * t * t * t+ b;
    },
    strongEaseOut: function(t,b,c,d) {
        return c * ((t = t/d - 1) * t * t * t * t + 1)+ b;
    },
    sineaseIn: function(t,b,c,d) {
        return c * (t/= d) * t * t + b;
    },
    sineaseOut: function(t,b,c,d) {
        return c * ((t= t/ d - 1) * t * t + 1) + b;
    },
}
复制代码

完整的代码

首先在页面中放置一个div:

<body>
    <div style="position:absolute;background:blue" id="div">
        我是div
    </div>
</body>
复制代码

接下来定义Animate类,Animate的构造函数接受一个参数:即将运动起来的dom节点。

var Animate = function(dom) {
    this.dom = dom; // 进行运动的dom节点
    this.startTime = 0; //运动开始时间
    this.startPos = 0; //动画开始时,dom节点的位置,即dom的初始位置
    this.endPos = 0; //动画结束时,dom节点的位置,即dom的目标位置
    this.propertyName = null; //dom节点需要被改变的css属性名
    this.easing = null; //缓动算法
    this.duration = null; // 动画持续时间
}
复制代码

接下来Animate.prototype.start方法负责启动这个动画,在动画被启动的瞬间,要记录一些信息,供缓动算法在以后计算小球当前位置的时候使用。在记录完这些信息后,此方法还要负责启动定时器。

Animate.prototype.start = function(propertyName, endPos, duration, easing) {
    this.startTime = +new Date; // 动画启动时间
    this.startPos = this.dom.getBoundingClientRect()[propertyName]; // dom节点初始位置
    this.propertyName = propertyName; // dom节点需要被改变的css属性名
    this.endPos = endPos; // dom节点目标位置
    this.duration = duration; //动画持续时间
    this.easing = tween[easing]; // 缓动算法
    
    var self = this;
    var timeId = setInterval(function(){ // 启动定时器,开始执行动画
        if(self.step()===false){ //如果动画已结束,则清除定时器
            clearInterval(timeId);
        }
    }, 19);
}
复制代码

Animate.prototype.start方法接受以下4个参数:

  • propertyName: 要改变的CSS属性名,比如:'left'、'top',分别表示左右移动和上下移动。
  • endPos: 小球运动的目标位置
  • duration: 动画持续时间
  • easing: 缓动算法

再接下来是 Animate.prototype.step方法,该方法代表小球运动的每一帧要做的事情。在此处,这个方法负责计算小球的当前位置和调用更新CSS属性值的方法Animate.prototype.update。

Animate.prototype.step = function(){
    var t = +new Date; // 取得当前时间
    if (t >= this.startTime + this.duration) {
        this.update(this.endPos); // 更新小球的CSS属性值
        return false;
    }
    var pos = this.easing(t - this.startTime, this.startPos, this.endPos - this.startPos, this.duration);
    // pos为小球当前位置
    this.update(pos); // 更新小球的CSS属性名
}
复制代码

当前时间大于动画开始时间加上动画持续时间之和,说明动画已经结束,此时要修正小球的位置。因为在这一帧开始之后,小球的位置已经接近了目标位置,但可能不完全等于目标位置。此时我们要主动修正小球的当前位置为最终的目标位置。此外让Animate.prototype.step方法返回false, 可以通知Animate.prototype.start方法清除定时器

最后是负责更新小球CSS属性值的Animate.prototype.update方法:

Animate.prototype.update = function(pos) {
    this.dom.style[this.propertyName] = pos + 'px';
}

// 测试
var div = document.getElementById('div');
var animate = new Animate(div);

animate.start('left', 500, 1000, 'strongEaseOut');
复制代码

6. 更广义的“算法”

策略模式指的是定义一系列的算法,并且把它们封装起来。前面介绍的计算奖金和缓动动画的例子都封装了一些算法。

从定义上看,策略模式就是用来封装算法的。但如果把策略模式仅仅用来封装算法,未免有些大材小用。在实际开发中,通常会把算法的含义扩散开来,使策略模式也可以用来封装一些列的“业务规则”。只要这些业务规则指向的目标一致,并且可以被替换使用,就可以用策略模式来封装它们。

7. 表单校验

使用策略模式来完成表单校验

校验逻辑

  • 用户名不能为空
  • 密码长度不能少于6位
  • 手机号码必须符合格式

7.1 表单校验的第一个版本

没有引入策略模式

<html>
    <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>
复制代码

这是一种很常见的编码格式,它的缺点跟计算奖金的最初版本一摸一样。

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

7.2 用策略模式重构表单校验

第一步:把校验逻辑都封装成策略对象:

var strategies = {
    isNonEmpty: function(val, 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类。Validator 类在这里作为Context,负责接收用户的请求并委托给strategy对象。在给出Validator类的代码之前,先了解用户是如何向Validator类发送请求的:

var validataFunc = function(){
    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; //阻止表单提交
    }
}
复制代码

从这段代码中可以看到,先创建了一个validator对象,然后通过validator.add方法,往validator对象中添加一些校验规则。validator.add 方法接受3个参数,以下面这句代码说明:

 validator.add(registerForm.password, 'minLength:6', '密码长度不能少于6位');
复制代码
  • registerForm.password 为参与校验的input输入框。
  • 'minLength:6'是一个以冒号隔开的字符串。冒号前面的 minLength 代表客户挑选的strategy对象,冒号后面的数字6表示在校验过程中所必须的一些参数。'minLength:6'的意思就是校验 registerForm.password 这个文本输入框的value最小长度为6。如果这个字符串中不包含冒号,说明校验过程中不需要额外的参数信息,比如‘isNonEmpty’。
  • 第3个参数是当校验未通过时返回的错误信息。

当我们往 validator 对象里添加完一系列的校验规则之后,会调用validator.start()方法来启动校验。如果validator.start()返回了一个确切的errorMsg字符串当作返回值,说明该次校验没有通过,此时需让 registerForm.onsubmit 方法返回false来阻止表单的提交。

最后是Validator 类的实现:

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(); // 用户挑选的strategy
        ary.unshift(dom.value); // 把input的value添加进参数列表
        ary.push(errorMsg); // 把errorMsg添加进参数列表
        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;
        }
    }
}
复制代码

使用策略模式重构代码之后,仅仅通过“配置”的方式就可以完成一个表单的校验,这些校验规则也可以复用在程序的任何地方,还能作为插件的形式,方便地被移植到其它项目中。

在修改校验规则的时候,只需要编写或者改写少量的代码。比如想将用户名输入框的校验规则改成用户名不能少于10个字符,代码如下

validator.add(registerForm.userName, 'isNonEmpty', '用户名不能为空');
// 改成
validator.add(registerForm.userName, 'minLength:10', '用户名长度不能小于10位');
复制代码

7.3 给某个文件输入框添加多种校验规则

<html>
   <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(val, 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;
        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(dom.value);
                   strategyAry.push(errorMsg);
                   return strategies[strategy].apply(dom, strategyAry);
               })
            })(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:10',
            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>  
复制代码

5.8 策略模式的优缺点

优点:

  • 策略模式利用组合、委托和多态等技术和思想,可以有效地避免多重条件选择语句
  • 策略模式提供了对开放-封闭原则的完美支持,将算法封装在独立的strategy中,使得它们易于切换,易于理解,易于扩展
  • 策略模式中的算法也可以复用在系统的其他地方,从而避免许多重复的复制粘贴工作
  • 在策略模式中利用组合和委托来让Context拥有执行算法的能力,这也是继承的一种更轻便的替代方案

缺点:

  • 使用策略模式会在程序中增加许多策略类或者策略对象,但实际上这比把它们负责的逻辑堆砌在Context中要好

  • 使用策略模式,必须了解所有的strategy, 必须了解各个strategy之间的不同点,这样才能选择一个合适的 strategy 。比如, 我们要选择一种合适的旅游出行路线,必须先了解选择飞机、火车、自行车等方案的细节。此时strategy要向客户暴露它的所有实现,这时违反最少知识原则的。

5.9 一等函数对象与策略模式

前面的几个策略模式示例,既有模拟传统面向对象语言的版本,也有针对JavaScript语言的特有实现。在以类为中心的传统面向对象语言中,不同的算法或者行为被封装在各个策略类中,Context将请求委托给这些策略对象,这些策略对象会根据请求返回不同的执行结果,这样便能表现出对象的多态性

在函数作为一等对象的语言中,策略模式是隐形的。strategy就是值为函数的变量。在JavaScript中,除了使用类来封装算法和行为之外,使用函数当然也是一种选择。这些”算法“可以被封装到函数中并且四处传递,也就是我常说的”高阶函数“。实际上在JavaScript这种将函数作为一等对象的语言里,策略模式已经融入到了语言本身当中,我们经常用高阶函数来封装不同的行为,并且把它传递到另一个函数中。当我们对这些函数发出“调用”的信息时,不同的函数会返回不同的执行结果。在JavaScript中,“函数对象的多态性”来得更加简单。

在JavaScript中, 策略类往往被函数所代替,这时策略模式就成为一种“隐形”的模式。

文章分类
前端