Skip to content

Commit 6029de5

Browse files
WangXiaoyuggWangXiaoyugg
committed
策略模式
1 parent b5caacc commit 6029de5

File tree

2 files changed

+250
-0
lines changed

2 files changed

+250
-0
lines changed

‎five-chapter/strategy.html

+189
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>strategy</title>
6+
</head>
7+
<body>
8+
<!-- <div style="position: absolute;background: blue" id=div>我是div</div> -->
9+
10+
<form action="" id=registForm method="post">
11+
<p>请输入用户名 ： <input type="text" name=username></p>
12+
<p>请输入密码 ： <input type="text" name=password></p>
13+
<p>请输手机号码 ： <input type="text" name=phoneNumber></p>
14+
<p><button>提交</button></p>
15+
</form>
16+
<script>
17+
18+
//表单验证的一般方法
19+
// var registForm = document.getElementById('registForm');
20+
21+
// registForm.onsubmit = function(){
22+
// if(registForm.username.value === ''){
23+
// alert('用户名不能为空')
24+
// return false;
25+
// }
26+
// if(registForm.password.value.length < 6){
27+
// alert('密码长度不能小于6位')
28+
// return false;
29+
// }
30+
// if( !/^1[3|5|8][0-9]{9}$/.test(registForm.phoneNumber.value)){
31+
// alert('手机号码格式不正确')
32+
// return false;
33+
// }
34+
// }
35+
36+
var strategies = {
37+
isNonEmpty:function(value,errMsg){
38+
if(value === '') return errMsg
39+
},
40+
minLength:function(value,length,errMsg){
41+
if(value.length < length ) return errMsg;
42+
},
43+
isMobile:function(value,errMsg){
44+
if(!/^1[3|5|8][0-9]{9}$/.test(value)) return errMsg;
45+
}
46+
}
47+
48+
var Validator = function(){
49+
this.cache = []; //保存校验规则
50+
}
51+
52+
Validator.prototype.add = function(dom,rules){
53+
var self = this;
54+
for(var i=0,rule;rule = rules[i++];){
55+
(function(rule){
56+
var strategyAry = rule.strategy.split(':');
57+
var errorMsg = rule.errMsg;
58+
self.cache.push(function(){
59+
var strategy = strategyAry.shift();
60+
strategy.unshift(dom,value)
61+
strategy.push(errorMsg)
62+
return strategies[strategy].apply(dom,strategyAry);
63+
})(rule)
64+
})
65+
}
66+
};
67+
68+
Validator.prototype.start = function(){
69+
for(var i=0,validatorFunc;validatorFunc = this.cache[i++];){
70+
var msg = validatorFunc();
71+
if(msg){
72+
return msg;
73+
}
74+
}
75+
};
76+
77+
var validatorFunc = function(){
78+
var validator = new Validator();
79+
80+
// validator.add(registForm.username,'isNonEmpty','用户名不能为空');
81+
validator.add(registForm.username,[{
82+
strategy:'isNonEmpty',
83+
errMsg:'用户名不能为空'
84+
},{
85+
strategy:'minLength:6',
86+
errMsg:'用户名长度不能小于6位'
87+
}]);
88+
89+
// validator.add(registForm.password,'minLength:6','密码长度不能小于6位')
90+
// validator.add(registForm.phoneNumber,'isMobile','手机号码格式不正确')
91+
92+
var errMsg = validator.start()
93+
return errMsg;
94+
}
95+
96+
var registForm = document.getElementById('registForm')
97+
registForm.onsubmit = function(){
98+
var errMsg = validatorFunc();
99+
if(errMsg){
100+
alert(errMsg);
101+
return false;
102+
}
103+
}
104+
105+
106+
// Validator.prototype.add = function(dom,rule,errorMsg){
107+
// var array = rule.split(':');
108+
// this.cache.push(function(){
109+
// var strategy = array.shift();
110+
// array.unshift(dom.value); //把input的值添加进参数列表
111+
// array.push(errorMsg);
112+
// return strategies[strategy].apply(dom,array);
113+
// })
114+
// }
115+
116+
117+
118+
119+
// // t 消耗的时间 ，b 原始位置 c 小球的目标位置 d 动画的持续时间
120+
// var tween = {
121+
// linear:function(t,b,c,d){
122+
// return c * t /d + b
123+
// },
124+
// easeIn:function(t,b,c,d){
125+
// return c * ( t /= d) * t + b
126+
// },
127+
// strongEaseIn: function(t, b, c, d){
128+
// return c * ( t /= d ) * t * t * t
129+
// },
130+
// strongEaseOut: function(t, b, c, d){
131+
// return c * ( ( t = t / d - 1) * t * t * t * t +1) +b
132+
// },
133+
// sineaseIn: function( t, b, c, d ){
134+
// return c * ( t /= d) * t * t + b
135+
// },
136+
// sineaseOut: function(t,b,c,d){
137+
// return c * ( ( t = t / d - 1) * t * t + 1 ) + b;
138+
// }
139+
// }
140+
141+
// var Animate = function(dom){
142+
// this.dom = dom;
143+
// this.startTime = 0;
144+
// this.startPos = 0;
145+
// this.endPos = 0;
146+
// this.propertyName = null;
147+
// this.easing = null;
148+
// this.duration = null;
149+
// }
150+
151+
// Animate.prototype.start = function(propertyName,endPos,duration,easing){
152+
// this.startTime = +new Date();
153+
// this.startPos = this.dom.getBoundingClientRect()[propertyName];
154+
// this.propertyName = propertyName;
155+
// this.endPos = endPos
156+
// this.duration = duration
157+
// this.easing = easing
158+
159+
// var self = this;
160+
// var timeId = setInterval(function(){
161+
// if(self.step() === false){
162+
// clearInterval(timeId)
163+
// }
164+
// },19)
165+
// }
166+
167+
// Animate.prototype.step = function(){
168+
// var t = +new Date();
169+
// if(t >= this.startTime + this.duration){
170+
// this.update(this.endPos)
171+
// return false;
172+
// }
173+
174+
// var pos = this.easing(t - this.startTime, this.startPos,this.endPos - this.startPos,this.duration);
175+
176+
// this.update(pos);
177+
// }
178+
179+
// Animate.prototype.update = function(pos){
180+
// this.dom.style[this.propertyName] = pos + 'px'
181+
// }
182+
183+
// var div = document.getElementById('div')
184+
// var animate = new Animate(div)
185+
186+
// animate.start('left',500,3000,tween.linear)
187+
</script>
188+
</body>
189+
</html>

