电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

JavaScript命令模式原理與用法實(shí)例詳解

瀏覽:43日期:2023-11-07 16:05:57

本文實(shí)例講述了JavaScript命令模式原理與用法。分享給大家供大家參考,具體如下:

第一,命令模式: (1)用于消除調(diào)用者和接收者之間直接的耦合的模式,并且可以對(duì)(調(diào)用這個(gè)過(guò)程進(jìn)行留痕操作)

(2)真的不要亂用這個(gè)模式,以為他使你簡(jiǎn)單調(diào)用寫(xiě)法變得非常的復(fù)雜和有些難以理解。(3)你的業(yè)務(wù)出現(xiàn)了 (回退操作)(重做操作)的需求的時(shí)候你就要考慮使用這個(gè)模式了。命令的原理:JavaScript命令模式原理與用法實(shí)例詳解

一種情況為發(fā)出者直接作用于執(zhí)行者,這樣耦合度很高,另外一種情況為,在發(fā)出者和執(zhí)行者之間增加一個(gè)用存儲(chǔ)命令的命令訪問(wèn)庫(kù)也即命令命令模式。第二,現(xiàn)在我們通過(guò)一個(gè)需求來(lái)學(xué)習(xí)該模式需求為:

1.有一個(gè)'添加流程的按鈕'單擊的時(shí)候 就會(huì)添加一個(gè)新的文本當(dāng)做流程的描述

2.有'返回','重做' 2個(gè)按鈕來(lái)完成相應(yīng)的任務(wù)。第三,界面為

<body><input type='text' id='flow'><input type='button' value='添加新流程' onclick='API.addFlow()'><br><input type='button' value='ctrl+z回退' onclick='API.ret()'><input type='button' value='ctrl+z+x重做' onclick='API.again()'><div id= 'div01'></div><script src='http://www.hdgsjgj.cn/bcjs/Js/設(shè)計(jì)模式第三部分/命令模式/keymaster.min.js'></script><script src='http://www.hdgsjgj.cn/bcjs/Js/設(shè)計(jì)模式第三部分/命令模式/uuid.js'></script><script src='http://www.hdgsjgj.cn/bcjs/Js/設(shè)計(jì)模式第三部分/命令模式/(18)命令模式.js'></script></body>

效果為,JavaScript命令模式原理與用法實(shí)例詳解

根據(jù)上述圖我們逐步完成步驟一,定義主應(yīng)用程序----接收者

