JavaScript命令模式原理与用法实例详解

　　

本文实例讲述了JavaScript命令模式原理与用法。分享给大家供大家参考,具体如下:

　　

<强>第一,命令模式:
　　(1)用于消除调用者和接收者之间直接的耦合的模式,并且可以对(调用这个过程进行留痕操作)

　　

(2)真的不要乱用这个模式,以为他使你简单调用写法变得非常的复杂和有些难以理解。
　　
　　(3)你的业务出现了(回退操作)(重做操作)的需求的时候你就要考虑使用这个模式了。
　　命令的原理:
　　 JavaScript命令模式原理与用法实例详解

　　

一种情况为发出者直接作用于执行者,这样耦合度很高,另外一种情况为,在发出者和执行者之间增加一个用存储命令的命令访问库也即命令命令模式。
　　
　　<强>第二,现在我们通过一个需求来学习该模式
　　需求为:
　　

　　

1。有一个“添加流程的按钮”单击的时候就会添加一个新的文本当做流程的描述

　　

2。有“返回”、“重做”2个按钮来完成相应的任务。
　　<强>第三,界面为
　　

　　 　　 　　& lt; body> 　　& lt;输入类型="文本" id=傲鳌痹? 　　& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/添加新流程”比; 　　& lt; br> 　　& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/ctrl + z回退”比; 　　& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/ctrl + z + x重做”比; 　　& lt; div id=" div01 "祝辞& lt;/div> 　　 　　& lt;脚本src=" https://www.yisu.com/zixun/Js/设计模式第三部分/命令模式/keymaster.min.js”祝辞& lt;/script> 　　& lt;脚本src=" https://www.yisu.com/zixun/Js/设计模式第三部分/命令模式/uuid.js”祝辞& lt;/script> 　　& lt;脚本src=" https://www.yisu.com/zixun/Js/设计模式第三部分/命令模式/(18)命令模式. js”祝辞& lt;/script> 　　& lt;/body> 　　 　　

,效果为, JavaScript命令模式原理与用法实例详解

　　


　　根据上述图我们逐步完成
　　步骤一,定义主应用程序——接收者
　　

　　 　　 　　函数经理(){ 　　这一点。addFlow=function (id、价值){//1,得到目标节点 　　var div=. getelementbyid (“div01”); 　　var newFlow=document.createElement (" div "); 　　newFlow.setAttribute (“id”、身份证); 　　newFlow.innerHTML=价值; 　　div.appendChild (newFlow); 　　 　　} 　　} 　　 　　

,步骤二,为对象(执行者)建立命令访问库- - -意思是可以通过extcute方法访问到addFlow方法

　　 　　 　　manager.prototype。extcute=(函数(){/*命令命令对象 　　* */返回函数(命令){ 　　返回这个[command.method] (command.id command.value); 　　} 　　 　　})(); 　　 　　

步骤三,初始化主类

　　 　　 　　马var=新经理();//可以用该对象,调用其的东西//用于存储”调用对象命令的“集合 　　var命令=new Array ();//集合的游标——初始化在末尾 　　var指数=commands.length; 　　 　　

步骤四,客户端- - - - -发出者

　　 　　 　　var API=function () { 　　这一点。addFlow=function () {//把调用封装起来={var命令 　　方法:“addFlow”, 　　id:新的UUID () .createUUID()//产生id的插件 　　值:. getelementbyid(“流”)value 　　};//把调用对象保存起来,用于回退和重做作用 　　commands.push(命令);//重新定位游标——赋值记录 　　指数=commands.length;//调用 　　ma.extcute(命令); 　　};/* * 　　*用于返回的方法 　　*/这一点。ret=function () { 　　如果(index-1<0) { 　　alert("已经到了最后一步了…”); 　　其他}{ 　　var=. getelementbyid (“div01”) childnodes; 　　. getelementbyid (div01) .removeChild(所有[all.length-1]); 　　指数=索引1; 　　} 　　};/* * 　　*用于重做的方法 　　*/这一点。再次=function () { 　　如果(index>=commands.length) { 　　alert("已经到了最前面一步了,不能进行重做…”); 　　其他}{ 　　var命令=命令(指数);//获取当前的命令位置 　　ma.extcute(命令); 　　指数=指数+ 1; 　　} 　　} 　　} 　　 　　

步骤五,实例化客户端

　　 　　 　　API=新的API();//实例化 　　 　　html中

这样的事件就可以起作用了。

JavaScript命令模式原理与用法实例详解