文档章节

javascript的策略模式(一)

stone_
 stone_
发布于 2016/05/17 17:54
字数 695
阅读 37
收藏 0

在程序设计中我们往往会遇到实现某一功能有多种方案可以选择。比如一个压缩算法,我们可以选择zip算法,也可以选择gzip算法。这些算法灵活多样,而且可以随意互相替换。

实例:按照不同等级计算奖金

var performanceS= function(salary){
   return salary*4;
}
var performanceA= function(salary){
   return salary*3;
}
var performanceB= function(salary){
   return salary*2;
}
varcalculateBonus = function(performanceLevel,salary){
   if(performanceLevel==”S”){
     return performanceS(salary);
   }
   if(performanceLevel==”A”){
     return performanceA(salary);
   }
   if(performanceLevel==”B”){
     return performanceB(salary);
   }
}
calculateBonus(‘A’,10000);

缺点:

l   if-else分支多,这些分支要覆盖所有的逻辑

l   calculateBonus函数缺乏弹性,如果增加了一种新的绩效等级C,或是把绩效S的奖金系数改为5,那么我们必须深入calculateBonus函数的内部实现,这违反开放—封闭原则

l   算法的复用性差,如果在程序的其他地方需要重用这些计算奖金的算法呢?我们只有复制和粘贴。

用策略模式修改

var strategies = {
 “S”:function(salary){
   return salary*4;
 },
 “A”:function(salary){
   return salary*4;
 },
 “B”:function(salary){
   return salary*4;
 }
};
var calculateBonus =function(level,salary){
  return strategies[level](salary);
}
console.log(calculateBonus(‘S’,20000)); //输出80000
console.log(calculateBonus(‘S’,10000)); //输出30000

 策略模式的目的就是将算法的使用与算法的实现分离开来。

因此一个策略模式的程序至少由两部分组成

第一个部分是一组策略类,它封装了具体的算法,并负责具体的计算过程。

第二个部分是环境类Context,Context接受客户请求,随后把请求委托给一个策略类。要做到这一点,说明Context中要维持对某个策略对象的引用

应用实例:表单验证。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<head>
<body>  
   <form action='' id='registerForm' method='post'>  
       请输入用户名:<input type='text' name='userName' /><br>  
       请输入密码:<input type='text' name = 'password' /> <br> 
       请输入手机号码:<input type='text' name = 'phoneNumber' />  <br>
		<input type='submit' value = '提交' />
  </form>  
  <script src="index.js"></script>
</body>  
</html>

index.js

//javascript

var strategies = {
	isNoEmpty: 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;
		}
	}

}


var Validator = function(){
	this._cache = [];
}

Validator.prototype.add = function(dom, rules){
	var self = this;
	for(var i=0; i<rules.length; 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);
			});
		})(rules[i])
	
	}

};

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();
	console.log(validator);
	validator.add(registerForm.userName, [
			{  
				strategy:'isNoEmpty',  
				errorMsg:'用户名不能为空'  
			},
			{  
				strategy:'minLength:10',  
				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;
	}


}

 

© 著作权归作者所有

stone_
粉丝 21
博文 221
码字总数 163611
作品 0
洛阳
程序员
私信 提问
《JavaScript设计模式与开发实践》原则篇(2)—— 最少知识原则

最少知识原则(LKP)说的是一个软件实体应当尽可能少地与其他实体发生相互作用。这 里的软件实体是一个广义的概念,不仅包括对象,还包括系统、类、模块、函数、变量等。 单一职责原则指导我们...

嗨呀豆豆呢
2018/12/30
0
0
《JavaScript设计模式与开发实践》最全知识点汇总大全

系列文章: 《JavaScript设计模式与开发实践》基础篇(1)—— this、call 和 apply 《JavaScript设计模式与开发实践》基础篇(2)—— 闭包和高阶函数 《JavaScript设计模式与开发实践》模式...

嗨呀豆豆呢
01/04
0
0
《JavaScript设计模式与开发实践》模式篇(12)—— 装饰者模式

在传统的面向对象语言中,给对象添加功能常常使用继承的方式,但是继承的方式并不灵活, 还会带来许多问题:一方面会导致超类和子类之间存在强耦合性,当超类改变时,子类也会随之 改变;另一方...

嗨呀豆豆呢
2018/12/25
0
0
JavaScript 中常见设计模式-单例模式

     单例模式两个条件   确保只有一个实例   可以全局访问   适用   适用于弹框的实现,全局缓存   实现单例模式      JavaScript 中的单例模式   因为 JavaScript 是无...

webstack前端栈
2018/05/19
0
0
《JavaScript设计模式与开发实践》模式篇(6)—— 命令模式

命令模式是最简单和优雅的模式之一,命令模式中的命令(command)指的是一个执行某些特定事情的指令。 应用场景 有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求...

嗨呀豆豆呢
2018/12/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
今天
6
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
今天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
今天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
今天
17
0
浅谈java过滤器Filter

一、简介 Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码、做一些业务逻辑判断如是否有权限访问页面等。其工作原理是,只要你在web.xml...

青衣霓裳
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部