基于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中取到事先定义的好的字符串数组，然后传递给组件渲染在页面上。下面是自定义导航栏组件的调用：

<！--根据不同的页面向bar组件传递不同的参数kind  -->

（三）按步演示

演示分为两种形式，第一种是按步演示，按步演示指的是一步一步进行演示，通过变量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届“三小”课题。