怎样用Javascript实现策略模式
概述
策略模式是JavaScript设计模式中行为型的设计模式；
定义：
定义一系列算法，并将这些算法各自封装成策略类（方法），然后将不变的部分和变化的部分分离开来，并且这些算法可以相互替换
白话解释：
实际上所谓的策略模式就是指根据不同的策略来执行不同的方法，是不是很类似与if-else分支判断；但是策略模式是用来解决多重条件判断语句的；
代码实现
需求：
年终将至，某公司决定提前发年终奖，但是年终奖的计算是有一定的规则的，年终奖的多少跟绩效考核密切相关；所以某公司的年终奖方案是这样的：
绩效考核为S的员工，年终奖是个人月工资的4倍；
绩效考核为A的员工，年终奖是个人月工资的3倍；
绩效考核为B的员工，年终奖是个人月工资的2倍；
看到这里让你开始编写程序，一般大部分的代码是这样的：
function calculateBonus(level,salary){
if(level === 'S'){
return salary*4;
}
if(level === 'A'){
return salary*3
}
if(level === 'B'){
return salary*2
}
}
console.log(calculateBonus("S",14000)); //56000
console.log(calculateBonus("A",10000)); //30000
console.log(calculateBonus("B",5000)); //10000
上面的代码用来解决当前需求固然没有问题，但是在程序设计的角度来说，上面的代码是还有可以优化的点的；因为该方法相对来说比较庞大，有很多的分支判断，缺乏弹性；如果年终奖方案改了，需要增加一个C方案呢？那是不是又得去方法里面加分支判断呢？这就违反了开放封闭原则；
优化：
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](salary);
}
console.log(calculateBonus("S",14000)); //56000
console.log(calculateBonus("A",10000)); //30000
console.log(calculateBonus("B",5000)); //10000
通过优化上述代码之后，上面就是用策略模式来进行改造代码的，我们可以看到我们定义了一个策略对象，然后calculateBonus根据用户传入的等级和工资即可算出年终奖的金额，经过改造之后，代码的结构变得更加简洁；
在web开发中，登录页的注册、登录等功能都是需要进行表单提交的；然而在提交的过程中肯定要进行校验和筛选，不符合校验规则的将不能直接提交；在没有学习设计模式之前我们的校验可能也是跟上面一样都是多重if分支判断，然后我们现在用策略模式来实现一个表单校验：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<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>
</body>
<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 ){
//将校验规则对象中的strategy属性的值进行分割
var strategyAry = rule.strategy.split( ':' );
var errorMsg = rule.errorMsg;
self.cache.push(function(){
//将校验规则对象中的strategy属性的第一个值返回回来装进strategy中
var strategy = strategyAry.shift();
//组成参数
strategyAry.unshift( dom.value );
//组装参数
strategyAry.push( errorMsg );
//找到策略对象执行方法装进cache变量中
return strategies[ strategy ].apply( dom, strategyAry );
});
console.log(strategyAry);
})( rule )
}
};
//开始校验方法
Validator.prototype.start = function(){
for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
//循环cache执行方法校验
var errorMsg = validatorFunc();
//如果执行策略对象方法中返回了errorMsg，就说明方法已经报错（没有通过校验规则）
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();
//如果errorMsg存在，即代表校验没有通过
if ( errorMsg ){
alert ( errorMsg );
return false;
}
};
</script>
</html>
我们可以通过策略模式来解决表单校验大规模重复if-else判断等问题，上面的代码注释我已经给的很详细了，学习设计模式一定要去细品代码，学习思路；反正策略模式的一个主要思路就是通过定义一系列的算法，然后传入参数，根据不同的参数来执行不同的算法规则；
总结
优点：
1、利用组合、委托和多态技术和思想，可以避免多重条件选择语句；
2、将算法封装在独立的策略类里，使得易于切换，易于理解，易于扩展；
3、策略模式可以复用在系统的其他地方，从而避免重复的复制粘贴工作；
缺点：
1、程序中会增加许多策略类或者策略对象；
2、使用策略类必须要对所有的策略类算法了解清楚，否则不知道怎么选择。
以上就是JavaScript策略模式的详细内容，更多关于JavaScript策略模式的资料请关注我们其它相关文章！
相关推荐
-
js校验表单后提交表单的三种方法总结
第一种: 复制代码 代码如下: <script type="text/javascript"> function check(form) { if(form.userId.value=='') { alert("请输入用户帐号!"); form.userId.focus(); return false; } if(fo
-
JavaScript设计模式之策略模式实现原理详解
俗话说,条条大路通罗马.在现实生活中,我们可以采用很多方法实现同一个目标.比如我们先定个小目标,先挣它一个亿.我们可以根据具体的实际情况来完成这个目标. 策略模式的定义 定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 举个例子:表单校验 在一个Web项目中,注册.登录等功能的实现都离不开表单提交.表单校验也是前端常常需要做的事.假设我们正在编写一个注册的页面,在点击提交按钮之前,有如下几条校验逻辑: 用户名不可为空,不允许以空白字符命名,用户名长度不能小于2位. 密码长度不能小
-
javascript将异步校验表单改写为同步表单
同步表单校验的缺点 响应错误信息时,需要重新加载整个页面(虽然有缓存,客户端仍然需要通过http协议对比每个文件是否有更新,以保持文件最新) 服务器响应错误以后,用户之前所输入的信息全部丢失了,用户需要从头开始填写(部分浏览器帮我们缓存了这些数据) 异步校验表单的初衷 提升用户体验 最大化减少网络请求,减轻服务器压力 下面我们看一个常见的异步表单校验(校验工号在后台是否存在,存在为有效工号) 校验工号 复制代码 代码如下: var BASE_PATH = '${rc.contextPath}';
-
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
本文实例讲述了JS表单验证插件之数据与逻辑分离操作.分享给大家供大家参考,具体如下: 之前已经写过一个表单验证插件了,为什么还会重复造轮子呢?第一个问题是代码结构比较乱,虽然通过原型继承的写法将处理分层,但业务逻辑和数据结构混杂在一起,导致第二个问题--可扩展性和灵活性差. 认真分析表单验证的过程,可以分为两步:怎么验证和如何验证.怎么验证是数据层面的问题,如何验证是业务逻辑层面的问题. 点击:这里 查看源码 策略模式将对象和规则区分 如何让算法(数据层)和对象(逻辑层)分开来,使得算法可以独立
-
javascript设计模式 – 策略模式原理与用法实例分析
本文实例讲述了javascript设计模式 – 策略模式原理与用法.分享给大家供大家参考,具体如下: 介绍:策略模式中可以定义一些独立的类来封装不同的算法,每一个类封装一种具体的算法.在这里,每一种算法的封装都可以称之为一种策略.策略模式的主要目的是将算法的定义与使用分开. 定义:定义一系列算法类,将每一个算法封装起来,并让它们可以相互替换.策略模式让算法独立与使用它的客户而变化,也称为政策模式.策略模式是一种对象行为型模式. 场景:使用策略模式实现一个加减乘除的工具类,将四个算法进行封装. 示
-
轻松掌握JavaScript策略模式
定义:定义一系列的算法,把它们一个个封装成函数,也可把它们作为属性统一封装进一个对象,然后再定义一个方法,该方法可根据参数自动选择执行对应的算法. 一般用于在实现一个功能时,有很多个方案可选择的情况. 例子1:根据员工薪水salary.绩效等级S.A.B.C,来计算年终奖 //封装了所有算法的策略对象 var strategies = { 'S': function(salary){ return salary*4; }, 'A': function(salary){ return salary
-
从表单校验看JavaScript策略模式的使用详解
众所周知的是,表单确实在前端,唔,或者说在网页中占有不小的比重.事实上,几乎每一个中大型网站都会有"登录注册"以验证用户信息.防止一些不可名状的隐患... 那么表单的优劣就成了前端开发者急需解决的问题.其实我更愿意称为"代码的可读性"或"可复用性"以及"是否冗杂". 表单也有"优劣"?你在开玩笑嘛? 我想你可以认真看下下面的代码,它用到了一些"新知识": <form action=
-
如何使用JavaScript策略模式校验表单
概述 Web项目中,登录,注册等等功能都需要表单提交,当把用户的数据提交给后台之前,前端一般要做一些力所能及的校验,比如是否填写,填写的长度,密码是否符合规范等等,前端校验可以避免提交不合规范的表单. 假如我们有一个表单,校验逻辑如下: 用户名不为空 密码长度不低于6位 手机号符合格式 未使用策略模式的表单校验 当没有使用策略模式时,即我们首先会想到的校验模式通常是这样的: <body> <form id="registerForm"> <label fo
-
JS设计模式之策略模式概念与用法分析
本文实例讲述了JS设计模式之策略模式概念与用法.分享给大家供大家参考,具体如下: 策略模式的概念引用: 在软件开发中也常常遇到类似的情况,实现某一个功能有多种算法或者策略,我们可以根据环境或者条件的不同选择不同的算法或者策略来完成该功能. 如查找.排序等,一种常用的方法是硬编码(Hard Coding)在一个类中,如需要提供多种查找算法,可以将这些算法写到一个类中,在该类中提供多个方法,每一个方法对应一个具体的查找算法:当然也可以将这些查找算法封装在一个统一的方法中,通过if-else-或者ca
-
javascript设计模式--策略模式之输入验证
策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化独立于使用算饭的客户. 先定义一个简单的输入表单: <!DOCTYPE html> <html> <head> <meta charset="utf-"> <style> .form{ width: px; height: px; #margin: px auto; } .form-item-label{ width:px; text-align:
-
JavaScript设计模式策略模式案例分享
前言 策略设计模式就是指一个问题匹配多个解决方法,不一定要用到哪一个,而且有可能随时增加多个方案 比如我们去买书,书店都会搞一些优惠活动,满100减20,满200减50,八折优惠这些,但是优惠活动源源不止这些,后期会陆续添加优惠活动,比如双11活动打七折,等到双11活动过去之后打七折活动还需要取消 我们先不用策略设计模式进行实现计算折扣后价格,我们声明一个方法,里面接受俩个参数,这俩个参数一个是价格一个是折扣种类,然后在方法里面使用if语句判断折扣种类计算价格,如果没有折扣就是原价,最后把计算过
-
学习JavaScript设计模式(策略模式)
何为策略?比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 1.策略模式的定义 如果没有时间但是不在乎钱,可以选择坐飞机. 如果没有钱,可以选择坐大巴或者火车. 如果再穷一点,可以选择骑自行车. 在程序设计中,我们也常常遇到类似的情况,要实现某一个功能有多种方案可以选择.比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法. 定义:策略模式定义一系列的算法,分别封装起来,让他们之间可以互相替换,此模式让算法的变化独立于使用算饭的客户. 策略模式有着广泛的应用.本
-
详解JavaScript的策略模式编程
我喜欢策略设计模式.我尽可能多的试着去使用它.究其本质,策略模式使用委托去解耦使用它们的算法类. 这样做有几个好处.他可以防止使用大条件语句来决定哪些算法用于特定类型的对象.将关注点分离开来,因此降低了客户端的复杂度,同时还可以促进子类化的组成.它提高了模块化和可测性.每一个算法都可以单独测试.每一个客户端都可以模拟算法.任意的客户端都能使用任何算法.他们可以互调.就像乐高积木一样. 为了实现策略模式,通常有两个参与者: 该策略的对象,封装了算法. 客户端(上下文)对象,以即插即用的方式能使用任
-
怎样用Javascript实现策略模式
概述 策略模式是JavaScript设计模式中行为型的设计模式: 定义: 定义一系列算法,并将这些算法各自封装成策略类(方法),然后将不变的部分和变化的部分分离开来,并且这些算法可以相互替换 白话解释: 实际上所谓的策略模式就是指根据不同的策略来执行不同的方法,是不是很类似与if-else分支判断:但是策略模式是用来解决多重条件判断语句的: 代码实现 需求: 年终将至,某公司决定提前发年终奖,但是年终奖的计算是有一定的规则的,年终奖的多少跟绩效考核密切相关:所以某公司的年终奖方案是这样的: 绩效
-
JavaScript设计模式之策略模式详解
在程序设计中,我们也常常遇到这种情况,要实现某一个功能我们有很多种算法可以实现. 这些算法灵活多样,而且可以随意互相替换.这种解决方案就是所谓的策略模式. 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. /* * pre:策略模式 * 示例:公司计算奖金,分A.B.C 三种绩效,计算方式如下 * 绩效为A,奖金乘以系数5 * 绩效为B,奖金乘以系数4 * 绩效为C,奖金乘以系数3 */ //-------- 示例1 ---------- var calcula
-
学习JavaScript设计模式之策略模式
把不变的部分和变化的部分隔开是每个设计模式的主题. 条条大路通罗马.我们经常会遇到解决一件事情有多种方案,比如压缩文件,我们可以使用zip算法.也可以使用gzip算法.其灵活多样,我们可以采用策略模式解决. 一.定义 定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 基于策略类模式的程序至少由两部分组成.第一个部分是一组策略类,策略类封装了具体的算法,并负责具体的计算过程.第二个部分是环境类Context,Context接收客户的请求,随后把请求委托给某一个策略类. 二.示例 计
-
利用策略模式与装饰模式扩展JavaScript表单验证功能
简单的表单验证 html结构 <!-- validata.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Validata</title> </head> <body> <form id="form"> <labe
-
javascript设计模式之策略模式学习笔记
1. 理解javascript中的策略模式 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 使用策略模式的优点如下: 优点: 1. 策略模式利用组合,委托等技术和思想,有效的避免很多if条件语句. 2. 策略模式提供了开放-封闭原则,使代码更容易理解和扩展. 3. 策略模式中的代码可以复用. 一:使用策略模式计算奖金: 下面的demo是我在书上看到的,但是没有关系,我们只是来理解下策略模式的使用而已,我们可以使用策略模式来计算奖金问题: 比如公司的年终奖是根据