ZHGDG_HOA.6_为什么去学算法

140511 #GDG #Zhuhai
为什么去学算法

Transcript

2. 为什么去学算法？ 鹄思乱想
3. 算法重要吗 • 不重要 - 如果你只满⾜足于实现所谓业务功能 • 重要 - 如果你不希望只是码⼯工
4. 为什么重要 • Algorithms + Data Structures = Programs • 你永远不知道你不知道的东⻄西 • 找到解决问题更好的办法
5. ⽰示例⼀一 • 散列的点中找所有可以包含4个点以上的线段 • ⽅方案⼀一 (暴⼒力) • 4 重循环 ! • 缺点 • 时间复杂 度 N⁴ • 要求包含点数越多，性能越差 (N⁵ N⁶ 等)
6. ⽰示例⼀一 • 散列的点中找所有可以包含4个点以上的线段 • ⽅方案⼆二 (排序) • 每取⼀一点，算其它点相对⾓角度 • 按⾓角度排序后，找相同的点 ! • 优点 • 时间复杂度 N³ lg N • N (取样本点) * NlgN (排序) * N (查找相同点) • 不存在要求包含点数越多，性能越差的问题
7. ⽰示例⼆二 • ⼋八数码问题 • 以最少的步数排列好 ! ! • 优先队列 • 按当前阵⾏行，对紧接着可实现的阵⾏行放⼊入队列 • 把队列中的各阵⾏行，把优先值最⼩小的先取出 • 重复第⼀一步，直到和⺫⽬目标匹配
8. 去哪学 • 国外各⼤大 MOOC (Massive Open Online Course) • Coursera • Udacity • Edx
9. 选 MOOC 原因 • ⺫⽬目的只是初步了解我不熟悉的东⻄西 • 单看算法书内容太多，重点不突出 • 视频时间较短，可在上下班时观看 • 进度容易控制 • 每周习题有趣 • 锻炼英语
10. MOOC⽐比较 • Coursera • 课程免费 • 付费/专项 (⼀一个系列多个课程) - $49/课 • 课程有固定时间安排 (开课, 作业, 考试) • 讨论区按课时, 作业, 考试细分
11. MOOC⽐比较 • Udacity • 免费或付费 - $150/⽉月 直到上完或取消 • ⽆无固定时间，没有任何压⼒力 • Youtube 在线看，视频可下载 • 讨论区像普通论坛，有点乱
12. MOOC⽐比较 • Edx • 课程免费 • 付费/专项 (⼀一个系列多个课程) - $50/课 • 课程有固定时间安排 (开课, 作业, 考试) • 国内连接速度慢
13. 我怎么学算法 • 看 • 每天班⻋车上看视频 (来回 1 ⼩小时) • 想 • 数据建模, 解决问题思路 (⻋车上, 散步 …) • 坐电脑前有时更不好理清思路 • 做 • 习题 (9:30-10:30PM, 6-7:15AM)
14. 有问题怎么办？ • Google • 作业不会做? Performance 不通过？ • 重新看视频，作业提⽰示点 • Forum 上看别⼈人的 Tips (但没有答案贴出来) • ⾃自⼰己想, 想, 想 (深刻体会: 坚持就能想出来)
15. 制作算法的动画 鹄思乱想
16. 动机 • 可视化让算法学习更有趣和容易理解 • 对⾃自⼰己算法学习的巩固 • @左⽿耳朵耗⼦子 推荐过同类⺴⽹网站，想挑战⾃自⼰己 • ⽤用 AngularJS 练习⼀一下
17. ⺫⽬目标 • ⼀一个辅助别⼈人学习算法的⺴⽹网站 • ⽀支持基础的⼏几种排序算法 • 可选输⼊入数据 (顺序, 倒序, 随机, ⾃自⼰己输⼊入) • 具备暂停和单步运⾏行能⼒力 (亮点, 别⼈人没有)
18. 设计分析和想法 • 排序算法特点 - 命令式对数据结构的操作 • 动画动在哪⾥里? • 实现难点 • 动画 • 单步运⾏行
19. 设计分析和想法 排序算法特点 - 命令式对数据结构的操作
20. 设计分析和想法 ! • 显⽰示当前⽐比较对象 ! • 交换 动画动在哪⾥里
21. 设计分析和想法 • 动画实现 • MVVM 的前端思想⾮非常适合表现数据状态转换 ! • 单步执⾏行 • 怎么实现单步？ • 每步做的是什么？ 实现难点
22. 设计分析和想法 • MVVM (Model-View-ViewModel) • 双向数据绑定 (two way data-binding) • ⻚页⾯面随数据变化⾃自动更新 • 数组⾥里的数据位置交换了 == ⻚页⾯面动画 为什么MVVM 适合
23. 设计分析和想法 • 原⽣生⽀支持 MVVM, 双向数据绑定 • 声明式 HTML，组件式 • 和 DOM 分离 • 测试先⾏行，还有Chrome 插件 Batarang • 社区和⽣生态圈庞⼤大 • 强⼤大的爹 Google • 个⼈人品味 (选择框架从来不容易) 为什么我选择 AngularJS
24. 设计分析和想法 • Ember.js • React (Facebook) • KnockoutJS • Reactive ! • 相关链接 • 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/ 其它类似框架
25. 设计分析和想法 • 连续动画的实现 • var id = setInterval(step, interval); • 暂停 • clearInterval(id); • 单步 • step 怎么实现单步
26. 设计分析和想法 • ⽅方案 1. for 循环转递归 (看 SICP, 函数式上脑了) • 保留状态, for 循环到哪，⽐比较交换到哪 ! 2. 操作队列重现 每步做的是什么
27. 设计分析和想法 for 循环转递归
28. 设计分析和想法 for 循环转递归 • 缺点 • 多重循环时⾮非常复杂 • 算法越复杂, 引⼊入边界条件变量越多 • 逻辑复杂，代码重构改进困难 • 想⽀支持其它算法实在写不下去了，浪费时间
30. 设计分析和想法 • 实现原理 • 对影⼦子数据进⾏行排序 • 将每⼀一步关键操作（动画部分）放⼊入对列 • 每次取出⼀一个操作，改变⻚页⾯面数据状态 操作队列重现
32. 设计分析和想法 怎么想到第⼆二种⽅方案 • 思维的转变 (命令式 —> 声明式) • 动画核⼼心是数据状态变化 • 函数式思维: 同样数据, 经过同样的⽅方法, 结果应该⼀一样 • 递归 • 没看清动画本质 • 焦点放在命令式的考虑怎么对数据进⾏行操作 • 操作队列重现 • 结合动画核⼼心和函数式思维 • 焦点转变为声明哪些数据变成什么样
33. 花多少时间？ • 实现Insertion, Selection, Bubble, Heap, Quick • 2 星期 ! • ⽤用⽅方案⼆二重构 • 3 天
34. 怎么拿来玩？ • 开源在: github.com/kenspirit/visual-alg • 纯 HTML, JS, 打开 src/sorting.html 就可以⽤用
35. 谢谢 ! 微博: 鹄思乱想 博客: www.thinkingincrowd.me
36. 祝: 码不停提 !-) Happy
37. blog.zhgdg.org