Skip to content

Latest commit

 

History

History
599 lines (488 loc) · 25 KB

设计模式——策略模式.md

File metadata and controls

599 lines (488 loc) · 25 KB
title date tags summary
设计模式——策略模式
2018-10-14
DesignMode
Javascript
策略模式的定义就是:定义一系列算法,把他们一个个封装起来,并且使他们可以互相替换。

开场白

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

PS:相互替换这句话很大程度上是相对于静态类型语言而言的,因为静态类型语言中没有类型检查机制,所以各个策略类需要实现同样的接口。当它们的真正类型被隐藏在接口后面时,它们才能被相互替换。 而在 JavaScript 这种“类型模糊”的语言中没有这种困扰,任何对象都可以被替换使用。因此, JavaScript中的“可以相互替换使用”表现为它们具有相同的目标和意图

策略模式在开发中有着广发的应用,下面举一个计算年终奖的例子来一步一步的阐述策略模式。

例如,年终奖发放中,绩效为S的人年终有 4 倍工资,绩效为 A 的人年终奖有 3 倍工资,而绩效为 B 的人年终奖是 2 倍工资。假设财务部要求我们提供一段代码,来方便他们计算员工的年终奖。

最初代码的实现

var calculateBounts = (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

这样的代码虽然简单,但是不可避免的也存在着三个显而易见的缺点

  1. calculateBonus 函数比较庞大,包含了很多 if-else 语句,这些语句需要覆盖所有的逻辑 分支。
  2. calculateBonus 函数缺乏弹性,如果增加了一种新的绩效等级 C,或者想把绩效 S 的奖金 系数改为 5, 那我们必须深入 calculateBonus 函数的内部实现,这是违反开放封闭原则的。
  3. 算法的复用性差,如果在程序的其他地方需要重用这些计算奖金的算法呢?我们的选择 只有复制和粘贴。

因此,使用组合函数来重构这段代码

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

这种改善实际上非常有限,我们依然没有解决最重要的问题,caculateBouns函数有可能会越来越庞大,而且在系统变化的时候缺乏弹性。

使用策略模式重构代码

就如开头说的那样,策略模式通过定义一系列的算法,并把他们都封装起来,将不变的部分和变化的部分分隔开是每个设计模式不变的主题

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

// 首先把每种绩效的计算规则都封装在对应的策略类里面:
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(){ // 取得奖金数额
	return this.strategy.calculate( this.salary ); // 把计算奖金的操作委托给对应的策略对象
}

/* 我们定义了一系列的算法,把他们都各自封装成策略类,算法被封装在策略类内部的方法中。
 * 在客户对Context发起请求的时候,Context总是把请求委托给这些策略对象中间的某一个进行计算。
 * 当调用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

js本土化的策略模式

​ 策略模式的核心在于,==将算法的使用与算法的实现分离开来==,一个基于策略模式的程序至少由两部分组成——第一部分是一组策略类,策略类封装了具体的算法,并负责具体的计算过程。第二部分是环境类ContextContext接受客户的请求,随后把请求委托给某一个策略类。要做到这点,说明Context中要维持对某个策略对象的引用。

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

const strategies = {
    S(salary){
        return salary * 4;
    },
    A(salary){
        return salary * 3;
    },
    B(salary){
        return salary * 2;
    }
}
// 同样, Context 也没有必要必须用 Bonus 类来表示,我们依然用 calculateBonus 函数充当Context 来接受用户的请求。经过改造,代码的结构变得更加简洁:
const calculateBonus = (level, salary)=>{
    return strategies[level](salary);
}

console.log( calculateBonus( 'S', 20000 ) ); // 输出: 80000
console.log( calculateBonus( 'A', 10000 ) ); // 输出: 3000

多态在策略模式中的体现

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

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

​ 如果我们明白了怎样让一个小球运动起来,那么离编写一个完整的游戏就不遥远了,剩下的只是一些把逻辑组织起来的体力活。本节并不会从头到尾地编写一个完整的游戏,我们首先要做的是让一个小球按照不同的算法进行运动。

​ 在javascript中,通过连续改变元素的某个css属性,比如 lefttopbackground-position来实现动画效果。图 5-1 就是通过改变节点的background-position,让人物动起来的。

通过改变元素的background-position来显示雪碧图的不同部分,让游戏中的隆动起来

​ 在实现的完整的功能之前,先了解一些常见的缓动算法,这些算法最初来自Flash,可以非常方便地移植到其他语言中。

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

// t:已消耗的时间、b:小球的原始位置、c:小球的目标位置、d:动画持续的总时间
var tween = {
    linear(t, b, c, d){
        return c * t / d + b;
    },
    easeIn(t ,b, c, d){
    	return c * (t /= d) * t + b;
	},
    strongEaseIn(t, b, c, d){
		return c * ( t /= d ) * t * t * t * t + b;
	},
	strongEaseOut(t, b, c, d){
		return c * ( ( t = t / d - 1) * t * t * t * t + 1 ) + b;
	},
	sineaseIn( t, b, c, d ){
		return c * ( t /= d) * t * t + b;
	},
	sineaseOut(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 节点。Animate类的代码如下:

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){
    // propertyName:要改变的 CSS 属性名,比如'left'、 'top',分别表示左右移动和上下移动。
	// 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.step 方法,该方法代表小球运动的每一帧要做的事情。在此处,这个方法负责计算小球的当前位置和调用更新 CSS 属性值的方法 Animate.prototype.update。

Animate.prototype.step = function(){
	var t = +new Date; // 取得当前时间
	if ( t >= this.startTime + this.duration ){ // (1)
		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 属性值
};

在这段代码中, (1)处的意思是,如果当前时间大于动画开始时间加上动画持续时间之和,说明动画已经结束,此时要修正小球的位置。因为在这一帧开始之后,小球的位置已经接近了目标位置,但很可能不完全等于目标位置。此时我们要主动修正小球的当前位置为最终的目标位置。此外让 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');
// animate.start( 'top', 1500, 500, 'strongEaseIn' )

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

​ 在前端中,经常要对表单进行验证,以避免不必要的网络开销

​ 下面是一个很常见的表单校验,他有如下几条校验逻辑

  • 用户名不能为空。
  • 密码长度不能少于 6 位。
  • 手机号码必须符合格式。
<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 函数的内部实现,这是违反开 放—封闭原则的。
  • 算法的复用性差,如果在程序中增加了另外一个表单,这个表单也需要进行一些类似的 校验,那我们很可能将这些校验逻辑复制得漫天遍野。

用策略模式重构表单校验

​ 下面将用策略模式来重构表单校验的代码,显然,我们第一步是要讲这些校验逻辑都封装成策略对象:

// 表单验证的第一个版本
var strategies = {
    isNonEmpty(value, errorMsg){ // 不为空
        if(value === ''){
            return errorMsg;
        }
    },
    minLength(value, length, errorMsg){	//限制最小长度
        if(value.length < length){
            return errorMsg;
        }
    },
    isMobile(value, errorMsg){ // 手机号码格式
        if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){
            return errorMsg;
        }
    }
    
    
}

​ 接下来我们准备实现一个Validator类。Validator类在这里作为Context,负责接收用户的请求并委托给strategy对象。

​ 在给出Validator类的代码之前,有必要提前了解用户时如何向Validator类发送请求的:

var validateFunc = 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(){
    if(errorMsg){ // 如果errorMsg有确切的返回值,说明未通过校验
        alert(errorMsg);
        return false; // 阻止表单提交
    }
}

首先我们创建了一个Validator对象,然后通过Validator.add方法,往Validator对象添加了一些校验规则。

Validator.add方法接受3个参数

  • 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 arr = rule.split(':'); // 把strategy和参数分开
    this.cache.push(function(){ // 把校验的步骤用空函数包装起来,并且放入cache数组中
        var strategy = arr.shift(); // 获取用户挑选的strategy
        var unshift(dom.value); //把input的value添加进参数列表
        arr.push(errorMsg); // 将errorMsg也添加进参数列表
        
        return strategies[strategy].apply(dom, arr);
    })
}
// 给`Validator`类添加start方法
Validator.prototype.start = function(){
    for (var i=0,validatorFunc;validatorFunc = this.cache[i++];){
        var msg = validatorFunc(); // 开始校验,并取得校验后的返回信息
        if(msg){ // 如果有确切的返回值,说明校验没有通过
            return msg;
        }
    }
}

​ 使用策略模式重构代码之后,我们仅仅通过“配置”的方式就可以完成一个表单的校验,这些校验规则也可以复用在程序的任何地方,还能作为插件的形式,方便地被移植到其他项目中。 ​ 在修改某个校验规则的时候,只需要编写或者改写少量的代码。比如我们想将用户名输入框的校验规则改成用户名不能少于 4 个字符。可以看到,这时候的修改是毫不费力的。代码如下:

validator.add(registerForm.userName, 'isNonEmpty', '用户名不能为空');
validator.add(registerForm.userName, 'minLength:4', '用户名长度不能小于4位');

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

实际的开发中,一个文本输入框不止对应一种校验规则,经常会有多种校验规则一起限制,上文的代码中,一个输入框只能对应一种校验规则,我们如果想实现下方形式进行校验的话,需要改下代码:

// 使用这种形式增加校验规则
validator.add(registerForm.userName,[
    {
        strategy: 'isNonEmpty',
        errorMsg: '用户名不能为空'
    },
    {
        strategy: 'minLength:6',
        errorMsg: '用户名长度不能小于10位'
    }
])

​ 下面提供的代码可用于一个文本输入框对应多种校验规则:

<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( 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;
            rules.forEach(rule=>{
                (function(rule){ // 这里用了一个自执行函数来转化
                    var strategyArr = rule.strategy.split(':');
                    var errorMsg = rule.errorMsg;
                    self.cache.push(function(){
                        var strategy = strategyArr.shift(); // 得到策略方法
                        strategyArr.unshift(dom.value);
                        strategyArr.push(errorMsg);
                        // 执行策略对象中的对应策略方法
                        return strategies[strategy].apply(dom, strategyArr);
                    })
                })(rule);
            })
        };
        Validator.prototype.start = function(){
            this.cache.forEach(validatorFunc=>{
                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>

策略模式的优缺点

优点:

  • 策略模式利用组合、委托和多态等技术和思想,可以有效地避免多重条件选择语句。

  • 策略模式提供了对开放—封闭原则的完美支持,将算法封装在独立的strategy 中,使得它们易于切换,易于理解,易于扩展。

  • 策略模式中的算法也可以复用在系统的其他地方,从而避免许多重复的复制粘贴工作。

  • 在策略模式中利用组合和委托来让 Context 拥有执行算法的能力,这也是继承的一种更轻便的替代方案。

    缺点:

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

  • 要使用策略模式,必须了解所有的strategy,必须了解每个strategy之间的不同点,这样才能选择一个合适的strategy。因为strategy向用户暴露了它的所有实现,这显然违反了最少知识原则的。

一等函数对象与策略模式

​ 在函数作为一等对象的语言中,策略模式是隐形的。strategy就是值为函数的变量。在js中,除了使用类来封装算法和行为之外,使用函数当然也是一种选择。这些“算法”可以被封装到函数中并且四处传递,也就是我们常说的“高阶函数”。

​ 实际上js这种将函数作为一等对象的语言里,策略模式已经融入到了语言本身当中,我们经常使用高阶函数来封装不同的行为,并且把它传递到另一个函数中。当我们对这些函数发出调用的消息时,不同的函数会返回不同的执行结果。在js中,“函数对象的多态性”来得更加简单。

​ 在前面的学习中,为了清除地表示这是一个策略模式,我们特意使用了strategies这个名字,如果去掉strategies,我们还能认出这是一个策略模式的实现吗?

const S = salary => salary*4;
const A = salary => salary*3;
const B = salary => salary*2;
const calculateBonus = (func, salary) => func(salary);

calculateBonus(S, 10000); // 输出:40000

小结

​ 在js中,策略模式成为了一种“隐形”的模式,策略类往往为函数所代替。从头到尾地了解了策略模式,不仅可以让我们对该模式有更加透彻的了解,也可以使我们明白函数的好处。