基于Web前端開發的算法可視化軟件

孫延民 吳啟燁 余冠宏 張永

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

【關鍵詞】算法可視化 前端 框架 組件 Vue

一、引言

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

二、系統功能分析與設計

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

（一）數據生成及驗證

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

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

（二）組件功能

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

（三）按步演示

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

next.onclick = function（） {

……

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

can_continue_flag = false;

dojob（）;

};

（四）整體演示

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

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"）;

}

};

（五）代碼同步

演示界面右半部分是代碼同步區域，主要顯示算法具體的C語言代碼，在演示算法的同時，相關代碼會高亮顯示，讓用戶在體驗算法演示動畫的同時也結合代碼，達到深入理解的目的。

參考文獻：

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

[2]梁灝.vue.js實戰.清華大學出版社，2017.

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

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