Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 931e011

Browse files
lilythylilythy
committed
Decorator pattern and Adapter pattern
1 parent f96f553 commit 931e011

File tree

2 files changed

+266
-0
lines changed

2 files changed

+266
-0
lines changed

‎Adapter/adapter.html

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<script>
2+
var googleMap = {
3+
show:function(){
4+
console.log('开始渲染谷歌地图');
5+
}
6+
};
7+
var baiduMap = {
8+
show:function(){
9+
console.log('开始渲染百度地图');
10+
}
11+
};
12+
var renderMap = function(map){
13+
if(map.show instanceof Function){
14+
map.show();
15+
}
16+
};
17+
renderMap(googleMap);
18+
renderMap(baiduMap);
19+
</script>
20+
<script>
21+
var googleMap1 = {
22+
show:function(){
23+
console.log('开始渲染谷歌地图');
24+
}
25+
};
26+
var baiduMap1 = {
27+
display:function(){
28+
console.log('开始渲染百度地图');
29+
}
30+
};
31+
var baiduMapAdapter = {
32+
show:function(){
33+
return baiduMap1.display();
34+
}
35+
};
36+
var renderMap = function(map){
37+
if(map.show instanceof Function){
38+
map.show();
39+
}
40+
};
41+
renderMap(googleMap1);
42+
renderMap(baiduMapAdapter);
43+
44+
</script>
45+
46+
<script>
47+
var getGuangdongCity = function(){
48+
var guangdongCity = [{
49+
name:'shenzhen',
50+
id:11
51+
},{
52+
name:'guangzhou',
53+
id:12
54+
}];
55+
return guangdongCity;
56+
}
57+
58+
var renderCity = function(fn){
59+
console.log('开始渲染广东地图');
60+
document.write(JSON.stringify(fn()));
61+
}
62+
63+
renderCity(getGuangdongCity);
64+
</script>
65+
66+
<script>
67+
var guangdongCity1 = {
68+
shenzhen:11,
69+
guangzhou:12,
70+
zhuhai:13
71+
};
72+
73+
var getGuangdongCity = function(){
74+
var guangdongCity = [
75+
{
76+
name: 'shenzhen',
77+
id: 11,
78+
}, {
79+
name: 'guangzhou',
80+
id: 12,
81+
}
82+
83+
];
84+
return guangdongCity;
85+
};
86+
87+
var render = function(fn){
88+
console.log('开始渲染广东地图');
89+
document.write(JSON.stringify(fn()));
90+
}
91+
92+
var addressAapter = function(oldAddressfn){
93+
var address = {},
94+
oldAddress = oldAddressfn();
95+
for(var i = 0,c;c = oldAddress[i++];){
96+
address[c.name] = c.id;
97+
}
98+
return function(){
99+
return address;
100+
}
101+
}
102+
103+
render(addressAapter(getGuangdongCity));
104+
</script>

‎Decorator/decorator.html

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>装饰者模式</title>
6+
</head>
7+
<body>
8+
<button id = 'button1'>Click Me</button><br><br>
9+
10+
<button tag="login" id="loginbtn">点击打开登录浮层</button><br><br>
11+
12+
用户名：<input id="username" type="text"/>
13+
14+
密码： <input id="password" type="password"/>
15+
<input id="submitBtn" type="button" value="提交"></button>
16+
17+
<script>
18+
var Plane = function(){};
19+
20+
Plane.prototype.fire = function(){
21+
console.log('发射普通导弹');
22+
}
23+
24+
var MissileDecorator = function(plane){
25+
this.plane = plane;
26+
}
27+
28+
MissileDecorator.prototype.fire = function(){
29+
this.plane.fire();
30+
console.log('发射导弹');
31+
}
32+
33+
var AtomDecorator = function(plane){
34+
this.plane = plane;
35+
}
36+
37+
AtomDecorator.prototype.fire = function(){
38+
this.plane.fire();
39+
console.log('发射原子弹');
40+
}
41+
42+
var plane = new Plane();
43+
plane = new MissileDecorator(plane);
44+
plane = new AtomDecorator(plane);
45+
plane.fire();
46+
console.log('\n');
47+
48+
//javascript的装饰者模式
49+
var Plane1 = {
50+
fire:function(){
51+
console.log('发射普通子弹');
52+
}
53+
}
54+
55+
var missileDecorator = function(){
56+
console.log('发射导弹');
57+
}
58+
59+
var atomDecorator = function(){
60+
console.log('发射原子弹');
61+
}
62+
63+
var fire1 = Plane1.fire;
64+
Plane1.fire = function(){
65+
fire1();
66+
missileDecorator();
67+
}
68+
69+
var fire2 = Plane1.fire;
70+
Plane1.fire = function(){
71+
fire2();
72+
atomDecorator();
73+
}
74+
Plane1.fire();
75+
console.log('\n');
76+
77+
Function.prototype.before = function(beforefn){
78+
var _self = this; // 保存原函数的引用
79+
return function(){ // 返回包含了原函数和新函数的"代理"函数
80+
beforefn.apply(this,arguments); // 执行新函数，且保证this 不被劫持，新函数接受的参数
81+
// 也会被原封不动地传入原函数，新函数在原函数之前执行
82+
return _self.apply(this,arguments); // 执行原函数并返回原函数的执行结果，并且保证this 不被劫持
83+
}
84+
}
85+
86+
Function.prototype.after = function(afterfn){
87+
var _self = this;
88+
return function(){
89+
var ret = _self.apply(this,arguments);
90+
afterfn.apply(this,arguments);
91+
return ret;
92+
}
93+
}
94+
95+
document.getElementById = document.getElementById.before(function(){alert(1);});
96+
var btn = document.getElementById("button1");
97+
console.log(btn);
98+
console.log('\n');
99+
100+
//第二个按钮
101+
var showLogin = function(){
102+
console.log('打开登录浮层');
103+
var tagname = document.getElementById('loginbtn');
104+
log( tagname.getAttribute( 'tag' ) );
105+
}
106+
var log = function(tag){
107+
console.log("上报标签为 " + tag);
108+
}
109+
document.getElementById('loginbtn').onclick = showLogin();
110+
111+
112+
//用户名、密码、提交
113+
var username = document.getElementById('username'),
114+
password = document.getElementById('password'),
115+
submitBtn = document.getElementById('submitBtn');
116+
var formSubmit = function(){
117+
if(username.value === ''){
118+
return alert('用户名不能为空');
119+
}
120+
if(password.value === ''){
121+
return alert('密码不能为空');
122+
}
123+
124+
var param = {
125+
username:username.value,
126+
password:password.value
127+
}
128+
ajax('http://xxx.com/login',param);
129+
}
130+
131+
submitBtn.onclick = function(){
132+
formSubmit();
133+
}
134+
135+
//上述的formSubmit函数又要校验，又要负责提交数据，责任不单一，下面把校验单独提取出来作为一个函数
136+
var validate = function(){
137+
if(username.value === ''){
138+
alert('用户名不能为空');
139+
return false;
140+
}
141+
if(password.value === ''){
142+
alert('密码不能为空');
143+
return false;
144+
}
145+
}
146+
147+
var formsubmit = function(){
148+
var param = {
149+
username:username.value,
150+
password:password.value
151+
}
152+
ajax('http://xxx.com/login',param);
153+
}
154+
155+
formsubmit = formsubmit.before(validate);
156+
157+
submitBtn.onclick = function(){
158+
formSubmit();
159+
}
160+
</script>
161+
</body>
162+
</html>

0 commit comments

Comments
 (0)