可视化排序

这是百度IFE的一个题目，感觉很有趣，就想写一个详细一点过程，并且看下是不是能更完善一点
这里借用框架bootstrap和jQuery

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

基本要求

• 用条状图表示数据，数据越大条状越高
• 可以添加新数据，也可以删除已有数据
• 实现排序并可视化展示

基本要求就这么多，但是考虑到用户体验和界面渲染什么什么的，想要弄个好效果还是需要蛮多功夫的
一开始我以为是在排序过程中渲染界面就好，排序一般都是快速循环执行某一步骤，而界面渲染需要慢一些让肉眼可以识别，所以最好 将排序的每一步记录下来，排序完成后根据记录渲染界面

参数与限制的设计

• 数据个数限制：[0, 500]
• 数据大小限制：[1，500] && 整数

界面设计

• 一个输入框供用户输入待添加的数据
• 用于添加或者删除数据的按钮
• 用于开始排序的按钮
• 用于显示文字信息的用户提醒窗口
• 排序的可视化界面

整体设计

• 操作框: 包含各种操作按钮和输入框
• 提示框: 用于显示提示文字信息
• 条状图: 用于可视化数据的窗口

条状图

• 大的整体上用弹性盒子flex-box搞定，盒子高度固定为500px，与数据大小限制对应
• 每一竖条用一个<span>标签显示，弹性盒子中每个竖条平分盒子宽度，垂直方向底部对齐

js脚本设计

• 用来存储原始数据的一维数组
• 一个用来存储排序中每一步快照的二维数组
• 显示提示信息的函数
• 左右两侧添加和删除数据的函数
• 检测数据是否还可以添加或者删除的函数，即保证数据个数的范围始终是[0, 500]
• 获取输入框的数字并且检测数字合法性，即保证数据范围是[1, 500]且为整数
• 渲染界面函数，将原始数据以条形<span>显示在界面上
• 获取一个高度为某数值并有背景颜色的<span>DOM元素的函数，添加<span>的title属性以提示代表数据大小
• 排序函数，除了正常排序外，需要在函数执行开始时清空快照，并在排序每一步完成后保存快照
• 每一步的快照仅保存交换的位置信息，节省内存并减轻渲染负担
• 按照快照渲染界面的函数，将每一步快照取出渲染
• 禁止用户操作，渲染需要大量时间，为了防止数据混乱，在渲染完成前禁止用户操作
• 停止渲染函数，停止当前渲染，允许用户操作
• 随机重置数据函数，将原有数据清除并随机生成数据
• 点击竖条<span>可以删除此元素，这里注意用事件代理，并且要对应上原数据中的删除
• 初始化函数，初始化全局变量并且将按钮事件对应上函数

demo
source