mentor-program-day28

挑戰題 = 時間小偷？

進度

在昨天燒了一天的腦袋之後，今天的我還是不甘心，想要把挑戰題的解題方式給弄得更透徹一些，於是一天就又這樣不支不覺得過去了，附上一下戰績：

• 串接 Twitch 的 API（挑戰題）

是花了蠻多時間啦，但至少有比一開始清楚多了，感覺現在只要看到「非同步」就會有「啊，這要加上 callback 來拿結果」這種反射動作 ( ˘•ω•˘ )

解決完挑戰題後也做了一下 week5 的 Lidemy HTTP Challenge，覺得還蠻好玩的，用一種很有趣的方式來學東西這樣，最後也在沒看提示的前提下破關了（lv10）。

學到的事情

覺得要學會怎麼善用 function 來包裝一段程式碼是一個需要累積很多練經驗才能越做越好的事情，現在的我欠缺的就是這些吧，所以在想要怎麼優化的時候才會花了不少時間，希望未來可以把這部分越做越好。

從我學習到現在，「把大問題拆成小問題」或是「化繁為簡」這兩個方法還幫助我蠻多的，有時候當你先解決那些小問題，或者是先把問題給簡化，最後你再去理解那個大問題的時候通常就能迎刃而解。

舉例來說，在處理非同步行為的時候，出現各種 callback 時總會讓人弄得頭昏眼花的，所以我會試著先把那些 callback 寫成一個明確的 function（命名函式），這樣子在把 callback 傳入某個非同步 function 的時候就不會看得眼花撩亂，因為你能一眼就看清楚架構，比如這個例子：

// 第一個非同步 function
function A(callback) {
  setTimeout(callback, 1000)
}
// 第二個非同步 function
function B(callback) {
  setTimeout(callback, 1000)
}
// 第三個非同步 function
function C(callback) {
  setTimeout(callback, 1000)
}
// 第一個 callback
function callbackA() {
  console.log('first!')
  // 在這裡呼叫下一個 function => B
  B(callbackB)
}
// 第二個 callback
function callbackB() {
  console.log('second!')
  // 在這裡呼叫下一個 function => C
  C(callbackC)
}
// 第三個 callback
function callbackC() {
  // 這是最後一個，沒有其他 function 了。
  console.log('third!')
}
/* 
  執行順序：
  A => A 的 callback 呼叫 B
  B => B 的 callback 呼叫 C
  C => C 的 callback 印出結果，結束 
*/
A(callbackA)

不這樣寫的話就是大家俗稱的「波動拳（callback hell）」：

// 第一個非同步 function
function A(callback) {
  setTimeout(callback, 1000)
}
// 第二個非同步 function
function B(callback) {
  setTimeout(callback, 1000)
}
// 第三個非同步 function
function C(callback) {
  setTimeout(callback, 1000)
}

// 執行第一個 function => A
A(function() {
  console.log('first!')
  // 在這裡呼叫下一個 function => B
  B(function() {
    console.log('second!')
    // 在這裡呼叫下一個 function => C
    C(function() {
      console.log('third!')
    })
  })
})

雖然以這個例子來說可能會覺得第二種寫法比較簡潔，但那是因為這裡的 callback 要做的事情很少，等事情一大堆的時候你就不會這樣覺得了。

題外話

今天跟女朋友一起去全聯買材料回來煮火鍋，真是便宜又好吃 (´,,•ω•,,)♡

期許

希望明天可以開始做 week5 的進度，跟把今天學到的東西做好筆記。