毕业设计（论文）-基于Javascript设计模式的收银页面部分效果的实现.doc

基于Javascript设计模式的收银页面部分效果的实现 摘 要：本论文详细描述了一个基于Javascript设计模式的收银页面部分效果的设计与实现过程，该网页功能主要包括结算、数量、删除、会员、折扣、挂单、退货、查交易和更多按钮，用户可以通过点击按钮进行相关操作，该pc端页面结合HTML5、CSS3和jQuery等一些脚本语言，并使用多种网页开发工具制作出来。关键词：web前端；javascript；设计模式全套设计加扣 3012250582Abstract：This paper describes in detail the design and implementation of a cash register page based on Javascript design pattern.This page features include settlement, quantity, delete, membership, discount, lodging, return, check transactions and more buttons.Users can click on the button to carry out the relevant operation, the PC end page combined with HTML5, CSS3 and jQuery, and some other scripting languages, and the use of a variety of web development tools to produce.Key words：web front end; javascript; Design patterns 随着互联网时代的发展，web技术突飞猛进，人们可以通过超文本标识语言html和层叠样式表css制作出复杂精美的web网页1。而在客户端实现的动态效果，javascript成为了最重要的一部分，它是不可缺少的。于是如何全面掌握javascript的编程方法将会受到越来越多的关注。1 开发环境（1）Win8操作系统（2）sublime text编辑器（3）xampp虚拟服务器（4）谷歌浏览器、火狐浏览器、IE9.0浏览器2javascript设计模式讲解2.1 设计模式概述设计模式这个术语是在上世纪90年代经由Erich Gamma等人从建筑设计领域引入到计算机科学的2。它是对软件设计中一些重复出现，广泛存在的问题所提出的解决方案。由此可以说明设计模式并不是某些语言的某块代码，它是一种思想，在编码时遇到的各种问题可以采取的解决方案，它不是万能代码块，而更倾向于一种逻辑思维。2.2 设计模式的大分类设计模式分三大类，共有23种：第一种是创建型模式：它包括了五种设计模式，分别是工厂模式，抽象工厂模式，单例模式，建造者模式与原型模式。 第二种是结构型模式：它包括了七种设计模式，分别是组合模式，适配器模式，享元模式，桥接模式，装饰者模式，外观模式以及代理模式。 第三种是行为型模式：它包括了十一种设计模式，分别是职责链模式，模板方法模式，迭代器模式，中介者模式，备忘录模式，观察者模式，解释器模式，策略模式，命令模式，状态模式和访问者模式。 2.3 设计模式中的命令模式什么是命令模式？命令模式是将执行的命令封装,解决命令的发起者与命令的执行者之间的耦合。每一条命令实质上是一个操作。命令的使用者不必要了解命令的执行者(命令对象)的命令接口是如何实现的、命令是如何接受的、命令时如何执行的。所有的命令都被存储在命令对象中。command模式背后的主要思想是:它为我们提供了一种分离职责的手段,这些职责包括从执行命令的任意地方发布命令以及将该职责转而委托给不同的对象。命令的优点自然是解决命令使用者之间的耦合。新的命令很容易加入到命令系统中,供使用者使用。命令的使用具有一致性,多数的命令在一定程度上是简化操作方法的使用的3。命令的意思是用一个简单方法或函数去执行和这个命令相关的实际操作。就如同用遥控器打开电视一样，只按一个按键就可以打开电视，简单、方便。它具体的实现操 作我们不用关心。那是由电视器来处理的。电视对遥控器提供了一个接口(信号)，遥控器只需要在点击时实现这个接口就可以了，流程图如图2-1。commandExecute()InvokerClientReceiverAction()ConcretecommandExecute()statereceiverReceiver Action()图2-1 命令流程图Command：用来定义命令的接口，同时声明执行的方法。ConcreteCommand：命令接口实现对象，是“虚”的实现；通常会持有接收者，并调用接收者的功能来完成命令要执行的操作。Receiver：接收者，真正执行命令的对象。任何类都可能成为一个接收者，只要它能够实现命令要求实现的相应功能。Invoker：要求命令对象执行请求，通常会持有命令对象，可以持有很多的命令对象。这个是客户端真正触发命令并要求命令执行相应操作的地方，也就是说相当于使用命令对象的入口。Client：创建具体的命令对象，并且设置命令对象的接收者。注意这个不是我们常规意义上的客户端，而是在组装命令对象和接收者，或许，把这个Client称为装配者会更好理解，因为真正使用命令的客户端是从Invoker来触发执行。命令模式优点：（1） 使对象之间的耦合度降低。（2） 可以很容易的在系统中加入新的命令。（3） 设计一个组合命令变得比较容易。（4） 实现不同的功能可以调用同一个方法。3技术需求分析设计模式是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。设计模式的使用相比传统方法有很多优点，第一，它是模块化进行封装的，可复用性强；第二，它使系统有很好的扩展性；第三，多人开发时效率高，第四，它能够使软件更容易修改和维护；第五，它降低了对象之间的耦合度4。下面就是使用设计模式做的一个小页面功能。这是公司的一个大项目，该界面上至少有数十个button按钮，项目又比较复杂，公司一般的选择是多人分工合作来完成该项目，公司会决定让某个程序员来负责绘制这些按钮，另外再安排一些程序员编写点击按钮后的具体行为，这些行为都将被封装在对象里。在公司里面待过的人的都知道，在大型项目开发中，这是很正常的分工。绘制这些按钮的程序员根本就不知道他绘制的这些按钮会用来做什么，可能会用来弹出一个页面，也可能会用来刷新菜单界面，他只知道点击这些按钮会发生一些事情。这些按钮绘制完之后，如何给它绑定onclick事件？这里就要用到命令模式了，命令模式的应用场景是：有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么，此时希望用一种松耦合的方式来设计软件，使得请求发送者和请求接收者能够消除彼此之间的耦合关系5。而在这里，当用户点击了按钮之后，必须向某些负责具体行为的对象发送请求，而这些对象就是所谓的请求接收者。但是我们现在并不知道请求的接收者具体是什么对象，也不知道接收者究竟会去做些什么。这时我们就需要借助命令对象的帮助，来更好的解开按钮和负责具体行为对象之间的耦合。4 网页效果图分析图4-1 收银系统主页如图4-1，这是刚进入系统时的页面，正如大家知道的收银页面，基本上所有的操作都是在这个页面进行的。除去头部下面可分为两大部分，挂单区和商品列表区。首先可以看到挂单区最上方有一个条形码输入框，即是扫描条形码时对应的商品码会读取到该输入框中，也可以手动输入对应的条形码，然后按回车，如果该商品存在，则会把该商品对应的数据显示到挂单中。其次可以看到挂单旁边有很多按钮，下面依次看各个按钮的效果：（1）结算按钮，它在情况不同时分别弹出不同的页面，如图4-2和图4-3。图4-2 默认的结算页面图4-3 退货时的结算页面（2） 加减号按钮，该按钮会增加挂单中选中的商品数量，如果未选中则不起作用；（3） 数量按钮是用来修改商品数量的，此处暂时没做，弹出的页面如图4-4；图4-4 数量按钮单击后弹出的页面（4） 删除按钮是用来删除挂单的，点击之后，在弹出的询问页面中单击确认，挂单中的商品将会会全部被删除，删除单击效果如图4-5和图4-6；图4-5 删除按钮单击后弹出的页面图4-6 此时的挂单已删除图4-7 会员按钮点击后（5） 会员按钮点击后如图4-7；（6） 折扣按钮，该页面和数量按钮的单击基本上是同一个页面，就不再贴图了；（7） 挂单按钮弹出页面如图4-8：（8） 退货按钮，该按钮点击后你会看到左侧挂单中有变化，同时再去单击结算，结算页面也会有变化，如图4-9；（9） 查交易按钮弹出页面如图4-10；（10） 更多按钮如图4-11。图4-8 挂单按钮点击后图4-9 退货按钮点击后图4-10 查交易按钮点击后图4-11 更多按钮点击后5 网页功能设计目的 （1）学习网页制作所涉及的各类脚本语言：HTML、CSS、jQuery、javascript等。（2）了解并学习javascript中的23种设计模式，并试着在网页中使用其中一两种设计模式。（3）通过此网页功能的制作，更好的更灵活的在以后的工作学习中使用设计模式。6 网页功能实现收银网页看起来似乎只有一个页面，事实上它包含了十多个页面，只是全是通过按钮及弹出层来展现的，这个js的实现说起来也简单，给每个按钮分别绑定事件就行了6。刚开始的时候我是这么写的，后来看了设计模式之后，想试试能不能用设计模式来实现这个多个按钮事件的效果，于是用了传统的命令模式，后来发现有比较灵活的命令模式来更好的实现该效果，于是就又写了一遍。所以说，虽然这个页面不难，但是js功能实现，我前前后后写了三四遍。就是这样一个不难的页面让我学会了使用命令模式，同时命令模式中还使用了js原型继承。下面就来说说具体实现：（1） 对于左侧挂单中钱数的计算，我分别写了两个函数，然后适当的时候调用即可，这里就不详述了，下面是对应的代码：/合计钱数function totalMoney() var lines = $(.goods-detail-table).find(.goods-line); var sum = 0; for(var i = 0; i lines.length; i+) sum += parseFloat(lines.eq(i).find(.line-total span). text(); $(#total-num).html(sum.toFixed(2);/单行钱数计算function lineMoney()$(.goods-line).each(function()var num = parseInt($(this).find(.goods-num-box).text();var price = parseFloat ($(this).find(.line-price).find(span).text(); var total = num * price; $(this).find(.line-total).find(span).html(total.toFixed(2); )（2） 对于按钮事件的实现，这里会进行详细讲述第一次写的程序段只是顺着自己的思路写的，达到了想要的效果，但是完全是卡死的，就是说代码没那么灵活，不能随意改动其中的某个对象或者方法，一旦改动，整个功能就会错乱。详细代码见附录。后来看了js设计模式之后，用了第二种方式，就是传统的命令模式，详见附录。设计模式主要是把变化的事物和不变的事物分隔开，首先定义一个setMyCommand方法，setMyCommand 方法负责往已经定义的按钮上面安装相应命令。可以确定的是，点击按钮会执行某个 myCommand 命令，执行命令的动作被约定为调用 myCommand 对象的execute()方法：/预留安装命令的接口var setMyCommand = function(button, command)button.click(function()command.execute(););点击按钮后的具体行为被放在BtnFuncs这个对象中：/点击按钮之后的具体行为，分布在Btnfuncs这个对象中var BtnFuncs = / 结算settlement: function()if($(#refund).hasClass(refund-flag)openNewWin(html/refund_account.html,934px,500px); else openNewWin(html/account.html,934px,500px);,/数量number: function()openNewWin(html/number.html,358px,353px);.咱们只有把这些具体行为都封装在对应的命令类中，才可以使button变得有用：/ 将具体行为封装在命令类中var SettlementCommand = function(receiver)this.receiver = receiver;SettlementCtotype.execute = function()this.receiver.settlement();var NumberCommand = function(receiver)this.receiver = receiver;NumberCtotype.execute = function()this.receiver.number();最后就是把命令接收者传入到command对象中，并且把command对象安装到button上面：/把命令接受者传入到command对象中var settlementCommand = new SettlementCommand(BtnFuncs);var numberCommand = new NumberCommand(BtnFuncs);/把command对象安装到button上setCommand(settlementBtn, settlementCommand);setCommand(numberBtn, numberCommand);然而这只是模拟传统面向对象语言的命令模式实现，在command对象的execute方法里封装过程式的请求调用，通过调用封装方法，就能够把运算块包装成形。Command对象能够被四处传递，因此在调用命令的时候，用户没必要关心事情是怎样进行的。第三次我又使用了闭包实现的命令模式，见附录。（3） 商品的增加或减少的实现：/已购商品的删除或者数量减少（即减号按钮）function delGoods(self)$(self).click(function()var oLine = $(.goods-detail-box).find(.goods-line);for(var i = 0; i oLine.length; i+)if(oLine.eq(i).hasClass(active-line)var oNumBox = oLine.eq(i).find(.goods-num-box);var oNum = parseInt(oNumBox.text();if(oNum = 1)oLine.eq(i).remove(); else oNum -;oNumBox.text(oNum);btnEvent();)/已购商品数量的添加（即加号按钮）function addGoods(self)$(self).click(function()var oLine = $(.goods-detail-box).find(.goods-line);for(var i = 0; i oLine.length; i+)if(oLine.eq(i).hasClass(active-line)var oNumBox = oLine.eq(i).find(.goods-num-box);var oNum = parseInt(oNumBox.text();oNum +;oNumBox.text(oNum);btnEvent();) （4） 右侧所列商品的双击添加到挂单的实现：function dbclickAdd()$(.goods-tr).dblclick(function()var goodsTable = $(.goods-detail-table);var trGoodId = $(this).find(.tr-good-id).text();var goodLines = goodsTable.find(.goods-line);for(var i = 0; i goodLines.length; i+)var linesGoodId = goodLines . eq(i) . find(.line-good-id).text();if(trGoodId = linesGoodId)var thisBox = goodLines.eq(i).find(.goods-num-box);var thisNum = parseInt(thisBox.text();thisNum +;thisBox.html(thisNum);btnEvent();return false; var trName = $(this).find(.tr-name).text(); var trGoodsNum = $(this).find(.tr-goods-num).text(); var trPrice = $(this).find(.tr-price).text();var str = + 1 + + + trName + + + trGoodId + + ￥ + trPrice + + + + 数量:1 + ￥5.00 + ;goodsTable.prepend(str);btnEvent();)7 技术实现涉及到的prototype讲解了解过设计模式的人都知道，js设计模式中最常见的有简单工厂模式、单例模式、观察者模式、适配器模式、代理模式、桥接模式、外观模式访问者模式、策略模式、模板方法模式、中介者模式、组合模式等设计模式，可以说设计模式有很多，在刚开始学习的时候我们总想用其中一种模式来实现某种功能，其实那是不合理的，一个功能实现中会用到不止一种模式7。在刚开始学的时候我们会认为我们不会用，从来没用过设计模式，那你也错了，或许在我们写程序写熟了之后，无意中已经用到了某几种设计模式而已，只是你不知道它有个对应的名字而已，所以不要觉得它很难学。除却那几种设计模式不提之后，有一个对象是一定要说一说的，那就是prototype，在上面的使用命令模式实现相应功能的程序段中，我相信你们看到这个对象了，在命令类中封装行为的时候：var SettlementCommand = function(receiver)this.receiver = receiver;SettlementCtotype.execute = function()this.receiver.settlement();var NumberCommand = function(receiver)this.receiver = receiver;NumberCtotype.execute = function()this.receiver.number();这里的prototype到底有什么作用？为什么要用它，把execute()方法直接写在对应的命令类中不行么？下面就要说说这个prototype：prototype又叫原型，一个原型就像其他语言中的一个类，它定义的属性能够被此类产生的所有对象所共享。然而它又不像一个类,原型可以在运行时获得和改变。可以增加属性到原型上或者删除原型上已经存在的属性。所有的变化将立即影响由原型派生的对象8。提到原型就不得不说原型模式，它实际上就是基于原型链实现对象之间的继承，原型模式就是将原型对象指向创建对象的类，使这些类共享原型对象的方法和属性，然而这种模式的继承是基于一种属性或者方法的共享，而不是对属性和方法的复制。例如：functionHelloClass()/构造方法functionHelloSubClass()/构造方法HelloSubCtotype = HelloCtotype;HelloSubCtotype.Propertys = name;HelloSubCtotype.subMethods = function()/方法实现代码alert(inMethods);varobj = newHelloSubClass();obj.subMethods();介绍完这些，下面详细说说为什么在命令模式的部分片段中会用到原型prototype，原型对象prototype最主要的用途就是把经常用到的变量和方法独立到本身中，给其他对象使用，上面那段代码，如果写成下面这样：var SettlementCommand = function(receiver)this.receiver = receiver;this.execute = function()receiver.settlement();var NumberCommand = function(receiver)this.receiver = receiver;this.execute = functio