1、第 1 页 （共 20 页）基于 Javascript 设计模式的收银页面部分效果的实现摘 要：本论文详细描述了一个基于 Javascript 设计模式的收银页面部分效果的设计与实现过程，该网页功能主要包括结算、数量、删除、会员、折扣、挂单、退货、查交易和更多按钮，用户可以通过点击按钮进行相关操作，该 pc 端页面结合 HTML5、CSS3 和 jQuery等一些脚本语言，并使用多种网页开发工具制作出来。关键词：web 前端；javascript；设计模式Abstract：This paper describes in detail the design and implementation
2、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
3、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 的编程方法将会
4、受到越来越多的关注。1 开发环境（1）Win8 操作系统（2）sublime text 编辑器第 2 页 （共 20 页）（3）xampp 虚拟服务器（4）谷歌浏览器、火狐浏览器、IE9.0 浏览器2 javascript 设计模式讲解2.1 设计模式概述设计模式这个术语是在上世纪 90 年代经由 Erich Gamma 等人从建筑设计领域引入到计算机科学的 2。它是对软件设计中一些重复出现，广泛存在的问题所提出的解决方案。由此可以说明设计模式并不是某些语言的某块代码，它是一种思想，在编码时遇到的各种问题可以采取的解决方案，它不是万能代码块，而更倾向于一种逻辑思维。2.2 设计模式的大分类设计
5、模式分三大类，共有 23 种：第一种是创建型模式：它包括了五种设计模式，分别是工厂模式，抽象工厂模式，单例模式，建造者模式与原型模式。 第二种是结构型模式：它包括了七种设计模式，分别是组合模式，适配器模式，享元模式，桥接模式，装饰者模式，外观模式以及代理模式。 第三种是行为型模式：它包括了十一种设计模式，分别是职责链模式，模板方法模式，迭代器模式，中介者模式，备忘录模式，观察者模式，解释器模式，策略模式，命令模式，状态模式和访问者模式。 2.3 设计模式中的命令模式什么是命令模式？ 命令模式是将执行的命令封装,解决命令的发起者与命令的执行者之间的耦合。每一条命令实质上是一个操作。命令的使用者不
6、必要了解命令的执行者(命令对象)的命令接口是如何实现的、命令是如何接受的、命令时如何执行的。所有的命令都被存储在命令对象中。command 模式背后的主要思想是:它为我们提供了一种分离职责的手段,这些第 3 页 （共 20 页）职责包括从执行命令的任意地方发布命令以及将该职责转而委托给不同的对象。命令的优点自然是解决命令使用者之间的耦合。新的命令很容易加入到命令系统中,供使用者使用。命令的使用具有一致性,多数的命令在一定程度上是简化操作方法的使用的 3。命令的意思是用一个简单方法或函数去执行和这个命令相关的实际操作。就如同用遥控器打开电视一样，只按一个按键就可以打开电视，简单、方便。它具体的实
7、现操 作我们不用关心。那是由电视器来处理的。电视对遥控器提供了一个接口(信号)，遥控器只需要在点击时实现这个接口就可以了，流程图如图 2-1。图 2-1 命令流程图Command：用来定义命令的接口，同时声明执行的方法。ConcreteCommand：命令接口实现对象，是“虚”的实现；通常会持有接收者，并调用接收者的功能来完成命令要执行的操作。Receiver：接收者，真正执行命令的对象。任何类都可能成为一个接收者，只要它能够实现命令要求实现的相应功能。Invoker：要求命令对象执行请求，通常会持有命令对象，可以持有很多的命令对象。这个是客户端真正触发命令并要求命令执行相应操作的地方，也就是
8、说相当于使用命令对象的入口。Client：创建具体的命令对象，并且设置命令对象的接收者。注意这个不是commandExecute()InvokerClientReceiverAction() ConcretecommandExecute()statereceiverReceiver Action()第 4 页 （共 20 页）我们常规意义上的客户端，而是在组装命令对象和接收者，或许，把这个 Client称为装配者会更好理解，因为真正使用命令的客户端是从 Invoker 来触发执行。命令模式优点：（1）使对象之间的耦合度降低。（2）可以很容易的在系统中加入新的命令。（3）设计一个组合命令变得比较
9、容易。（4）实现不同的功能可以调用同一个方法。3 技术需求分析设计模式是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。设计模式的使用相比传统方法有很多优点，第一，它是模块化进行封装的，可复用性强；第二，它使系统有很好的扩展性；第三，多人开发时效率高，第四，它能够使软件更容易修改和维护；第五，它降低了对象之间的耦合度 4。下面就是使用设计模式做的一个小页面功能。这是公司的一个大项目，该界面上至少有数十个 button 按钮，项目又比较复杂，公司一般的选择是多人分工合作来完成该项目，公司会决定让某个程序员来负责绘制这些按钮，另外再安排一些程序员编写点击按钮后的具体行为，这些行为
10、都将被封装在对象里。在公司里面待过的人的都知道，在大型项目开发中，这是很正常的分工。绘制这些按钮的程序员根本就不知道他绘制的这些按钮会用来做什么，可能会用来弹出一个页面，也可能会用来刷新菜单界面，他只知道点击这些按钮会发生一些事情。这些按钮绘制完之后，如何给它绑定 onclick 事件？这里就要用到命令模式了，命令模式的应用场景是：有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么，此第 5 页 （共 20 页）时希望用一种松耦合的方式来设计软件，使得请求发送者和请求接收者能够消除彼此之间的耦合关系 5。而在这里，当用户点击了按钮之后，必须向某些负责具体行为
11、的对象发送请求，而这些对象就是所谓的请求接收者。但是我们现在并不知道请求的接收者具体是什么对象，也不知道接收者究竟会去做些什么。这时我们就需要借助命令对象的帮助，来更好的解开按钮和负责具体行为对象之间的耦合。4 网页效果图分析图 4-1 收银系统主页如图 4-1，这是刚进入系统时的页面，正如大家知道的收银页面，基本上所有的操作都是在这个页面进行的。除去头部下面可分为两大部分，挂单区和商品列表区。首先可以看到挂单区最上方有一个条形码输入框，即是扫描条形码时对应的商品码会读取到该输入框中，也可以手动输入对应的条形码，然后按回车，如果第 6 页 （共 20 页）该商品存在，则会把该商品对应的数据显示
12、到挂单中。其次可以看到挂单旁边有很多按钮，下面依次看各个按钮的效果：（1）结算按钮，它在情况不同时分别弹出不同的页面，如图 4-2 和图 4-3。图 4-2 默认的结算页面图 4-3 退货时的结算页面（2）加减号按钮，该按钮会增加挂单中选中的商品数量，如果未选中则不起作用；（3）数量按钮是用来修改商品数量的，此处暂时没做，弹出的页面如图 4-4；第 7 页 （共 20 页）图 4-4 数量按钮单击后弹出的页面（4）删除按钮是用来删除挂单的，点击之后，在弹出的询问页面中单击确认，挂单中的商品将会会全部被删除，删除单击效果如图 4-5 和图 4-6；图 4-5 删除按钮单击后弹出的页面图 4-6
13、此时的挂单已删除第 8 页 （共 20 页）图 4-7 会员按钮点击后（5）会员按钮点击后如图 4-7；（6）折扣按钮，该页面和数量按钮的单击基本上是同一个页面，就不再贴图了；（7）挂单按钮弹出页面如图 4-8：（8）退货按钮，该按钮点击后你会看到左侧挂单中有变化，同时再去单击结算，结算页面也会有变化，如图 4-9；（9）查交易按钮弹出页面如图 4-10；（10）更多按钮如图 4-11。第 9 页 （共 20 页）图 4-8 挂单按钮点击后图 4-9 退货按钮点击后图 4-10 查交易按钮点击后第 10 页 （共 20 页）图 4-11 更多按钮点击后5 网页功能设计目的 （1）学习网页制作所涉及的各类脚本语言：HTML、CSS、jQuery、javascript 等。（2）了解并学习 javascript 中的 23 种设计模式，并试着在网页中使用其中一两种设计模式。（3）通过此网页功能的制作，更好的更灵活的在以后的工作学习中使用设计模式。6 网页功能实现收银网页看起来似乎只有一个页面，事实上它包含了十多个页面，只是全是通过按钮及弹出层来展现的，这个 js 的实现说起来也简单，给每个按钮分别绑定事件就行了 6。刚开始的时候我是这么写的，后来看了设计模式之后，想试试能不能用设计模式来实现这个多个按钮事件的效果，于是用了传统的命令模式，
