设计模式——策略模式

1、策略模式的定义是： 定义一系列的算法， 把它们一个个封装起来， 并且使它们可以相互替换。 不变的部分和变化的部分隔开是每个设计模式的主题，策略模式也不例外，策略模式的目的就是将算法的使用与算法的实现分离开来。
2、一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。 第二个部分是环境类 Context，Context接受客户的请求，随后把请求委托给某一个策略类。要做到这点，说明 Context中要维持对某个策略对象的引用。
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 ); // 把计算奖金的操作委托给对应的策略对象
};
3、JavaScript 版本的策略模式
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 ;
};

console.log( calculateBonus( 'S', 20000 ) ); // 输出：80000
console.log( calculateBonus( 'A', 10000 ) ); // 输出：30000
4、多态在策略模式中的体现
通过使用策略模式重构代码，我们消除了原程序中大片的条件分支语句。所有跟计算奖金有
关的逻辑不再放在 Context中，而是分布在各个策略对象中。Context并没有计算奖金的能力，而
是把这个职责委托给了某个策略对象。每个策略对象负责的算法已被各自封装在对象内部。当我
们对这些策略对象发出“计算奖金”的请求时，它们会返回各自不同的计算结果，这正是对象多
态性的体现，也是“它们可以相互替换”的目的。替换 Context中当前保存的策略对象，便能执
行不同的算法来得到我们想要的结果。
5、动画相关
flash移植
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 节点。 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 = 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 );

};
 propertyName：要改变的 CSS属性名，比如'left'、'top'，分别表示左右移动和上下移动。
 endPos： 小球运动的目标位置。
 duration： 动画持续时间。
 easing： 缓动算法。
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 属性值
};
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、表单校验
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 类。Validator 类在这里作为 Context，负责接收用户的请求
并委托给 strategy对象。 在给出 Validator类的代码之前， 有必要提前了解用户是如何向 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;
}
}
};
使用策略模式重构代码之后，我们仅仅通过“配置”的方式就可以完成一个表单的校验，这些校验规则也可以复用在程序的任何地方，还能作为插件的形式，方便地被移植到其他项目中。 在修改某个校验规则的时候，只需要编写或者改写少量的代码。比如我们想将用户名输入框的校验规则改成用户名不能少于 4个字符。可以看到，这时候的修改是毫不费力的。代码如下：
validator.add( registerForm.userName, 'isNonEmpty', '用户名不能为空' );

// 改成：
validator.add( registerForm.userName, 'minLength:10', '用户名长度不能小于 10 位' );
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;
}
}
};
8、给某个文本输入框添加多种校验规则
/***********************策略对象**************************/

    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; 

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

};
9、策略模式优缺点
 策略模式利用组合、委托和多态等技术和思想，可以有效地避免多重条件选择语句。
 策略模式提供了对开放—封闭原则的完美支持，将算法封装在独立的 strategy 中，使得它们易于切换，易于理解，易于扩展。
 策略模式中的算法也可以复用在系统的其他地方，从而避免许多重复的复制粘贴工作。
 在策略模式中利用组合和委托来让 Context拥有执行算法的能力，这也是继承的一种更轻
便的替代方案。
当然，策略模式也有一些缺点，但这些缺点并不严重。
首先，使用策略模式会在程序中增加许多策略类或者策略对象，但实际上这比把它们负责的
逻辑堆砌在 Context中要好。
其次，要使用策略模式，必须了解所有的 strategy，必须了解各个 strategy 之间的不同点，这样才能选择一个合适的 strategy。比如，我们要选择一种合适的旅游出行路线，必须先了解选择飞机、火车、自行车等方案的细节。此时 strategy 要向客户暴露它的所有实现，这是违反最少知识原则的。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 160,108评论 4赞 364
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,699评论 1赞 296
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 109,812评论 0赞 244
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,236评论 0赞 213
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,583评论 3赞 288
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,739评论 1赞 222
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,957评论 2赞 315
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,704评论 0赞 204
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,447评论 1赞 246
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,643评论 2赞 249
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,133评论 1赞 261
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,486评论 3赞 256
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,151评论 3赞 238
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,889评论 0赞 197
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,782评论 2赞 277
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,681评论 2赞 272

推荐阅读更多精彩内容