1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>javascript高级语法21-命令模式</title> 6 </head> 7 <body> 8 <input type="text" id="flow" /> 9 <input type="button" id="" value="添加新流程" onclick="API.addFlow()" /><br> 10 <input type="button" value="回退" onclick="API.re()" /> 11 <input type="button" value="重做" onclick="API.again()" /> 12 <div id="div01"></div> 13 14 <script id="uuid.js"> 15 //生成uuid的轮子 16 /* 17 uuid.js - Version 0.2 18 JavaScript Class to create a UUID like identifier 19 */ 20 21 // On creation of a UUID object, set it's initial value 22 function UUID(){ 23 this.id = this.createUUID(); 24 } 25 // When asked what this Object is, lie and return it's value 26 UUID.prototype.valueOf = function(){ return this.id; } 27 UUID.prototype.toString = function(){ return this.id; } 28 UUID.prototype.createUUID = function(){ 29 var dg = new Date(1582, 10, 15, 0, 0, 0, 0); 30 var dc = new Date(); 31 var t = dc.getTime() - dg.getTime(); 32 var h = '-'; 33 var tl = UUID.getIntegerBits(t,0,31); 34 var tm = UUID.getIntegerBits(t,32,47); 35 var thv = UUID.getIntegerBits(t,48,59) + '1'; // version 1, security version is 2 36 var csar = UUID.getIntegerBits(UUID.rand(4095),0,7); 37 var csl = UUID.getIntegerBits(UUID.rand(4095),0,7); 38 var n = UUID.getIntegerBits(UUID.rand(8191),0,7) + 39 UUID.getIntegerBits(UUID.rand(8191),8,15) + 40 UUID.getIntegerBits(UUID.rand(8191),0,7) + 41 UUID.getIntegerBits(UUID.rand(8191),8,15) + 42 UUID.getIntegerBits(UUID.rand(8191),0,15); // this last number is two octets long 43 return tl + h + tm + h + thv + h + csar + csl + h + n; 44 } 45 46 UUID.getIntegerBits = function(val,start,end){ 47 var base16 = UUID.returnBase(val,16); 48 var quadArray = new Array(); 49 var quadString = ''; 50 var i = 0; 51 for(i=0;i<base16.length;i++){ 52 quadArray.push(base16.substring(i,i+1)); 53 } 54 for(i=Math.floor(start/4);i<=Math.floor(end/4);i++){ 55 if(!quadArray[i] || quadArray[i] == '') quadString += '0'; 56 else quadString += quadArray[i]; 57 } 58 return quadString; 59 } 60 61 UUID.returnBase = function(number, base){ 62 63 var convert = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']; 64 if (number < base) var output = convert[number]; 65 else { 66 var MSD = '' + Math.floor(number / base); 67 var LSD = number - MSD*base; 68 if (MSD >= base) var output = this.returnBase(MSD,base) + convert[LSD]; 69 else var output = convert[MSD] + convert[LSD]; 70 } 71 return output; 72 } 73 UUID.rand = function(max){ 74 return Math.floor(Math.random() * max); 75 } 76 77 </script> 78 <script id="keymaster.js"> 79 //获取键盘事件的轮子 80 (function(a) { 81 function h(a, b) { 82 var c = a.length; 83 while (c--) if (a[c] === b) return c; 84 return -1 85 } 86 function i(a) { 87 var b, g, i, j, k; 88 b = a.keyCode; 89 if (b == 93 || b == 224) b = 91; 90 if (b in d) { 91 d[b] = !0; 92 for (i in f) f[i] == b && (l[i] = !0); 93 return 94 } 95 if (!l.filter.call(this, a)) return; 96 if (!(b in c)) return; 97 for (j = 0; j < c[b].length; j++) { 98 g = c[b][j]; 99 if (g.scope == e || g.scope == "all") { 100 k = g.mods.length > 0; 101 for (i in d) if (!d[i] && h(g.mods, +i) > -1 || d[i] && h(g.mods, +i) == -1) k = !1; 102 (g.mods.length == 0 && !d[16] && !d[18] && !d[17] && !d[91] || k) && g.method(a, g) === !1 && (a.preventDefault ? a.preventDefault() : a.returnValue = !1, a.stopPropagation && a.stopPropagation(), a.cancelBubble && (a.cancelBubble = !0)) 103 } 104 } 105 } 106 function j(a) { 107 var b = a.keyCode, 108 c; 109 if (b == 93 || b == 224) b = 91; 110 if (b in d) { 111 d[b] = !1; 112 for (c in f) f[c] == b && (l[c] = !1) 113 } 114 } 115 function k() { 116 for (b in d) d[b] = !1; 117 for (b in f) l[b] = !1 118 } 119 function l(a, b, d) { 120 var e, h, i, j; 121 d === undefined && (d = b, b = "all"), a = a.replace(/s/g, ""), e = a.split(","), e[e.length - 1] == "" && (e[e.length - 2] += ","); 122 for (i = 0; i < e.length; i++) { 123 h = [], a = e[i].split("+"); 124 if (a.length > 1) { 125 h = a.slice(0, a.length - 1); 126 for (j = 0; j < h.length; j++) h[j] = f[h[j]]; 127 a = [a[a.length - 1]] 128 } 129 a = a[0], a = g[a] || a.toUpperCase().charCodeAt(0), a in c || (c[a] = []), c[a].push({ 130 shortcut: e[i], 131 scope: b, 132 method: d, 133 key: e[i], 134 mods: h 135 }) 136 } 137 } 138 function m(a) { 139 var b = (a.target || a.srcElement).tagName; 140 return b != "INPUT" && b != "SELECT" && b != "TEXTAREA" 141 } 142 function n(a) { 143 e = a || "all" 144 } 145 function o() { 146 return e || "all" 147 } 148 function p(a) { 149 var b, d, e; 150 for (b in c) { 151 d = c[b]; 152 for (e = 0; e < d.length;) d[e].scope === a ? d.splice(e, 1) : e++ 153 } 154 } 155 function q(a, b, c) { 156 a.addEventListener ? a.addEventListener(b, c, !1) : a.attachEvent && a.attachEvent("on" + b, function() { 157 c(window.event) 158 }) 159 } 160 var b, c = {}, 161 d = { 162 16: !1, 163 18: !1, 164 17: !1, 165 91: !1 166 }, 167 e = "all", 168 f = { 169 "⇧": 16, 170 shift: 16, 171 "⌥": 18, 172 alt: 18, 173 option: 18, 174 "⌃": 17, 175 ctrl: 17, 176 control: 17, 177 "⌘": 91, 178 command: 91 179 }, 180 g = { 181 backspace: 8, 182 tab: 9, 183 clear: 12, 184 enter: 13, 185 "return": 13, 186 esc: 27, 187 escape: 27, 188 space: 32, 189 left: 37, 190 up: 38, 191 right: 39, 192 down: 40, 193 del: 46, 194 "delete": 46, 195 home: 36, 196 end: 35, 197 pageup: 33, 198 pagedown: 34, 199 ",": 188, 200 ".": 190, 201 "/": 191, 202 "`": 192, 203 "-": 189, 204 "=": 187, 205 ";": 186, 206 "'": 222, 207 "[": 219, 208 "]": 221, 209 "\": 220 210 }; 211 for (b = 1; b < 20; b++) f["f" + b] = 111 + b; 212 for (b in f) l[b] = !1; 213 q(document, "keydown", i), q(document, "keyup", j), q(window, "focus", k), a.key = l, a.key.setScope = n, a.key.getScope = o, a.key.deleteScope = p, a.key.filter = m, typeof module != "undefined" && (module.exports = key) 214 })(this); 215 </script> 216 <script> 217 /*命令模式： 218 * 用于消除调用者和接收者之间的耦合的模式 219 * 并且可以对（调用这个过程进行留痕操作） 220 * 不能乱用这个模式，它会使简单调用的写法变得非常复杂和难以理解 221 * 当你的业务出现了回退操作，重做操作等需求的时候考虑用这个模式 222 */ 223 /*需求： 224 有一个添加流程的按钮，单机的时候添加一个新的文本当做流程的描述 225 有返回 重做两个按钮，完成相应任务。 226 */ 227 function manager(){ 228 this.addFlow = function(id,text){ 229 //1.得到目标节点 230 var div = document.getElementById("div01"); 231 var newFlow = document.createElement("div"); 232 newFlow.setAttribute("id",id); 233 newFlow.innerHTML = text; 234 div.appendChild(newFlow); 235 } 236 } 237 //为对象建立命令访问库 238 manager.prototype.excute = (function(){ 239 //命令对象 240 return function(command){ 241 return this[command.method](command.id,command.value) 242 } 243 })() 244 //初始化主类 245 var ma = new manager(); 246 //用于存储调用对象命令的集合。 247 var commands = new Array(); 248 //集合的游标 249 var index = commands.length; 250 //客户端 251 252 var API = function(){ 253 this.addFlow = function(){ 254 //把调用封装起来 255 var command = { 256 method:"addFlow", 257 id:new UUID().createUUID(), 258 value:document.getElementById("flow").value, 259 } 260 //把调用对象保存起来，用于回退和重做 261 commands.push(command); 262 //重新定位游标 263 index = commands.length; 264 //调用 265 ma.excute(command); 266 267 } 268 //返回 269 this.re = function(){ 270 if(index-1<0){ 271 alert("已经到最后一步了！") 272 }else{ 273 all = document.getElementById("div01").childNodes; 274 document.getElementById("div01").removeChild(all[all.length-1]); 275 index = index - 1; 276 } 277 } 278 //重做 279 this.again = function(){ 280 if(index>=commands.length){ 281 alert("已经到了最新一步了，不能继续重做了！") 282 }else{ 283 var command = commands[index]; 284 ma.excute(command); 285 index = index + 1; 286 } 287 } 288 } 289 //实例化api 290 var API = new API(); 291 292 //添加支持键盘事件 293 key("ctrl+z",function(){ 294 API.re(); 295 }) 296 key("ctrl+shift+z",function(){ 297 API.again(); 298 }) 299 </script> 300 </body> 301 </html>