javascript设计模式——策略模式

2018-06-24 01:01:41来源：未知阅读 ()

前面的话

　　在程序设计中，常常遇到类似的情况，要实现某一个功能有多种方案可以选择。比如一个压缩文件的程序，既可以选择zip算法，也可以选择gzip算法。这些算法灵活多样，而且可以随意互相替换。这种解决方案就是本文将要介绍的策略模式。策略模式是指定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换

奖金计算

　　策略模式有着广泛的应用。以年终奖的计算为例进行介绍。很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的。例如，绩效为S的人年终奖有4倍工资，绩效为A的人年终奖有3倍工资，而绩效为B的人年终奖是2倍工资

　　下面是一个名为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

　　这段代码十分简单，但是存在着显而易见的缺点：该函数比较庞大，包含了很多if-else语句，这些语句需要覆盖所有的逻辑分支；该函数缺乏弹性，如果增加了一种新的绩效等级C，或者想把绩效S的奖金系数改为5，必须深入calculateBonus函数的内部实现，违反开放封闭原则；算法复用性差，如果在程序其他地方需要重用这些计算奖金的算法，只能选择复制粘贴

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

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函数有可能越来越庞大，而且在系统变化的时候缺乏弹性

　　策略模式指的是定义一系列的算法，把它们一个个封装起来。策略模式的目的就是将算法的使用与算法的实现分离开来

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

　　一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类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 ); // 把计算奖金的操作委托给对应的策略对象
};

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

策略模式

　　上面的代码中，让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

缓动动画

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

　　有一段时间网页游戏非常流行，HTML5版本的游戏可以达到不逊于Flash游戏的效果。用javascript实现动画效果的原理跟动画片的制作一样，动画片是把一些差距不大的原画以较快的帧数播放，来达到视觉上的动画效果。在javascript中，可以通过连续改变元素的某个CSS属性，比如left、top、background-position来实现动画效果

　　目标是编写一个动画类和一些缓动算法，让小球以各种各样的缓动效果在页面中运动。现在来分析实现这个程序的思路。在运动开始之前，需要提前记录一些有用的信息，至少包括以下信息：动画开始时，小球所在的原始位置；小球移动的目标位置；动画开始时的准确时间点；小球运动持续的时间

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

　　在实现完整的功能之前，先了解一些常见的缓动算法，这些算法最初来自Flash，但可以非常方便地移植到其他语言中。这些算法都接受4个参数，这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

<div style="position:absolute;background:blue" id="div">我是div</div>

　　接下来定义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 ){ // (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.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' );

　　通过这段代码，可以看到小球按照期望以各种各样的缓动算法在页面中运动

表单校验

　　在一个Web项目中，注册、登录、修改用户信息等功能的实现都离不开提交表单。在将用户输入的数据交给后台之前，常常要做一些客户端力所能及的校验工作，比如注册的时候需要校验是否填写了用户名，密码的长度是否符合规定，等等。这样可以避免因为提交不合法数据而带来的不必要网络开销。假设正在编写一个注册的页面，在点击注册按钮之前，有如下几条校验逻辑：1、用户名不能为空；2、密码长度不能少于6位；3、手机号码必须符合格式

　　现在编写表单校验的第一个版本

<form action="http://xx.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>

　　这是一种很常见的代码编写方式，它的缺点跟计算奖金的最初版本一模一样：registerForm.onsubmit函数比较庞大，包含了很多if-else语句，这些语句需要覆盖所有的校验规则；registerForm.onsubmit函数缺乏弹性，如果增加了一种新的校验规则，或者想把密码的长度校验从6改成8，都必须深入registerForm.onsubmit函数的内部实现，违反开放封闭原则；算法的复用性差，如果在程序中增加了另外一个表单，这个表单也需要进行一些类似的校验，那很可能将这些校验逻辑复制得漫天遍野

　　下面用策略模式来重构表单校验的代码，很显然第一步要把这些校验逻辑都封装成策略对象

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对象

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 位' );

　　目前表单校验实现留有一点小遗憾：一个文本输入框只能对应一种校验规则，比如，用户名输入框只能校验输入是否为空：

validator.add( registerForm.userName, 'isNonEmpty', '用户名不能为空' );

　　如果既想校验它是否为空，又想校验它输入文本的长度不小于 10 呢？期望以这样的形式进行校验：

validator.add( registerForm.userName, [{ strategy: 'isNonEmpty', errorMsg: '用户名不能为空'}, {
  strategy: 'minLength:6',
  errorMsg: '用户名长度不能小于 10 位'
}] );

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

<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;
        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 位'
        }]);
        var errorMsg = validator.start();
        return errorMsg;
    }
    registerForm.onsubmit = function(){
        var errorMsg = validataFunc();
        if ( errorMsg ){
            alert ( errorMsg );
            return false;
        }

    };
</script>

总结

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

　　当然，策略模式也有一些缺点，但这些缺点并不严重。首先，使用策略模式会在程序中增加许多策略类或者策略对象，但实际上这比把它们负责的逻辑堆砌在Context中要好。其次，要使用策略模式，必须了解所有的strategy，必须了解各个strategy之间的不同点，这样才能选择一个合适的strategy

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有