-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstate.html
More file actions
261 lines (235 loc) · 9.12 KB
/
Copy pathstate.html
File metadata and controls
261 lines (235 loc) · 9.12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var Light = function(){
this.state = 'off'; // 给电灯设置初始状态off
this.button = null; // 电灯开关按钮
};
Light.prototype.init = function(){
var button = document.createElement( 'button' ),
self = this;
button.innerHTML = '开关';
this.button = document.body.appendChild( button );
this.button.onclick = function(){
self.buttonWasPressed();
}
};
Light.prototype.buttonWasPressed = function(){
if ( this.state === 'off' ){
console.log( '开灯' );
this.state = 'on';
}else if ( this.state === 'on' ){
console.log( '关灯' );
this.state = 'off';
}
};
var light = new Light();
light.init();
Light.prototype.buttonWasPressed = function(){
if ( this.state === 'off' ){
console.log( '弱光' );
this.state = 'weakLight';
}else if ( this.state === 'weakLight' ){
console.log( '强光' );
this.state = 'strongLight';
}else if ( this.state === 'strongLight' ){
console.log( '关灯' );
this.state = 'off';
}
};
//将每个状态写成一个对象
//OffLightState
var OffLightState = function(light){
this.light = light;
};
OffLightState.prototype.buttonWasPressed = function(){
console.log("弱光"); // offLightState 对应的行为
console.log(this.light);
this.light.setState(this.light.weakLightState); // 切换状态到weakLightState
};
//WeakLightState
var WeakLightState = function(light){
this.light = light;
};
WeakLightState.prototype.buttonWasPressed = function(){
console.log("强光"); // weakLightState 对应的行为
this.light.setState(this.light.strongLightState); // 切换状态到strongLightState
};
//StrongLightState
var StrongLightState = function(light){
this.light = light;
}
StrongLightState.prototype.buttonWasPressed = function(){
console.log("关灯"); // strongLightState 对应的行为
this.light.setState(this.light.offLightState); // 切换状态到offLightState
}
var Light = function(){
this.offLightState = new OffLightState(this);
this.weakLightState = new WeakLightState(this);
this.strongLightState = new StrongLightState(this);
this.button = null;
}
Light.prototype.init = function(){
var button = document.createElement('button'),
self = this;
this.button = document.body.appendChild(button);
this.button.innerHTML = "开关";
this.currState = this.offLightState; // 设置当前状态
this.button.onclick = function(){
self.currState.buttonWasPressed();
}
};
var light = new Light();
light.init();
Light.prototype.setState = function( newState ){
this.currState = newState;
};
/********这时如果要加一个“超强光”状态，则不必修改函数内部，只需增加一个对象即可*********/
//如果SuperStrongLightState有一个父类State，且State的buttonWasPressed方法为空，则子类必须复写此方法
var State = function(){};
State.prototype.buttonWasPressed = function(){
throw new Error('父类的buttonWasPressed 方法必须被重写');
}
var SuperStrongLightState = function(light){
this.light = light;
};
SuperStrongLightState.prototype = new State();
SuperStrongLightState.prototype.buttonWasPressed = function(){
console.log('关灯');
this.light.setState(this.light.offLightState);
}
// StrongLightState：
var StrongLightState = function( light ){
this.light = light;
};
StrongLightState.prototype.buttonWasPressed = function(){
console.log( '关灯' ); // strongLightState 对应的行为
this.light.setState( this.light.superStrongLightState ); // 切换状态到offLightState
};
var Light = function(){
this.offLightState = new OffLightState( this ); // 持有状态对象的引用
this.weakLightState = new WeakLightState( this );
this.strongLightState = new StrongLightState( this );
this.superStrongLightState = new SuperStrongLightState( this );
this.button = null;
};
Light.prototype.init = function(){
var button = document.createElement( 'button' ),
self = this;
this.button = document.body.appendChild( button );
this.button.innerHTML = '开关';
this.currState = this.offLightState; // 设置当前状态
this.button.onclick = function(){
self.currState.buttonWasPressed();
}
};
var light = new Light();
console.log('加入超强光状态\n');
light.init();
/***********上传文件的时候有扫描状态、上传状态、暂停状态、上传完成状态**********/
window.external.upload = function(state){
console.log(state); // 可能为sign、uploading、done、error
};
var plugin = (function(){
var plugin = document.createElement('embed');
plugin.style.display = 'none';
plugin.type = 'application/txftn-webkit';
plugin.sign = function(){
console.log('开始扫描文件');
}
plugin.pause = function(){
console.log('暂停文件上传');
}
plugin.uploading = function(){
console.log('开始上传文件');
}
plugin.del = function(){
console.log('删除文件上传');
}
plugin.done = function(){
console.log('文件上传完成');
}
document.body.appendChild(plugin);
return plugin;
})();
var Upload = function(fileName){
this.plugin = plugin;
this.fileName = fileName;
this.button1 = null;
this.button2 = null;
this.state = 'sign'; // 设置初始状态为waiting
}
Upload.prototype.init = function(){
var that = this;
this.dom = document.createElement('div');
this.dom.innerHTML = '<span>文件名称:'+ this.fileName +'</span>\<button data-action="button1">扫描中</button>\<button data-action="button2">删除</button>';
document.body.appendChild(this.dom);
this.button1 = this.dom.querySelector('[data-action="button1"]');
this.button2 = this.dom.querySelector('[data-action="button2"]');
this.bindEvent();
}
Upload.prototype.bindEvent = function(){
var self = this;
this.button1.onclick = function(){
if(self.state === 'sign'){ // 扫描状态下，任何操作无效
console.log( '扫描中，点击无效...' );
}else if(self.state === 'uploading'){ // 上传中，点击切换到暂停
self.changeState('pause');
}else if(self.state === 'pause'){ // 暂停中，点击切换到上传中
self.changeState( 'uploading' );
}else if(self.state === 'done'){
console.log('文件已上传完成，点击无效');
}else if(self.state === 'error'){
console.log('文件上传失败，单击无效');
}
};
this.button2.onclick = function(){
if(self.state === 'done' || self.state === 'error' || self.state === 'pause'){
// 上传完成、上传失败和暂停状态下可以删除
self.changeState('del');
}else if(self.state === 'sign'){
console.log('文件正在扫描中，不能删除');
}else if(self.state === 'uploading'){
console.log('文件正在扫描中，不能删除');
}
}
}
Upload.prototype.changeState = function(state){
switch(state){
case 'sign':
this.plugin.sign();
this.button1.innerHTML = '扫描中，任何操作无效';
break;
case 'uploading':
this.plugin.uploading();
this.button1.innerHTML = '正在上传，点击暂停';
break;
case 'pause':
this.plugin.pause();
this.button1.innerHTML = '已暂停，点击继续上传';
break;
case 'done':
this.plugin.done();
this.button1.innerHTML = '上传完成';
break;
case 'error':
this.button1.innerHTML = '上传失败';
break;
case 'del':
this.plugin.del();
this.dom.parentNode.removeChild(this.dom);
console.log('删除完成');
break;
}
this.state = state;
}
var uploadObj = new Upload('JavaScript 设计模式与开发实践');
uploadObj.init();
</script>
</body>
</html>