function manager() {this.addFlow=function (id,value) { //1.得到目標(biāo)節(jié)點(diǎn) var div=document.getElementById('div01'); var newFlow=document.createElement('div'); newFlow.setAttribute('id',id); newFlow.innerHTML=value; div.appendChild(newFlow);} }

步驟二,為對(duì)象(執(zhí)行者)建立命令訪問(wèn)庫(kù) ---意思是可以通過(guò)extcute方法訪問(wèn)到addFlow方法

manager.prototype.extcute=(function () { /*command 命令對(duì)象 * */ return function (command) {return this[command.method](command.id,command.value); } })();

步驟三,初始化主類(lèi)

var ma = new manager();//可以用該對(duì)象,調(diào)用其的東西 //用于存儲(chǔ)'調(diào)用對(duì)象命令的'集合 var commands = new Array(); //集合的游標(biāo)--初始化在末尾 var index = commands.length;

步驟四,客戶端----發(fā)出者

var API=function () { this.addFlow=function () { //把調(diào)用封裝起來(lái) var command={ method:'addFlow', id:new UUID().createUUID(),//產(chǎn)生id的插件 value:document.getElementById('flow').value }; //把調(diào)用對(duì)象保存起來(lái),用于回退和重做作用 commands.push(command); //重新定位游標(biāo)---賦值記錄 index = commands.length; //調(diào)用 ma.extcute(command); }; /** * 用于返回的方法 */ this.ret=function () { if(index-1<0){ alert('已經(jīng)到了最后一步了...'); }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('已經(jīng)到了最前面一步了,不能進(jìn)行重做...'); }else { var command=commands[index];//獲取當(dāng)前的命令位置 ma.extcute(command); index=index+1; } } }

步驟五,實(shí)例化客戶端

API=new API();//實(shí)例化

這樣html中的事件就可以起作用了。

在這里我們使用插件來(lái)讓其功能支持自定義的鍵盤(pán)事件,插件名稱(chēng)為:keymaster.js

首先,如html中一樣引入文件,

然后值調(diào)用key添加自定義的鍵盤(pán)事件

//添加支持ctrl+z--返回key('ctrl+z',function () { API.ret();});//重做---key('ctrl+shift+x',function () { API.again();})

為此我們可以使用鍵盤(pán)的指定組合實(shí)現(xiàn)和鼠標(biāo)點(diǎn)擊一樣的效果。

這里需要說(shuō)明一下客戶端的API中的id值,也是通過(guò)插件來(lái)動(dòng)態(tài)生成的------插件名稱(chēng)為:uuid.js。這里附上源碼

/*uuid.js - Version 0.2JavaScript Class to create a UUID like identifierCopyright (C) 2006-2008, Erik Giberti (AF-Design), All rights reserved.This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USAThe latest version of this file can be downloaded fromhttp://www.af-design.com/resources/javascript_uuid.phpHISTORY:6/5/06 - Initial Release5/22/08 - Updated code to run faster, removed randrange(min,max) in favor of a simpler rand(max) function. Reduced overhead by using getTime() method of date class (suggestion by James Hall).KNOWN ISSUES:- Still no way to get MAC address in JavaScript- Research into other versions of UUID show promising possibilities (more research needed)- Documentation needs improvement*/// 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前端代碼調(diào)試運(yùn)行工具:http://tools.jb51.net/code/WebCodeRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專(zhuān)題:《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 世纪豪门官网 世纪豪门集成吊顶加盟电话 世纪豪门售后电话 | 首页|专注深圳注册公司,代理记账报税,注册商标代理,工商变更,企业400电话等企业一站式服务-慧用心 | 避光流动池-带盖荧光比色皿-生化流动比色皿-宜兴市晶科光学仪器 东莞爱加真空科技有限公司-进口真空镀膜机|真空镀膜设备|Polycold维修厂家 | 宝元数控系统|对刀仪厂家|东莞机器人控制系统|东莞安川伺服-【鑫天驰智能科技】 | 货车视频监控,油管家,货车油管家-淄博世纪锐行电子科技 | 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 广西绿桂涂料--承接隔热涂料、隔音涂料、真石漆、多彩仿石漆等涂料工程双包施工 | 金属抛光机-磁悬浮抛光机-磁力研磨机-磁力清洗机 - 苏州冠古科技 | 铆钉机|旋铆机|东莞旋铆机厂家|鸿佰专业生产气压/油压/自动铆钉机 | 立式矫直机_卧式矫直机-无锡金矫机械制造有限公司 | 插针变压器-家用电器变压器-工业空调变压器-CD型电抗器-余姚市中驰电器有限公司 | 理化生实验室设备,吊装实验室设备,顶装实验室设备,实验室成套设备厂家,校园功能室设备,智慧书法教室方案 - 东莞市惠森教学设备有限公司 | 精密冲床,高速冲床等冲压设备生产商-常州晋志德压力机厂 | 考试试题_试卷及答案_诗词单词成语 - 优易学| 塑胶跑道_学校塑胶跑道_塑胶球场_运动场材料厂家_中国塑胶跑道十大生产厂家_混合型塑胶跑道_透气型塑胶跑道-广东绿晨体育设施有限公司 | 耐高温电缆厂家-远洋高温电缆| 一航网络-软件测评官网 | 博莱特空压机|博莱特-阿特拉斯独资空压机品牌核心代理商 | 耐高温硅酸铝板-硅酸铝棉保温施工|亿欧建设工程 | 伺服电机维修、驱动器维修「安川|三菱|松下」伺服维修公司-深圳华创益 | 尼龙PA610树脂,尼龙PA612树脂,尼龙PA1010树脂,透明尼龙-谷骐科技【官网】 | 蒸汽热收缩机_蒸汽发生器_塑封机_包膜机_封切收缩机_热收缩包装机_真空机_全自动打包机_捆扎机_封箱机-东莞市中堡智能科技有限公司 | 西安展台设计搭建_西安活动策划公司_西安会议会场布置_西安展厅设计西安旭阳展览展示 | 作文导航网_作文之家_满分作文_优秀作文_作文大全_作文素材_最新作文分享发布平台 | 全钢实验台,实验室工作台厂家-无锡市辰之航装饰材料有限公司 | 上海办公室装修公司_办公室设计_直营办公装修-羚志悦装 | 南溪在线-南溪招聘找工作、找房子、找对象,南溪综合生活信息门户! | 石家庄网站建设|石家庄网站制作|石家庄小程序开发|石家庄微信开发|网站建设公司|网站制作公司|微信小程序开发|手机APP开发|软件开发 | 北京亦庄厂房出租_经开区产业园招商信息平台 | 山东彩钢板房,山东彩钢活动房,临沂彩钢房-临沂市贵通钢结构工程有限公司 | 磁棒电感生产厂家-电感器厂家-电感定制-贴片功率电感供应商-棒形电感生产厂家-苏州谷景电子有限公司 | 电力测功机,电涡流测功机,磁粉制动器,南通远辰曳引机测试台 | 环压强度试验机-拉链拉力试验机-上海倾技仪器仪表科技有限公司 | EDLC超级法拉电容器_LIC锂离子超级电容_超级电容模组_软包单体电容电池_轴向薄膜电力电容器_深圳佳名兴电容有限公司_JMX专注中高端品牌电容生产厂家 | 上海小程序开发-小程序制作-上海小程序定制开发公司-微信商城小程序-上海咏熠 | 环氧乙烷灭菌器_压力蒸汽灭菌器_低温等离子过氧化氢灭菌器 _低温蒸汽甲醛灭菌器_清洗工作站_医用干燥柜_灭菌耗材-环氧乙烷灭菌器_脉动真空压力蒸汽灭菌器_低温等离子灭菌设备_河南省三强医疗器械有限责任公司 | 丙烷/液氧/液氮气化器,丙烷/液氧/液氮汽化器-无锡舍勒能源科技有限公司 | 二手光谱仪维修-德国OBLF光谱仪|进口斯派克光谱仪-热电ARL光谱仪-意大利GNR光谱仪-永晖检测 | 除尘器布袋骨架,除尘器滤袋,除尘器骨架,电磁脉冲阀膜片,卸灰阀,螺旋输送机-泊头市天润环保机械设备有限公司 | 阳光模拟试验箱_高低温试验箱_高低温冲击试验箱_快速温变试验箱|东莞市赛思检测设备有限公司 | 全自动过滤器_反冲洗过滤器_自清洗过滤器_量子除垢环_量子环除垢_量子除垢 - 安士睿(北京)过滤设备有限公司 |