1+ <!DOCTYPE html>
2+ < html >
3+ < head >
4+ < meta charset = "utf-8 ">
5+ < title > command</ title >
6+ </ head >
7+ < body >
8+ < button id ="button1 "> 点击按钮1</ button >
9+ < button id ="button2 "> 点击按钮2</ button >
10+ < button id ="button3 "> 点击按钮3</ button > < br >
11+
12+ < button id ="replay "> 播放录像</ button > < br >
13+ < script >
14+ var button1 = document . getElementById ( 'button1' ) ,
15+ button2 = document . getElementById ( 'button2' ) ,
16+ button3 = document . getElementById ( 'button3' ) ;
17+
18+ var setCommand = function ( button , command ) {
19+ button . onclick = function ( ) {
20+ command . execute ( ) ;
21+ }
22+ } ;
23+
24+ var MenuBar = {
25+ refresh : function ( ) {
26+ console . log ( '刷新菜单目录' ) ;
27+ }
28+ } ;
29+
30+ var SubMenu = {
31+ add : function ( ) {
32+ console . log ( '增加子菜单' ) ;
33+ } ,
34+ del : function ( ) {
35+ console . log ( '删除子菜单' ) ;
36+ }
37+ } ;
38+
39+ //在让button 变得有用起来之前，我们要先把这些行为都封装在命令类中：
40+ var RefreshMenuBarCommand = function ( receiver ) {
41+ this . receiver = receiver ;
42+ } ;
43+ RefreshMenuBarCommand . prototype . execute = function ( ) {
44+ this . receiver . refresh ( ) ;
45+ } ;
46+ var AddSubMenuCommand = function ( receiver ) {
47+ this . receiver = receiver ;
48+ } ;
49+ AddSubMenuCommand . prototype . execute = function ( ) {
50+ this . receiver . add ( ) ;
51+ } ;
52+ var DelSubMenuCommand = function ( receiver ) {
53+ this . receiver = receiver ;
54+ } ;
55+ DelSubMenuCommand . prototype . execute = function ( ) {
56+ console . log ( '删除子菜单' ) ;
57+ } ;
58+
59+ var refreshMenuBarCommand = new RefreshMenuBarCommand ( MenuBar ) ;
60+ var addSubMenuCommand = new AddSubMenuCommand ( SubMenu ) ;
61+ var delSubMenuCommand = new DelSubMenuCommand ( SubMenu ) ;
62+ setCommand ( button1 , refreshMenuBarCommand ) ;
63+ setCommand ( button2 , addSubMenuCommand ) ;
64+ setCommand ( button3 , delSubMenuCommand ) ;
65+
66+ var bindClick = function ( button , func ) {
67+ button . onclick = func ;
68+ } ;
69+ var MenuBar1 = {
70+ refresh :function ( ) {
71+ console . log ( '刷新菜单界面' ) ;
72+ }
73+ } ;
74+ var SubMenu1 = {
75+ add :function ( ) {
76+ console . log ( '增加子菜单' ) ;
77+ } ,
78+ del :function ( ) {
79+ console . log ( '删除子菜单' ) ;
80+ }
81+ } ;
82+ bindClick ( button1 , MenuBar1 . refresh ) ;
83+ bindClick ( button2 , SubMenu1 . add ) ;
84+ bindClick ( button3 , SubMenu1 . del ) ;
85+
86+ var setCommand1 = function ( button , func ) {
87+ button . onclick = function ( ) {
88+ func ( ) ;
89+ }
90+ } ;
91+ var RefreshMenuBarCommand1 = function ( receiver ) {
92+ return function ( ) {
93+ receiver . refresh ( ) ;
94+ }
95+ } ;
96+ var refreshMenuBarCommand = RefreshMenuBarCommand1 ( MenuBar1 ) ;
97+ setCommand1 ( button1 , refreshMenuBarCommand ) ;
98+
99+ var RefreshMenuBarCommand2 = function ( receiver ) {
100+ return {
101+ execute :function ( ) {
102+ receiver . refresh ( ) ;
103+ }
104+ }
105+ } ;
106+ var setCommand2 = function ( button , command ) {
107+ button . onclick = function ( ) {
108+ command . execute ( ) ;
109+ }
110+ } ;
111+ var refreshMenuBarCommand2 = RefreshMenuBarCommand2 ( MenuBar1 ) ;
112+ setCommand2 ( button1 , refreshMenuBarCommand2 ) ;
113+ </ script >
114+ < script >
115+ var Ryu = {
116+ attack :function ( ) {
117+ console . log ( '攻击' ) ;
118+ } ,
119+ defense :function ( ) {
120+ console . log ( '防御' ) ;
121+ } ,
122+ jump :function ( ) {
123+ console . log ( '跳跃' ) ;
124+ } ,
125+ crouch :function ( ) {
126+ console . log ( '蹲下' ) ;
127+ }
128+ } ;
129+
130+ var makeCommand = function ( receiver , state ) {
131+ return function ( ) {
132+ receiver [ state ] ( ) ;
133+ }
134+ } ;
135+ var commands = {
136+ "119" :"jump" , //w
137+ "115" :"crouch" , //s
138+ "97" :"defense" , //A
139+ "100" :"attack" //D
140+ } ;
141+
142+ var commandStack = [ ] ; //保存命令的堆栈
143+ document . onkeypress = function ( ev ) {
144+ var keyCode = ev . keyCode ,
145+ command = makeCommand ( Ryu , commands [ keyCode ] ) ;
146+ if ( command ) {
147+ command ( ) ;
148+ commandStack . push ( command ) ; // 将刚刚执行过的命令保存进堆栈
149+ }
150+ } ;
151+
152+ document . getElementById ( 'replay' ) . onclick = function ( ) { // 点击播放录像
153+ var command ;
154+ while ( command = commandStack . shift ( ) ) { // 从堆栈里依次取出命令并执行
155+ command ( ) ;
156+ }
157+ } ;
158+ </ script >
159+ < script >
160+ var closeDoorCommand = {
161+ execute :function ( ) {
162+ console . log ( '关门' ) ;
163+ }
164+ } ;
165+ var openPcCommand = {
166+ execute :function ( ) {
167+ console . log ( '开电脑' ) ;
168+ }
169+ } ;
170+ var openQQCommand = {
171+ execute :function ( ) {
172+ console . log ( '登录QQ' ) ;
173+ }
174+ } ;
175+
176+ var MacroCommand = function ( ) {
177+ return {
178+ commandsList :[ ] ,
179+ add :function ( command ) {
180+ this . commandsList . push ( command ) ;
181+ } ,
182+ execute :function ( ) {
183+ for ( var i = 0 , command ; command = this . commandsList [ i ++ ] ; ) {
184+ command . execute ( ) ;
185+ }
186+ }
187+ }
188+ } ;
189+ var macroCommand = MacroCommand ( ) ;
190+ macroCommand . add ( closeDoorCommand ) ;
191+ macroCommand . add ( openPcCommand ) ;
192+ macroCommand . add ( openQQCommand ) ;
193+ macroCommand . execute ( ) ;
194+ </ script >
195+ </ body >
196+ </ html >
0 commit comments