孫延民 吳啟燁 余冠宏 張永

【摘要】本軟件使用Web前端的技術(shù)框架VUE設(shè)計的一款算法可視化軟件。用戶可以根據(jù)自己的需求為算法設(shè)置參數(shù)，并且輔助以代碼同步進(jìn)行演示學(xué)習(xí)，以達(dá)到深入理解算法的目的。

【關(guān)鍵詞】算法可視化 前端 框架 組件 Vue

一、引言

隨著科技的進(jìn)步，各種計算機(jī)技術(shù)飛速發(fā)展，計算機(jī)已經(jīng)從功能單一、體積較大發(fā)展到了功能復(fù)雜、體積微小、資源網(wǎng)絡(luò)化。計算機(jī)已經(jīng)深入到社會的各行各業(yè)，人們?yōu)榱私鉀Q各種各樣的問題從而提出了各種有名的算法。但是算法的概念有時極為抽象，枯燥難懂，所以我們在學(xué)習(xí)的時候很難將算法理解吃透。數(shù)據(jù)結(jié)構(gòu)與算法學(xué)習(xí)最大的難點(diǎn)之一就是如何在腦中形象化其抽象的邏輯步驟，但是在大學(xué)教學(xué)算法的課堂中，教師的授課方式無非是ppt+板書，理解能力強(qiáng)的學(xué)生或許可以接受，但是理解能力略差的學(xué)生可能就難以理解，此時一個可以把算法可視化的平臺就顯的尤為重要。

二、系統(tǒng)功能分析與設(shè)計

本軟件使用Web前端的技術(shù)設(shè)計的一款算法演示軟件，Vue提供了 MVVM 數(shù)據(jù)綁定和一個可組合的組件系統(tǒng)，具有簡單、靈活的API，可以更好的操作DOM，開發(fā)與使用體驗(yàn)都非常好。用戶只需要有一個主流瀏覽器即可，如谷歌、火狐等，瀏覽界面時無需登錄，界面友好、簡潔，操作簡單，極大地優(yōu)化了用戶體驗(yàn)。算法界面主要分為4個部分：頭部，左部，中部和右部。頭部主要放一些小功能的按鈕，比如聲音開關(guān)、返回主界面等;左部放的是算法演示過程中得出的一系列結(jié)果;中部放的是演示的一些控件，比如演示畫布、按鈕欄和數(shù)據(jù)輸入框;右部放的是代碼同步框，用來同步演示。

（一）數(shù)據(jù)生成及驗(yàn)證

數(shù)據(jù)生成功能是指用戶可以通過點(diǎn)擊相應(yīng)的按鈕隨機(jī)獲取到一組固定長度的數(shù)據(jù)進(jìn)行演示。當(dāng)用戶選擇自己輸入演示數(shù)據(jù)時，就可能出現(xiàn)不合法的數(shù)據(jù)，由于非法數(shù)據(jù)不可演示，所以就需要加上驗(yàn)證的功能。給用于顯示數(shù)據(jù)的文本框加上單向綁定v-bind，這樣就可以動態(tài)檢測用戶輸入的數(shù)據(jù)，每當(dāng)用戶輸入數(shù)據(jù)時，利用正則表達(dá)式對所有可能出錯的數(shù)據(jù)進(jìn)行判斷測試，并提示用戶直到用戶輸入了正確的數(shù)據(jù)。由于不同的演示的輸入規(guī)則不同，這里給出冒泡排序算法演示中部分檢測數(shù)據(jù)的核心代碼：

if（deter.match（/＼d+/g）.length！= 1&&（deter.match（/＼d+/g）.length！= deter.match（/＼，|＼，/g）.length+1））{//數(shù)據(jù)不能少于1個，并且逗號（包括中文和英文兩種逗號）的數(shù)量應(yīng)該比數(shù)據(jù)的數(shù)量少1個return 3;//檢測錯誤并返回錯誤代號}

（二）組件功能

組件 （Component）是Vue框架最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼，因其可重用性可以使代碼量大大減少代以及提高代碼的可讀性。組件功能這部分是利用組件技術(shù)把返回主頁、控制按鈕聲音和操作提示這三個小功能整合起來，根據(jù)參數(shù)的不同在data中取到事先定義的好的字符串?dāng)?shù)組，然后傳遞給組件渲染在頁面上。下面是自定義導(dǎo)航欄組件的調(diào)用：

（三）按步演示

演示分為兩種形式，第一種是按步演示，按步演示指的是一步一步進(jìn)行演示，通過變量can_continue_flag控制，這個一步不是現(xiàn)實(shí)中運(yùn)行一行代碼，而是執(zhí)行一次動畫，意味著一步執(zhí)行的是一段代碼。部分核心代碼如下：

next.onclick = function（） {

……

// can_continue_flag控制的是執(zhí)行一步還是一直演示到最后

can_continue_flag = false;

dojob（）;

};

（四）整體演示

整體演示就是第二種演示形式，這種演示是在用戶不暫停的情況下，把用戶輸入的數(shù)據(jù)以動畫的形式從開始演示到結(jié)束，此時變量can_continue_flag為true，考慮到用戶能夠有個良好的體驗(yàn)，整體演示與按步演示可以通過“開始/暫停鍵”相互切換的，用戶可根據(jù)具體需求自行選擇。部分核心代碼如下：

stop.onclick = function（） {

……

if （stop.name == "stop"） { //演示到暫停

pause = true; //使整個演示停下

stop.innerHTML = "開 始";

stop.name = "begin";

next.setAttribute（"class"， "button show"）;

} else if （stop.name == "begin"） { //暫停到演示

pause = false; //演示開始

dojob（false）;

can_continue_flag = true;//選擇整體演示

stop.innerHTML = "暫 停";

stop.name = "stop";

next.setAttribute（"class"， "noclick"）;

}

};

（五）代碼同步

演示界面右半部分是代碼同步區(qū)域，主要顯示算法具體的C語言代碼，在演示算法的同時，相關(guān)代碼會高亮顯示，讓用戶在體驗(yàn)算法演示動畫的同時也結(jié)合代碼，達(dá)到深入理解的目的。

參考文獻(xiàn)：

[1]（美）Nicholas C.Zakas.JavaScript高級程序設(shè)計.人民郵電出版社出版，2006.

[2]梁灝.vue.js實(shí)戰(zhàn).清華大學(xué)出版社，2017.

[3]（美）Lea Verou《CSS Secrets》O'Reilly Media，2015.

基金項(xiàng)目：課題資助：南昌航空大學(xué)創(chuàng)新創(chuàng)業(yè)教育課程培育項(xiàng)目《C語言程序設(shè)計》;南昌航空大學(xué)校級教改課題《C語言程序設(shè)計》課程融入思政元素的探索與實(shí)踐。課題資助：南昌航空大學(xué)第14屆“三小”課題。