核心产品
帮助中心
时间：2021-05-26
本文实例讲述了JavaScript命令模式原理与用法。分享给大家供大家参考，具体如下：
第一，命令模式：
（1）用于消除调用者和接收者之间直接的耦合的模式，并且可以对(调用这个过程进行留痕操作)
（2）真的不要乱用这个模式,以为他使你简单调用写法变得非常的复杂和有些难以理解。
（3）你的业务出现了 (回退操作)(重做操作)的需求的时候你就要考虑使用这个模式了。
命令的原理：
一种情况为发出者直接作用于执行者，这样耦合度很高，另外一种情况为，在发出者和执行者之间增加一个用存储命令的命令访问库也即命令命令模式。
第二，现在我们通过一个需求来学习该模式
需求为：
1.有一个"添加流程的按钮"单击的时候 就会添加一个新的文本当做流程的描述
2.有"返回","重做" 2个按钮来完成相应的任务。
第三，界面为
效果为，
根据上述图我们逐步完成
步骤一，定义主应用程序----接收者
步骤二，为对象（执行者）建立命令访问库 ---意思是可以通过extcute方法访问到addFlow方法
manager.prototype.extcute=(function () { /*command 命令对象 * */ return function (command) { return this[command.method](command.id,command.value); } })();步骤三，初始化主类
var ma = new manager();//可以用该对象，调用其的东西 //用于存储"调用对象命令的"集合 var commands = new Array(); //集合的游标--初始化在末尾 var index = commands.length;步骤四，客户端----发出者
var API=function () { this.addFlow=function () { //把调用封装起来 var command={ method:"addFlow", id:new UUID().createUUID(),//产生id的插件 value:document.getElementById("flow").value }; //把调用对象保存起来,用于回退和重做作用 commands.push(command); //重新定位游标---赋值记录 index = commands.length; //调用 ma.extcute(command); }; /** * 用于返回的方法 */ this.ret=function () { if(index-1<0){ alert("已经到了最后一步了..."); }else { var all=document.getElementById("div01").childNodes; document.getElementById("div01").removeChild(all[all.length-1]); index=index-1; } }; /** * 用于重做的方法 */ this.again=function () { if(index>=commands.length){ alert("已经到了最前面一步了,不能进行重做..."); }else { var command=commands[index];//获取当前的命令位置 ma.extcute(command); index=index+1; } } }步骤五，实例化客户端
API=new API();//实例化这样html中的事件就可以起作用了。
在这里我们使用插件来让其功能支持自定义的键盘事件，插件名称为：keymaster.js
首先，如html中一样引入文件，
然后值调用key添加自定义的键盘事件
//添加支持ctrl+z--返回key("ctrl+z",function () { API.ret();});//重做---key("ctrl+shift+x",function () { API.again();})为此我们可以使用键盘的指定组合实现和鼠标点击一样的效果。
这里需要说明一下客户端的API中的id值，也是通过插件来动态生成的------插件名称为：uuid.js。这里附上源码
// On creation of a UUID object, set it's initial valuefunction UUID(){ this.id = this.createUUID();}// When asked what this Object is, lie and return it's valueUUID.prototype.valueOf = function(){ return this.id; }UUID.prototype.toString = function(){ return this.id; }//// INSTANCE SPECIFIC METHODS//UUID.prototype.createUUID = function(){ // // Loose interpretation of the specification DCE 1.1: Remote Procedure Call // described at http://www.opengroup.org/onlinepubs/009629399/apdxa.htm#tagtcjh_37 // since JavaScript doesn't allow access to internal systems, the last 48 bits // of the node section is made up using a series of random numbers (6 octets long). // var dg = new Date(1582, 10, 15, 0, 0, 0, 0); var dc = new Date(); var t = dc.getTime() - dg.getTime(); var h = '-'; var tl = UUID.getIntegerBits(t,0,31); var tm = UUID.getIntegerBits(t,32,47); var thv = UUID.getIntegerBits(t,48,59) + '1'; // version 1, security version is 2 var csar = UUID.getIntegerBits(UUID.rand(4095),0,7); var csl = UUID.getIntegerBits(UUID.rand(4095),0,7); // since detection of anything about the machine/browser is far to buggy, // include some more random numbers here // if NIC or an IP can be obtained reliably, that should be put in // here instead. var n = UUID.getIntegerBits(UUID.rand(8191),0,7) + UUID.getIntegerBits(UUID.rand(8191),8,15) + UUID.getIntegerBits(UUID.rand(8191),0,7) + UUID.getIntegerBits(UUID.rand(8191),8,15) + UUID.getIntegerBits(UUID.rand(8191),0,15); // this last number is two octets long return tl + h + tm + h + thv + h + csar + csl + h + n; }//// GENERAL METHODS (Not instance specific)//// Pull out only certain bits from a very large integer, used to get the time// code information for the first part of a UUID. Will return zero's if there // aren't enough bits to shift where it needs to.UUID.getIntegerBits = function(val,start,end){ var base16 = UUID.returnBase(val,16); var quadArray = new Array(); var quadString = ''; var i = 0; for(i=0;i<base16.length;i++){ quadArray.push(base16.substring(i,i+1)); } for(i=Math.floor(start/4);i<=Math.floor(end/4);i++){ if(!quadArray[i] || quadArray[i] == '') quadString += '0'; else quadString += quadArray[i]; } return quadString;}// Numeric Base Conversion algorithm from irt.org// In base 16: 0=0, 5=5, 10=A, 15=FUUID.returnBase = function(number, base){ // // Copyright 1996-2006 irt.org, All Rights Reserved. // // Downloaded from: http://www.irt.org/script/146.htm // modified to work in this class by Erik Giberti 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']; if (number < base) var output = convert[number]; else { var MSD = '' + Math.floor(number / base); var LSD = number - MSD*base; if (MSD >= base) var output = this.returnBase(MSD,base) + convert[LSD]; else var output = convert[MSD] + convert[LSD]; } return output;}// pick a random number within a range of numbers// int b rand(int a); where 0 <= b <= aUUID.rand = function(max){ return Math.floor(Math.random() * max);}// end of UUID class file感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun测试上述代码运行效果。
更多关于JavaScript相关内容还可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。
本文实例讲述了javascript设计模式–命令模式原理与用法。分享给大家供大家参考，具体如下：介绍：命令模式是一种数据驱动的设计模式，将请求以命令的形式包裹在
本文实例讲述了Python设计模式之命令模式原理与用法。分享给大家供大家参考，具体如下：命令模式(CommandPattern):将请求封装成对象，从而使可用不
本文实例讲述了javascript设计模式–代理模式原理与用法。分享给大家供大家参考，具体如下：介绍：代理使我们很常见的一众模式，proxy,nginx都称之为
本文实例讲述了javascript设计模式–模板方法模式原理与用法。分享给大家供大家参考，具体如下：介绍：模板方法模式是结构最简单的行为型设计模式，在其结构中只
本文实例讲述了javascript设计模式–迭代器模式原理与用法。分享给大家供大家参考，具体如下：介绍：迭代器模式是一种使用频率非常高的设计模式，通过引入迭代器
