logo
1
0
WeChat Login

SortViz - 排序算法可视化教学工具

SortViz 是一个交互式排序算法可视化教学网站,通过动画演示和代码讲解帮助学习者直观理解排序算法的运行原理。

功能特性

  • 动画演示:柱状图逐步展示排序过程,不同颜色标识比较、交换、已排序状态
  • 伪代码同步高亮:每一步操作自动高亮对应的伪代码行
  • 多种控制方式:支持自动播放、暂停、单步执行、重置、速度调节
  • 自定义数据:支持手动输入数组或随机生成
  • 算法详解:每种算法配有完整的原理讲解、代码实现、复杂度分析

已支持算法

算法时间复杂度(平均)空间复杂度稳定性
冒泡排序 Bubble SortO(n²)O(1)稳定
选择排序 Selection SortO(n²)O(1)不稳定
归并排序 Merge SortO(n log n)O(n)稳定

技术栈

  • 后端:Node.js + Express
  • 模板引擎:Pug
  • 前端:原生 JavaScript + CSS
  • 动画:CSS Transitions + DOM 操作

快速开始

# 安装依赖 npm install # 启动服务 npm start # 开发模式(文件变更自动重启) npm run dev

启动后访问 http://localhost:3000

项目结构

├── app.js # Express 服务器入口 ├── routes/ │ ├── index.js # 首页路由 │ └── algorithm.js # 算法详情页路由 ├── views/ │ ├── layout.pug # 页面布局模板 │ ├── index.pug # 首页 - 算法列表 │ └── algorithm.pug # 算法详情页 ├── public/ │ ├── css/style.css # 样式文件 │ └── js/sort-animation.js # 前端动画控制器 ├── algorithms/ │ ├── algorithms-meta.js # 算法元数据配置 │ ├── bubble-sort.js # 冒泡排序实现 │ ├── selection-sort.js # 选择排序实现 │ └── merge-sort.js # 归并排序实现 └── data/algorithm-descriptions/ ├── bubble-sort.md # 冒泡排序详解 ├── selection-sort.md # 选择排序详解 └── merge-sort.md # 归并排序详解

API 接口

方法路径说明
GET/首页
GET/algorithm/:slug算法详情页
GET/api/algorithms获取所有算法元数据(JSON)
POST/api/sort/:slug提交数组,返回排序步骤数据

POST /api/sort/:slug 示例

请求:

POST /api/sort/bubble-sort { "array": [5, 3, 8, 1, 9, 2, 7] }

响应:

{ "steps": [ { "array": [5, 3, 8, 1, 9, 2, 7], "comparing": [], "swapping": [], "sorted": [], "highlightLine": -1, "description": "初始数组状态,准备开始冒泡排序" } ], "meta": { "slug": "bubble-sort", "name": "冒泡排序", "nameEn": "Bubble Sort" } }

扩展新算法

添加新的排序算法只需以下步骤:

  1. algorithms/ 下新建排序文件,导出排序函数和 pseudocode
  2. algorithms/algorithms-meta.js 中添加元数据
  3. data/algorithm-descriptions/ 下添加 Markdown 讲解文件
  4. app.jsroutes/algorithm.js 中注册新算法

动画颜色说明

颜色含义
蓝色 #4A90D9默认状态
橙色 #F5A623正在比较
红色 #D0021B正在交换/写入
绿色 #7ED321已排序就位

License

MIT

About

No description, topics, or website provided.
228.00 KiB
1 forks0 stars2 branches0 TagREADMEMIT license
Language
JavaScript68.9%
CSS24.1%
Others7%