欢喜斗地主官网 当前位置:首页>欢喜斗地主官网>正文

欢喜斗地主官网

发布时间:2019-02-16

原标题:javascript设计模式——策略模式

javascript设计模式——策略模式


前面的话

  在程序设计中,常常遇到类似的情况,要实现某一个功能有多种方案可以选择。比如一个压缩文件的程序,既可以选择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

 

当前文章:http://neomi.cn/yijingdeaomi/4956.html

发布时间:2019-02-16 04:47:44

沈阳娱网棋牌pkgame 吉祥棋牌游戏四平麻将 网易手游疯狂赢三张 画笔软件下载 好省电脑版下载 k7豫游棋牌游戏中心 360集结号彩金版手机 tploginapp 万博体育app1.2.7 飞7棋牌

11634 42195 54596 94338 33910 2202496706 25879 82191

责任编辑:宗邓陵纯