ZHGDG_HOA.6_为什么去学算法

 ZHGDG_HOA.6_为什么去学算法

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

6002ee051e03f0b762642ee7fafd111f?s=128

Zoom.Quiet

May 12, 2014
Tweet

Transcript

  1. None
  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 循环转递归 • 缺点 • 多重循环时⾮非常复杂 • 算法越复杂, 引⼊入边界条件变量越多

    • 逻辑复杂,代码重构改进困难 • 想⽀支持其它算法实在写不下去了,浪费时间
  29. None
  30. 设计分析和想法 • 实现原理 • 对影⼦子数据进⾏行排序 • 将每⼀一步关键操作(动画部分)放⼊入对列 • 每次取出⼀一个操作,改变⻚页⾯面数据状态 操作队列重现

  31. None
  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