这是百度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>
可以删除此元素,这里注意用事件代理,并且要对应上原数据中的删除 - 初始化函数,初始化全局变量并且将按钮事件对应上函数