如何用 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