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

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

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

内部排序脑图

测评

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

主界面 - 设置

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

生成数列面板

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

主界面

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

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

排序方法 - 展开

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

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

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

冒泡排序介绍

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

实际展示

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

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

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

快速排序
快速排序
归并排序
归并排序
直接选择排序
直接选择排序
希尔排序
希尔排序

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

小结

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

百万工具箱小程序码

推荐阅读更多精彩内容

  • 一. 写在前面 要学习算法,“排序”是一个回避不了的重要话题,在分析完并查集算法和常用数据结构之后,今天我们终于可...
    Leesper阅读 2,060评论 0 39
  • 这一部分我们对面试时涉及到的排序算法进行总结,主要包括插入排序、二分插入排序、希尔排序、选择排序、冒泡排序、鸡尾酒...
    咋家阅读 295评论 0 0
  • 大写的转 目录 [冒泡排序][鸡尾酒排序] [选择排序] [插入排序][二分插入排序][希尔排序] [归并排序] ...
    Solang阅读 1,512评论 0 16
  • 上一章的 小全栈任务“番茄post”【1】拆分里程碑 最后,预料到接下来采用的将是增量模型的软件开发模型。每一个增...
    hylerrix阅读 330评论 2 4
  • 简单来说,时间复杂度指的是语句执行次数,空间复杂度指的是算法所占的存储空间 时间复杂度计算时间复杂度的方法: 用常...
    Teci阅读 420评论 0 1