排序算法可视化 - 微信小程序

  作为一个程序员，你不得不接触的除了数据结构那就是算法了。算法是一个问题的数字化解决方案，在编程当中，关于排序问题的算法少说也有几十种，今天我们来聊一聊微信小程序 百万工具箱 中的 排序算法可视化 工具吧！

  首先排序算法分为 内部排序 和 外部排序。
  内部排序指的是待排序列完全存放在内存中所进行的排序过程，适合不太大的元素序列。在小程序中，我们讨论的都是属于内部排序；
  而外部排序主要考虑的是 I/O 问题，实际排序所用的算法其实也是内部排序，利用归并算法，把各个有序片段合并，感兴趣的小伙伴可以自行查阅资料，在此不做展开。
  这里列举较为经典的一些排序算法，这些算法在小程序内部也一一实现了。

内部排序脑图

测评

简单的介绍之后，我们就来评测一下百万工具箱里的排序算法可视化工具吧~

主界面 - 设置

主界面采用了极简的设计，突出重点，引导用户操作，降低用户首次学习和使用的成本。

生成数列面板

面板使用了弹出层的效果，用直接的方式引导让用户输入，同时采用了圆角蓝边框的设计，能够和主页面的基本样式呼应，在视觉越来越挑剔的今天，许多用户是不会再接受直角无边框的设计。整体的蓝白颜色组合十分地融洽，浅灰色的提示，温馨却不碍眼。

主界面

  在引导完用户输入之后，界面的元素变得更加丰富，为了降低用户的的复杂感，我们做了两点措施，

1. 添加步骤引导。通过 ① ② 两个步骤让用户明确了解流程。
2. 采用折叠设计，把排序算法的内容隐藏，当用户点击下拉图标的时候，显示更多内容。

排序方法 - 展开

  展开内容介绍了排序算法的基本属性，如复杂度、稳定性等，可以提供用户对该排序量化的尺度

  对于动画延迟的设计更是凸显人文关怀，可以选择关闭排序的动画，直接显示结果。也可以让用户手动操控排序的快慢，不仅在开始排序前，在排序中也是随时可以修改动画延迟的大小。
  在排序中也可以放大缩小查看每个细节，在一些数列数列比较大的情况下可以使用，因为屏幕的像素点已经装不下，为了保证用户观感，这是当下最好的方案。

在排序中放大缩小查看细节

冒泡排序介绍

  当用户点击问号按钮或点击帮助页时，会展开该排序方法的介绍，以冒泡排序为例展示。若需查看完整的内容，欢迎扫描文章末尾的二维码进入小程序。

实际展示

接下来我们利用动图来直观地来看看各个排序的情况。
设置如下参数：

最小值：100
最大值：1000
生成个数： 50

对于以下几个排序方法我们用以上参数生成的同一个数列来比较

快速排序

快速排序

归并排序

归并排序

直接选择排序

直接选择排序

希尔排序

希尔排序

ps: 由于一些排序算法耗时太长导致文件过大无法上传，所以在此省略。
排序结束后的黑色框是微信小程序的弹窗提示。

小结

  程序会不断地完善，不断优化体验，目标是做一个教科书级别的排序算法小程序。希望这篇文章对你有帮助。

百万工具箱小程序码