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

您的位置:首頁技術文章
文章詳情頁

JavaScript命令模式原理與用法實例詳解

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

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

第一,命令模式: (1)用于消除調用者和接收者之間直接的耦合的模式,并且可以對(調用這個過程進行留痕操作)

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

一種情況為發出者直接作用于執行者,這樣耦合度很高,另外一種情況為,在發出者和執行者之間增加一個用存儲命令的命令訪問庫也即命令命令模式。第二,現在我們通過一個需求來學習該模式需求為:

1.有一個'添加流程的按鈕'單擊的時候 就會添加一個新的文本當做流程的描述

2.有'返回','重做' 2個按鈕來完成相應的任務。第三,界面為

<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/設計模式第三部分/命令模式/keymaster.min.js'></script><script src='http://www.hdgsjgj.cn/bcjs/Js/設計模式第三部分/命令模式/uuid.js'></script><script src='http://www.hdgsjgj.cn/bcjs/Js/設計模式第三部分/命令模式/(18)命令模式.js'></script></body>

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

根據上述圖我們逐步完成步驟一,定義主應用程序----接收者

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

步驟二,為對象(執行者)建立命令訪問庫 ---意思是可以通過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。這里附上源碼

/*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前端代碼調試運行工具:http://tools.jb51.net/code/WebCodeRun測試上述代碼運行效果。

更多關于JavaScript相關內容還可查看本站專題:《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 爱佩恒温恒湿测试箱|高低温实验箱|高低温冲击试验箱|冷热冲击试验箱-您身边的模拟环境试验设备技术专家-合作热线:400-6727-800-广东爱佩试验设备有限公司 | 上海洗地机-洗地机厂家-全自动洗地机-手推式洗地机-上海滢皓洗地机 | 电镀标牌_电铸标牌_金属标贴_不锈钢标牌厂家_深圳市宝利丰精密科技有限公司 | 隆众资讯-首页_大宗商品资讯_价格走势_市场行情 | 一体化净水器_一体化净水设备_一体化水处理设备-江苏旭浩鑫环保科技有限公司 | 首页-瓜尔胶系列-化工单体系列-油田压裂助剂-瓜尔胶厂家-山东广浦生物科技有限公司 | 钢衬四氟管道_钢衬四氟直管_聚四氟乙烯衬里管件_聚四氟乙烯衬里管道-沧州汇霖管道科技有限公司 | 气弹簧定制-气动杆-可控气弹簧-不锈钢阻尼器-工业气弹簧-可调节气弹簧厂家-常州巨腾气弹簧供应商 | 塑料瓶罐_食品塑料瓶_保健品塑料瓶_调味品塑料瓶–东莞市富慷塑料制品有限公司 | 苏州伊诺尔拆除公司_专业酒店厂房拆除_商场学校拆除_办公楼房屋拆除_家工装拆除拆旧 | 制氮设备_PSA制氮机_激光切割制氮机_氮气机生产厂家-苏州西斯气体设备有限公司 | 安徽合肥项目申报咨询公司_安徽合肥高新企业项目申报_安徽省科技项目申报代理 | Jaeaiot捷易科技-英伟达AI显卡模组/GPU整机服务器供应商 | 螺钉式热电偶_便携式温度传感器_压簧式热电偶|无锡联泰仪表有限公司|首页 | 碳纤维复合材料制品生产定制工厂订制厂家-凯夫拉凯芙拉碳纤维手机壳套-碳纤维雪茄盒外壳套-深圳市润大世纪新材料科技有限公司 | 【电子厂招聘_普工招工网_工厂招聘信息平台】-工立方打工网 | 成都茶楼装修公司 - 会所设计/KTV装修 - 成都朗煜装饰公司 | 防爆电机生产厂家,YBK3电动机,YBX3系列防爆电机,YBX4节防爆电机--河南省南洋防爆电机有限公司 | 武汉高温老化房,恒温恒湿试验箱,冷热冲击试验箱-武汉安德信检测设备有限公司 | 杭州营业执照代办-公司变更价格-许可证办理流程_杭州福道财务管理咨询有限公司 | 中医治疗皮肤病_潍坊银康医院「山东」重症皮肤病救治平台 | 福州仿石漆加盟_福建仿石漆厂家-外墙仿石漆加盟推荐铁壁金钢(福建)新材料科技有限公司有保障 | 安徽控制器-合肥船用空调控制器-合肥家电控制器-合肥迅驰电子厂 安徽净化板_合肥岩棉板厂家_玻镁板厂家_安徽科艺美洁净科技有限公司 | 国际高中-国际学校-一站式择校服务-远播国际教育 | 山东PE给水管厂家,山东双壁波纹管,山东钢带增强波纹管,山东PE穿线管,山东PE农田灌溉管,山东MPP电力保护套管-山东德诺塑业有限公司 | 布袋除尘器|除尘器设备|除尘布袋|除尘设备_诺和环保设备 | 污水/卧式/潜水/钻井/矿用/大型/小型/泥浆泵,价格,参数,型号,厂家 - 安平县鼎千泵业制造厂 | 杭州货架订做_组合货架公司_货位式货架_贯通式_重型仓储_工厂货架_货架销售厂家_杭州永诚货架有限公司 | 学考网学历中心| 一路商机网-品牌招商加盟优选平台-加盟店排行榜平台 | 卓能JOINTLEAN端子连接器厂家-专业提供PCB接线端子|轨道式端子|重载连接器|欧式连接器等电气连接产品和服务 | 恒压供水控制柜|无负压|一体化泵站控制柜|PLC远程调试|MCGS触摸屏|自动控制方案-联致自控设备 | 济南玻璃安装_济南玻璃门_济南感应门_济南玻璃隔断_济南玻璃门维修_济南镜片安装_济南肯德基门_济南高隔间-济南凯轩鹏宇玻璃有限公司 | 登车桥动力单元-非标液压泵站-非标液压系统-深圳市三好科技有限公司 | 菏泽知彼网络科技有限公司 | 越南专线物流_东莞国际物流_东南亚专线物流_行通物流 | 美侍宠物-专注宠物狗及宠物猫训练|喂养|医疗|繁育|品种|价格 | 带式压滤机_污泥压滤机_污泥脱水机_带式过滤机_带式压滤机厂家-河南恒磊环保设备有限公司 | ?水马注水围挡_塑料注水围挡_防撞桶-常州瑞轩水马注水围挡有限公司 | 外贮压-柜式-悬挂式-七氟丙烷-灭火器-灭火系统-药剂-价格-厂家-IG541-混合气体-贮压-非贮压-超细干粉-自动-灭火装置-气体灭火设备-探火管灭火厂家-东莞汇建消防科技有限公司 | 成都软件开发_OA|ERP|CRM|管理系统定制开发_成都码邻蜀科技 |