基于JQuery的網上超市模型可視化設計方法

林桂斌等

摘 要：針對目前網上超市建模困難的問題，對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.