Recommended
More Related Content
Viewers also liked
Viewers also liked (11)
Similar to 如何用 AngularJS 制作排序算法的动画
Similar to 如何用 AngularJS 制作排序算法的动画 (20)
如何用 AngularJS 制作排序算法的动画
- 3. 动机 • 可视化让算法学习更有趣和容易理解 • 对⾃自⼰己算法学习的巩固 • @左⽿耳朵耗⼦子 推荐过同类⺴⽹网站，想挑战⾃自⼰己 • ⽤用 AngularJS 练习⼀一下
- 4. ⺫⽬目标 • ⼀一个辅助别⼈人学习算法的⺴⽹网站 • ⽀支持基础的⼏几种排序算法 • 可选输⼊入数据 (顺序, 倒序, 随机, ⾃自⼰己输⼊入) • 具备暂停和单步运⾏行能⼒力 (亮点, 别⼈人没有)
- 5. 设计分析和想法 • 排序算法特点 - 命令式对数据结构的操作 • 动画动在哪⾥里? • 实现难点 • 动画 • 单步运⾏行
- 8. 设计分析和想法 • 动画实现 • MVVM 的前端思想⾮非常适合表现数据状态转换 ! • 单步执⾏行 • 怎么实现单步？ • 每步做的是什么？ 实现难点
- 9. 设计分析和想法 • MVVM (Model-View-ViewModel) • 双向数据绑定 (two way data-binding) • ⻚页⾯面随数据变化⾃自动更新 • 数组⾥里的数据位置交换了 == ⻚页⾯面动画 为什么MVVM 适合
- 10. 设计分析和想法 • 原⽣生⽀支持 MVVM, 双向数据绑定 • 声明式 HTML，组件式 • 和 DOM 分离 • 测试先⾏行，还有Chrome 插件 Batarang • 社区和⽣生态圈庞⼤大 • 强⼤大的爹 Google • 个⼈人品味 (选择框架从来不容易) 为什么我选择 AngularJS
- 11. 设计分析和想法 • Ember.js • KnockoutJS • Reactive • React (Facebook) ! • 相关链接 • http://www.ituring.com.cn/article/38394 • http://blog.nebithi.com/knockoutjs-vs-angularjs/ • http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look • http://blog.ractivejs.org/posts/whats-the-difference-between-angular-and-ractive/ 其它类似框架
- 12. 设计分析和想法 • 连续动画的实现 • var id = setInterval(step, interval); • 暂停 • clearInterval(id); • 单步 • step 怎么实现单步
- 13. 设计分析和想法 • ⽅方案 1. for 循环转递归 (看 SICP, 函数式上脑了) • 保留状态, for 循环到哪，⽐比较交换到哪 ! 2. 操作队列重现 每步做的是什么
- 15. 设计分析和想法 for 循环转递归 • 缺点 • 多重循环时⾮非常复杂 • 算法越复杂, 引⼊入边界条件变量越多 • 逻辑复杂，代码重构改进困难 • 想⽀支持其它算法实在写不下去了，浪费时间
- 17. 设计分析和想法 • 实现原理 • 对影⼦子数据进⾏行排序 • 将每⼀一步关键操作（动画部分）放⼊入对列 • 每次取出⼀一个操作，改变⻚页⾯面数据状态 操作队列重现
- 19. 设计分析和想法 怎么想到第⼆二种⽅方案 • 思维的转变 (命令式 —> 声明式) • 动画核⼼心是数据状态变化 • 函数式思维: 同样数据, 经过同样的⽅方法, 结果应该⼀一样 • 递归 • 没看清动画本质 • 焦点放在命令式的考虑怎么对数据进⾏行操作 • 操作队列重现 • 结合动画核⼼心和函数式思维 • 焦点转变为声明哪些数据变成什么样
- 20. 花多少时间？ • 实现Insertion, Selection, Bubble, Heap, Quick • 2 星期 ! • ⽤用⽅方案⼆二重构全部 • 3 天
- 21. 怎么拿来玩？ • 开源在: github.com/kenspirit/visual-alg • 纯 HTML, JS, 打开 src/sorting.html 就可以⽤用
- 24. blog.zhgdg.org