‎five-chapter/strategy.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
var strategies = {
2+
'S':function (salary) {
3+
return salary *4
4+
},
5+
'A':function(salary){
6+
return salary * 3
7+
},
8+
'B':function(salary){
9+
return salary * 2
10+
}
11+
}
12+
13+
var calculateBonus = function(level,salary){
14+
return strategies[level](salary);
15+
}
16+
17+
console.log(calculateBonus('S',20000))
18+
console.log(calculateBonus('A',10000))
19+
20+
//多态在策略模式中的体现
21+
//编写动画，表单验证
22+
//缓动算法
23+
24+
// t 消耗的时间 ，b 原始位置 c 小球的目标位置 d 动画的持续时间
25+
var tween = {
26+
linear:function(t,b,c,d){
27+
return c * t /d + b
28+
},
29+
easeIn:function(t,b,c,d){
30+
return c * ( t /= d) * t + b
31+
},
32+
strongEaseIn: function(t, b, c, d){
33+
return c * ( t /= d ) * t * t * t
34+
},
35+
strongEaseOut: function(t, b, c, d){
36+
return c * ( ( t = t / d - 1) * t
37+
},
38+
sineaseIn: function( t, b, c, d ){
39+
return c * ( t /= d) * t * t + b; },
40+
sineaseOut: function(t,b,c,d){
41+
return c * ( ( t = t / d - 1) * t
42+
}
43+
}
44+
45+
//表单校验
46+
/*
47+
* 用户名不能为空
48+
* 密码长度不能少于六位
49+
* 手机号码必须时符合格式
50+
*/
51+
52+
//给文本框添加多种校验规则
53+
54+
//策略模式的优点
55+
// 策略模式利用组合、委托和多态等技术和思想，可以有效地避免多重条件选择语句。
56+
// 策略模式提供了对开放—封闭原则的完美支持，将算法封装在独立的 strategy 中，使得它
57+
// 们易于切换，易于理解，易于扩展。
58+
// 策略模式中的算法也可以复用在系统的其他地方，从而避免许多重复的复制粘贴工作。
59+
// 在策略模式中利用组合和委托来让 Context 拥有执行算法的能力，这也是继承的一种更轻
60+
// 便的替代方案。
61+

0 commit comments

Comments
 (0)