本文介绍了一个使用JavaScript实现的状态模式示例。通过按钮点击切换不同状态，展示了如何将行为与对象的状态进行解耦，使得状态的变化更加灵活且易于管理。
遇到变化点封装它！
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title> change state </title>
5 <meta name="generator" content="editplus" />
6 <meta name="author" content="" />
7 <meta name="keywords" content="" />
8 <meta name="description" content="" />
9 </head>
10
11 <body>
12 <input type="button" id="execBtn" value="show1" />
13 <div id="show"></div>
14
<script type="text/javascript">
15
function Control(state){
16
this.State = state;
17 this.Execute = function(){
18 this.State.Execute(this);
19
}
20 }
21
22 function State(){
23 this.Title = "title1";
24 this.Execute = function(control){
25 show.innerHTML = this.Title;
26 execBtn.value = "show2";
27 control.State = new State2();
28 }
29 }
30
31 function State2(){
32 this.Title = "title2";
33 this.Execute = function(control){
34 show.innerHTML = this.Title;
35 execBtn.value = "show1";
36 control.State = new State();
37 }
38 }
39
40 var control;
41
42 window.onload = function(){
43 control = new Control(new State());
44 control.Execute();
45 }
46
47 execBtn.onclick = function(){
48 control.Execute();
49 }
50
51
52
</script>
53 </body>
54</html>
55
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<title> change state </title>5
<meta name="generator" content="editplus" />6
<meta name="author" content="" />7
<meta name="keywords" content="" />8
<meta name="description" content="" />9
</head>10
11
<body>12
<input type="button" id="execBtn" value="show1" />13
<div id="show"></div>14
<script type="text/javascript">15
function Control(state){16
this.State = state;17
this.Execute = function(){18
this.State.Execute(this);19
}20
}21
22
function State(){23
this.Title = "title1";24
this.Execute = function(control){25
show.innerHTML = this.Title;26
execBtn.value = "show2";27
control.State = new State2();28
}29
}30
31
function State2(){32
this.Title = "title2";33
this.Execute = function(control){34
show.innerHTML = this.Title;35
execBtn.value = "show1";36
control.State = new State();37
}38
}39
40
var control;41
42
window.onload = function(){43
control = new Control(new State());44
control.Execute();45
}46
47
execBtn.onclick = function(){48
control.Execute();49
}50
51
52
</script>53
</body>54
</html>55
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
