modernweb 2017

心得分享

Transcript

1. ModernWeb 2017 ⼼心得報告分享 2017/09/20 前端組 CypressKuo
2. 關於 JavaScript 非同步的那些事兒 By 陳鋒逸（陳⼩小風）
3. Agenda • JavaScript 與非同步 • Callback & Promise • Iterator & Generator • Async & Await
4. JavaScript 與非同步
6. JavaScript • 單執⾏行行緒 • 非同步 • 非阻塞式
7. 單執⾏行行緒 • 核⼼心特徵 • 瀏覽器導向 • 避免複雜性 • HTML5 Web Worker
8. 非同步／非阻塞 打電話訂書 店員：稍等，我查⼀一下 店員回覆 等待 店員：我查⼀一下，晚點再 回覆你 店員回電 等待 做其他事 乾等 同步 非同步 （非阻塞） （阻塞）
10. Call Stack Web Apis Callback Queue http://latentflip.com/loupe
11. Call Stack Web Apis Callback Queue http://latentflip.com/loupe i = 0
12. Call Stack Web Apis Callback Queue http://latentflip.com/loupe i < 4
13. Call Stack Web Apis Callback Queue http://latentflip.com/loupe setTimeout(function () { console.log(i); }, 0)
14. Call Stack Web Apis Callback Queue http://latentflip.com/loupe Anonymous() i ++
15. Call Stack Web Apis Callback Queue http://latentflip.com/loupe Anonymous() Anonymous() i < 4
16. Call Stack Web Apis Callback Queue http://latentflip.com/loupe setTimeout(function () { console.log(i); }, 0) Anonymous() Anonymous()
17. Call Stack Web Apis Callback Queue http://latentflip.com/loupe Anonymous() i ++ Anonymous() Anonymous()
18. Call Stack Web Apis Callback Queue http://latentflip.com/loupe Anonymous() Anonymous() i < 4 Anonymous() Anonymous()
19. …
20. Call Stack Web Apis Callback Queue http://latentflip.com/loupe Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous()
21. Call Stack Web Apis Callback Queue http://latentflip.com/loupe Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous()
22. Call Stack Web Apis Callback Queue http://latentflip.com/loupe Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Console.log(i)
23. Call Stack Web Apis Callback Queue http://latentflip.com/loupe Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous()
24. Call Stack Web Apis Callback Queue http://latentflip.com/loupe Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous()
25. Call Stack Web Apis Callback Queue http://latentflip.com/loupe Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous()
26. Call Stack Web Apis Callback Queue http://latentflip.com/loupe Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Anonymous() Console.log(i)
27. PIXNET wiki Front-end Team cctsao - JavaScript VM 如何解析 Code cctsao - JavaScript Async & Event Loop
28. Callback & Promise
29. Callback • 非同步 • 滿⾜足情境時觸發 • 複雜邏輯不好維護 • 較難處理理錯誤 圖片出處：https://brunolm.wordpress.com/2017/01/13/using-asyncawait-in-typescript-javascript/
30. Promise • 兼容性 • 狀狀態明確 • 可以連續執⾏行行 • 更更好維護／閱讀
31. Promise Success Failure
32. Can I Use Promise? https://caniuse.com/#search=promise
33. Iterator & Generator
34. Iterator • 佔記憶體空間 • 記憶體讀寫花時間 • 處理理 10000 個物件
35. Generator • ⼀一次⼀一個 • 停在上次執⾏行行之處 • 節省記憶體
36. Generator + co library • 暫時交出執⾏行行權 • 封裝非同步任務，處理理 Promise • 邏輯清楚好理理解 • 讓 Generator ⾃自動執⾏行行 https://github.com/tj/co
37. Async & Await
38. Async & Await • 結合 Promise 與 Generator + co • 不需要第三⽅方套件 • 將非同步化程式同步化 • 直覺性的邏輯思考 • ES7, TypeScript, Node 7.6 ⽀支援
39. Async & Await • async - 標著在 function 前⾯面 • await - 標著在 promise 前⾯面 • ⼀一定要⽤用 function 包裝
40. Can I Use Async? https://caniuse.com/#search=promise
41. 回顧
42. Callback https://caniuse.com/#search=promise
43. Promise https://caniuse.com/#search=promise
44. Generator + co https://caniuse.com/#search=promise
45. async & await https://caniuse.com/#search=promise
46. 總結 • 善⽤用非同步 • 學習新寫法、新技術 • 理理解運作機制 • 節省開發／除錯時間
47. 學習新技術，讓我們更更優雅更更快速解決問題
48. Reference • http://s.itho.me/modernweb/2017/day2/403-3-陳⼩小風.pdf • https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/ Promise • https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/ async_function • https://medium.com/@peterchang_82818/javascript-es7-async-await-教 學-703473854f29-tutorial-example-703473854f29 • https://jigsawye.com/2016/04/18/understanding-javascript-async-await/ • https://mlwmlw.org/2016/03/es7-的-async-await-入⾨門/ • https://noootown.wordpress.com/2016/11/13/callback-promise-fetch-yield-async- await/