论文部分内容阅读
摘 要：针对目前网上超市建模困难的问题，对JQuery的无刷新异步加载、动画实现、拖拽素材等技术进行了深入的研究，提出了一种可以快速可视化设计出与实体超市布局一致的网上超市模型的方法。实验结果表明，该方法操作简单，设计出的网上超市模型可扩展性强。
关键词：JQuery；网上超市模型；可视化
中图分类号：TP31.11 文献标识码：A 文章编号：
Abstract： Modeling of online supermarket was difficult currently. Some techniques of JQuery， like no fresh asynchronous loading， animations， dragging， were researched. A visual design method was proposed， which could make an online supermarket model consistent with physical supermarket fast. Experimental results show that this method is simple and the online model is scalable.
Keywords： JQuery； Online Supermarket Model； Visualization
0 引 言
早在古希腊时代，人们就使用曲线来表示函数与变量之间的关系，这是人类使用可视化的开端，美国把计算机应用于科学计算，并最早实现了计算结果的可视化[1]。随着计算机领域的进一步发展，互联网已经成为人们生活中的一部分。与互联网对接将成为超市未来发展的趋势。把现实生活中的实体超市移植到互联网，让消费者能够随时随地“逛”超市成为超市发展的目标。实现该目标的关键是如何方便、快速地建立与实体超市对应的网上超市模型。目前已经有类似的可视化页面设计技术，但目前的技术大多属于富客户端技术，使用这些技术开发的可视化页面一般都局限于访问人数相对较少的企业内部管理系统。网上超市需要面向大众，人数多而且用户访问时间比较集中，加上网上超市页面访问时需要加载的内容较多，在这种情况下使用富客户端技术将会给服务器带来较大的压力。轻客户端技术通常用JavaScript来实现。JavaScript的核心API设计得很简单，但由于浏览器之间的不兼容性，导致客户端的API过于复杂[2]。目前流行和广泛采用的JQuery是弥补其不足的技术。JQuery由于其开源、易于使用、功能强大、展现优雅、兼容性极佳等特点而迅速赢得了Web开发者的青睐[3]。从2006年发布到现在一直得到中大型互联网企业的认可和应用，可以应用其开发出轻客户端技术的页面，解决网上超市模型可视化设计的关键技术问题。
1 网上超市模型的可视化设计
随着计算机可视化的完善和推广，商业领域对计算机的可视化的依赖越来越大。通过可视化设计，将实体超市模型快速转变为与实体超市一致的网上超市可以提高用户体验，争取到更多的顾客资源，提高超市的收益。
1.1 总体设计方案
网上超市模型可视化设计的方案最直观的方法就是根据实体的超市来定制。但由于超市众多，每个超市的规模风格和布局各不相同，根据实体超市定制网上超市模型需要软件开发商逐个超市去采集相关数据资料，这方式需要投入较多的劳动力资源。而且，实体超市模型可能会随着超市发展发生改变，一旦发生变化，这种方式需要通过修改代码对页面重新进行设计，扩展性差。
解决的办法是软件开发商提供一个平台，超市经营者通过该平台的简单操作，如拖拽、拉伸、旋转，就可以很轻松的设计出自己的网上超市模型，不需要涉及到代码操作。这种通用性可视化设计方式，既可以省下很多劳动力资源，又可以提高设计效率。超市经营者在不需要特定技术人员支持情况下就可以维护和修改网上模型，扩展性强。
1.2 网上超市可视化建模的关键问题
网上超市模型平台设计面临最大的问题就是如何让超市方便设计出网上超市模型并且取得良好的视觉效果。现今最著名的三维模型当属谷歌街景，但这种设计方法需要比较高的拍摄技巧，实现起来比较困难。但是它的一些设计理念是可以借鉴并加以修改完善。先将超市分割成不同的模块，超市上传各个模块的图片资料，然后通过计算机将各个模块拼接成超市的网上超市模型。如果超市以后规模发生改变，只要替换掉该模块的内容或者修改模块的摆放位置即可实现，而总体布局不会受到影响。
1.3 超市可视化建模流程
人是一种习惯性生物，操作是否流畅取决于其既有经验和习惯，所以Web界面设计必须首先了解和尊重用户的习惯[4]。设计网上超市模型可视化页面的实现流程也必须符合人为的习惯，目前有一种网络游戏通过拖拽家具来设计房屋内景，取得良好的用户体验效果，本设计采用类似的做法，让超市经营者自行设计出网上超市模型。模型最终都要转化成数据记录在数据库里，因此要建立数据库来记录不同模块的内容和位置等数据。当用户打开页面的时候系统从数据库获得数据后再根据这些数据生成模型。图1为网上超市可视化建模的具体流程。
2 网上超市模型可视化设计的实现
视觉在人类认知系统中具有很强的感知通道，可视化呈现和交互使得大规模数据访问更容易[5]。设计出符合人视觉常识的可视化模型能够方便超市经营者通过日常思维设计网上超市模型，方便理解且降低操作错误率。通过JQuery实现网上超市可视化设计的主要技术包括有素材菜单、拖拽与坐标定位、个性化增删查改等。
2.1 JQuery实现素材菜单
由于素材菜单不是常用的部分，如果把它固定位置会占用页面空间，应设计为用户需要时才让它显示出来，当不需要时将它隐藏。JQuery有丰富的页面动画实现方法可以调用，通过show（speed，[callback]）和hide（speed，[callback]）方法可以实现动画显示和动画隐藏，效果良好，还可以通过speed参数自定义动画时间和callback执行成功回调。将动画事件绑定在菜单伸缩按钮上，通过点击该按钮即可控制菜单栏的显示和隐藏。图2为素材菜单经270度旋转的效果图，当鼠标移到方向箭头时菜单会显示出来，鼠标离开该区域后会自动隐藏起来。 2.2 JQuery实现元素拖拽效果与坐标定位
传统的B/S架构网站都是由HTML、CSS和JavaScript构成，都是设计成静态页面和一些相关的表单提交，要让用户移动页面元素是很难实现的事情。JQuery封装了拖拽插件draggable，使得元素在页面中实现拖拽变成一件简单的事情，用选择器获得素材后调draggable方法即可。实现方法如下：
$（“”）.draggable（option）；
option为draggable可接受参数。当刚开始拖拽时可以使用start回调函数使得被拖拽的元素发生一些形状的变化以提示操作人员该元素正处于拖拽状态当中；当拖拽完毕时可以使用stop回调函数，经$（this）.offset（）.left和$（this）.offset（）.top分别获得素材的横坐标和纵坐标，然后和ajax结合异步将坐标值提交写入数据库，实现无刷新页面操作。无刷新的页面增强了用户和系统的交互性，改善了系统的刷新方式，让更多有趣的前端功能成为可能[6]。图3为超市布局变化前后的效果图，可以看出中间2个素材的位置通过拖拽后修改了相应位置。图3（a）为原来的布局结构，通过简单的拖拽后变成图3（b）的布局，修改后的位置信息在数据库自动进行保存。修改完成后重新打开页面将会呈现更新后图3（b）的布局。
2.3 JQuery实现个性化增删查改
可视化将隐藏的大量数据信息用相对直观、易于领会的图形和图像来表征，从而加快获取信息的速度[7]。大多数Web复杂的操作最终都将会转化为对数据库进行增、删、查、改操作，能够将这些数据信息的操作转变为可视化图像操作将方便于超市经营者建模。数据映射成一种易于理解的表现形式，决定最后图像中应该看到什么，又如何把它表现出来[8]。对于一个平台开发确定以什么样的形式给用户显示可视化页面十分重要。网上超市模型可视化设计也一样。设计和修改模型的操作可以转化成新增元素、修改元素、删除元素；当页面打开时将模型加载出来是查询元素。大多数用户阅读屏幕文字要比阅读书本上的文字慢，并感到不适，同时大量的文字显示会使用户产生厌倦情绪[4]。传统的增、删、查、改都是通过表单操作，文字数据较多，能够把枯燥的文字数据表单操作变成图形化操作将大大提高用户体验效果，同时也能提高建模效率。本设计中对这四种操作进行了人性人改造。新增元素：通过用户点击菜单中的元素，调用append（）方法在页面中增加一个新的元素图标，取代传统表单操作中新增一条数据展示给用户。修改元素：通过用户拖拽元素，异步提交修改后的位置，取代传统表单操作通过手动修改数据来实现修改。删除元素：通过用户将元素拖拽到回收站或者通过右键菜单选择删除，同时调用remove（）方法将元素图标从页面中移除，取代传统表单操作删除一条数据。查询元素：通过异步加载获得元素的数据，然后按照属性名将元素数据赋值给相应的属性，异步修改元素的位置、大小、表现形式来呈现元素数据，取代传统表单操作通过表单罗列数据的方法。通过个性化的增删查改可以让超市经营者更方便实效操作网上超市。
3结束语
可视化改善了工作体验，提高了办事效率，降低了错误率[9]。基于JQuery实现的可视化模型已经很不错，在网上超市的设计与实现方面达到了一个较好的效果，但是离虚拟现实一样逼真的境界还有一定差距。网上超市模型可视化设计会随着技术进步和消费者的审美要求的提高继续发展，或许不久的将来我们也可以把逛网上超市做到跟现今的客户端3D游戏一般，这让人期待。
参考文献：
[1]赵丽华.聂建国.可视化技术在图书馆中的应用[J].图书馆学刊，2011，（3）：111-114.
[2]David Flanagan.JavaScript权威指南[M].北京：机械工业出版社，2012.
[3]陶国荣.JQuery权威指南[M].北京：机械工业出版社，2013.
[4]高远.基于Web的人员管理信息系统的界面设计与实现[J].福建电脑，2009，（9）：13-14.
[5]汪飞.李强.左伍衡.可视化搜索用户界面[J].计算机辅助设计与图形学学报，2014，26（5）：708-716.
[6]李禹.基于Web的可视化考勤管理系统设计[J].吉首大学学报，2014，35（3）：49-53.
[7]米娜瓦尔·拉合买提.玛依拉·别克强塔依哇.朱静.Web应用数据挖掘可视化界面布局的设计方法[J].计算机技术与发展，2011，21（8）：30-38.
[8]吴昊.基于Web的城市三维景观可视化体系设计思路研究[J].科技创新导报，2010，（12）：11-13.
[9]张立成.张鸽.陈鑫.可视化Web控件开发及在设备管理系统中的应用[J].实验室研究与探索，2014，33（6）：259-262.
关键词：JQuery；网上超市模型；可视化
中图分类号：TP31.11 文献标识码：A 文章编号：
Abstract： Modeling of online supermarket was difficult currently. Some techniques of JQuery， like no fresh asynchronous loading， animations， dragging， were researched. A visual design method was proposed， which could make an online supermarket model consistent with physical supermarket fast. Experimental results show that this method is simple and the online model is scalable.
Keywords： JQuery； Online Supermarket Model； Visualization
0 引 言
早在古希腊时代，人们就使用曲线来表示函数与变量之间的关系，这是人类使用可视化的开端，美国把计算机应用于科学计算，并最早实现了计算结果的可视化[1]。随着计算机领域的进一步发展，互联网已经成为人们生活中的一部分。与互联网对接将成为超市未来发展的趋势。把现实生活中的实体超市移植到互联网，让消费者能够随时随地“逛”超市成为超市发展的目标。实现该目标的关键是如何方便、快速地建立与实体超市对应的网上超市模型。目前已经有类似的可视化页面设计技术，但目前的技术大多属于富客户端技术，使用这些技术开发的可视化页面一般都局限于访问人数相对较少的企业内部管理系统。网上超市需要面向大众，人数多而且用户访问时间比较集中，加上网上超市页面访问时需要加载的内容较多，在这种情况下使用富客户端技术将会给服务器带来较大的压力。轻客户端技术通常用JavaScript来实现。JavaScript的核心API设计得很简单，但由于浏览器之间的不兼容性，导致客户端的API过于复杂[2]。目前流行和广泛采用的JQuery是弥补其不足的技术。JQuery由于其开源、易于使用、功能强大、展现优雅、兼容性极佳等特点而迅速赢得了Web开发者的青睐[3]。从2006年发布到现在一直得到中大型互联网企业的认可和应用，可以应用其开发出轻客户端技术的页面，解决网上超市模型可视化设计的关键技术问题。
1 网上超市模型的可视化设计
随着计算机可视化的完善和推广，商业领域对计算机的可视化的依赖越来越大。通过可视化设计，将实体超市模型快速转变为与实体超市一致的网上超市可以提高用户体验，争取到更多的顾客资源，提高超市的收益。
1.1 总体设计方案
网上超市模型可视化设计的方案最直观的方法就是根据实体的超市来定制。但由于超市众多，每个超市的规模风格和布局各不相同，根据实体超市定制网上超市模型需要软件开发商逐个超市去采集相关数据资料，这方式需要投入较多的劳动力资源。而且，实体超市模型可能会随着超市发展发生改变，一旦发生变化，这种方式需要通过修改代码对页面重新进行设计，扩展性差。
解决的办法是软件开发商提供一个平台，超市经营者通过该平台的简单操作，如拖拽、拉伸、旋转，就可以很轻松的设计出自己的网上超市模型，不需要涉及到代码操作。这种通用性可视化设计方式，既可以省下很多劳动力资源，又可以提高设计效率。超市经营者在不需要特定技术人员支持情况下就可以维护和修改网上模型，扩展性强。
1.2 网上超市可视化建模的关键问题
网上超市模型平台设计面临最大的问题就是如何让超市方便设计出网上超市模型并且取得良好的视觉效果。现今最著名的三维模型当属谷歌街景，但这种设计方法需要比较高的拍摄技巧，实现起来比较困难。但是它的一些设计理念是可以借鉴并加以修改完善。先将超市分割成不同的模块，超市上传各个模块的图片资料，然后通过计算机将各个模块拼接成超市的网上超市模型。如果超市以后规模发生改变，只要替换掉该模块的内容或者修改模块的摆放位置即可实现，而总体布局不会受到影响。
1.3 超市可视化建模流程
人是一种习惯性生物，操作是否流畅取决于其既有经验和习惯，所以Web界面设计必须首先了解和尊重用户的习惯[4]。设计网上超市模型可视化页面的实现流程也必须符合人为的习惯，目前有一种网络游戏通过拖拽家具来设计房屋内景，取得良好的用户体验效果，本设计采用类似的做法，让超市经营者自行设计出网上超市模型。模型最终都要转化成数据记录在数据库里，因此要建立数据库来记录不同模块的内容和位置等数据。当用户打开页面的时候系统从数据库获得数据后再根据这些数据生成模型。图1为网上超市可视化建模的具体流程。
2 网上超市模型可视化设计的实现
视觉在人类认知系统中具有很强的感知通道，可视化呈现和交互使得大规模数据访问更容易[5]。设计出符合人视觉常识的可视化模型能够方便超市经营者通过日常思维设计网上超市模型，方便理解且降低操作错误率。通过JQuery实现网上超市可视化设计的主要技术包括有素材菜单、拖拽与坐标定位、个性化增删查改等。
2.1 JQuery实现素材菜单
由于素材菜单不是常用的部分，如果把它固定位置会占用页面空间，应设计为用户需要时才让它显示出来，当不需要时将它隐藏。JQuery有丰富的页面动画实现方法可以调用，通过show（speed，[callback]）和hide（speed，[callback]）方法可以实现动画显示和动画隐藏，效果良好，还可以通过speed参数自定义动画时间和callback执行成功回调。将动画事件绑定在菜单伸缩按钮上，通过点击该按钮即可控制菜单栏的显示和隐藏。图2为素材菜单经270度旋转的效果图，当鼠标移到方向箭头时菜单会显示出来，鼠标离开该区域后会自动隐藏起来。 2.2 JQuery实现元素拖拽效果与坐标定位
传统的B/S架构网站都是由HTML、CSS和JavaScript构成，都是设计成静态页面和一些相关的表单提交，要让用户移动页面元素是很难实现的事情。JQuery封装了拖拽插件draggable，使得元素在页面中实现拖拽变成一件简单的事情，用选择器获得素材后调draggable方法即可。实现方法如下：
$（“”）.draggable（option）；
option为draggable可接受参数。当刚开始拖拽时可以使用start回调函数使得被拖拽的元素发生一些形状的变化以提示操作人员该元素正处于拖拽状态当中；当拖拽完毕时可以使用stop回调函数，经$（this）.offset（）.left和$（this）.offset（）.top分别获得素材的横坐标和纵坐标，然后和ajax结合异步将坐标值提交写入数据库，实现无刷新页面操作。无刷新的页面增强了用户和系统的交互性，改善了系统的刷新方式，让更多有趣的前端功能成为可能[6]。图3为超市布局变化前后的效果图，可以看出中间2个素材的位置通过拖拽后修改了相应位置。图3（a）为原来的布局结构，通过简单的拖拽后变成图3（b）的布局，修改后的位置信息在数据库自动进行保存。修改完成后重新打开页面将会呈现更新后图3（b）的布局。
2.3 JQuery实现个性化增删查改
可视化将隐藏的大量数据信息用相对直观、易于领会的图形和图像来表征，从而加快获取信息的速度[7]。大多数Web复杂的操作最终都将会转化为对数据库进行增、删、查、改操作，能够将这些数据信息的操作转变为可视化图像操作将方便于超市经营者建模。数据映射成一种易于理解的表现形式，决定最后图像中应该看到什么，又如何把它表现出来[8]。对于一个平台开发确定以什么样的形式给用户显示可视化页面十分重要。网上超市模型可视化设计也一样。设计和修改模型的操作可以转化成新增元素、修改元素、删除元素；当页面打开时将模型加载出来是查询元素。大多数用户阅读屏幕文字要比阅读书本上的文字慢，并感到不适，同时大量的文字显示会使用户产生厌倦情绪[4]。传统的增、删、查、改都是通过表单操作，文字数据较多，能够把枯燥的文字数据表单操作变成图形化操作将大大提高用户体验效果，同时也能提高建模效率。本设计中对这四种操作进行了人性人改造。新增元素：通过用户点击菜单中的元素，调用append（）方法在页面中增加一个新的元素图标，取代传统表单操作中新增一条数据展示给用户。修改元素：通过用户拖拽元素，异步提交修改后的位置，取代传统表单操作通过手动修改数据来实现修改。删除元素：通过用户将元素拖拽到回收站或者通过右键菜单选择删除，同时调用remove（）方法将元素图标从页面中移除，取代传统表单操作删除一条数据。查询元素：通过异步加载获得元素的数据，然后按照属性名将元素数据赋值给相应的属性，异步修改元素的位置、大小、表现形式来呈现元素数据，取代传统表单操作通过表单罗列数据的方法。通过个性化的增删查改可以让超市经营者更方便实效操作网上超市。
3结束语
可视化改善了工作体验，提高了办事效率，降低了错误率[9]。基于JQuery实现的可视化模型已经很不错，在网上超市的设计与实现方面达到了一个较好的效果，但是离虚拟现实一样逼真的境界还有一定差距。网上超市模型可视化设计会随着技术进步和消费者的审美要求的提高继续发展，或许不久的将来我们也可以把逛网上超市做到跟现今的客户端3D游戏一般，这让人期待。
参考文献：
[1]赵丽华.聂建国.可视化技术在图书馆中的应用[J].图书馆学刊，2011，（3）：111-114.
[2]David Flanagan.JavaScript权威指南[M].北京：机械工业出版社，2012.
[3]陶国荣.JQuery权威指南[M].北京：机械工业出版社，2013.
[4]高远.基于Web的人员管理信息系统的界面设计与实现[J].福建电脑，2009，（9）：13-14.
[5]汪飞.李强.左伍衡.可视化搜索用户界面[J].计算机辅助设计与图形学学报，2014，26（5）：708-716.
[6]李禹.基于Web的可视化考勤管理系统设计[J].吉首大学学报，2014，35（3）：49-53.
[7]米娜瓦尔·拉合买提.玛依拉·别克强塔依哇.朱静.Web应用数据挖掘可视化界面布局的设计方法[J].计算机技术与发展，2011，21（8）：30-38.
[8]吴昊.基于Web的城市三维景观可视化体系设计思路研究[J].科技创新导报，2010，（12）：11-13.
[9]张立成.张鸽.陈鑫.可视化Web控件开发及在设备管理系统中的应用[J].实验室研究与探索，2014，33（6）：259-262.