Week10

[ChihYang41]

這次把 week8 作業試著寫成 OOP，麻煩 Huli 大力鞭，指出哪裡需要改進了，謝謝～

關於 Week8 作業寫成 OOP：

其實也還沒很懂 OOP 設計模式，看到有人說「需求一定會變，程式碼一定會改。」，然後物件導向影片說從怎麼用開始構思如何寫一個 class，所以這次就從「如何方便的使用」以及「不容易一牽髮動全身」的角度來寫 class。

本來大概想遵從幾個原則是：

1. class 不要像瑞士刀裝一堆 method，分類清楚
2. 方便改動或是使用
   不過寫完發現重複使用性不高，也不方便使用，可讀性好像跟之前差不多 XDD

hw1

code 變長了，不過我覺得好像有比較可讀和好使用嗎？如果日後要增加獎項就在 constructor 塞參數進去，再用 method showPrizeResult()就可以重複使用了。

hw2、hw3

本來是想說「把 request 包在 class 裡面變成 method，想要 post 或 get 的時候就可以輕鬆使用了。」，但是全部寫完才想到 fetch 完 return 的是 Promise ，而 Promise 裡 [[promisevalue]] 的值也沒辦法取出來，所以泛用性好像也沒很好嗚嗚

總之覺得寫起來好像沒有優化的樣子哈哈哈哈，麻煩不吝指教

關於 Week10 心得

大致上是寫一些心路歷程，廢話佔了大半，摻雜一些覺得課程哪些地方可以改進的意見，Huli 覺得哪裡說的不對或是對於我學習的方式有什麼建議也可以說！感謝哈哈

[aszx87410]

OOP 的部分你現在感覺只是把 function 換成物件導向裡的 method 而已，仔細看你就會發現差異不大，twtich 那題我改一下給你看，讓你參考一下什麼叫做方便重複使用：

class TwitchAPI {
  constructor(clientId) {
    this.baseUrl = 'https://api.twitch.tv/kraken'
    this.clientId = clientId;
  }

  sendRequest(url) {
    const headers = new Headers({ 'Client-Id': this.clientId });
    const myInit = { headers };
    return fetch(this.baseUrl + url, myInit).then((res) => {
      if (res.ok) {
        return res.json();
      }
      return null;
    });
  }

  getPopularGames() {
    const url = '/games/top?limit=5';
    return this.sendRequest(url);
  }

  getLiveStreams(gameName, offset) {
    const url = `/streams/?game=${gameName}&limit=20&offset=${offset}`;
    return this.sendRequest(url);
  }
}

const twitchApi = new TwitchAPI('z97jvca5asox81v22jbb24eziykct5');

// 用的時候
const response = await twitchApi.getPopularGames();
const response2 = await twitchApi.getLiveStreams('LOL', 10);

[aszx87410]

抽獎那題 Prize 應該只當作一個容器（？）拿來放資料比較好，顯示的部分可以切開，而且可以盡量避免全域變數，改完大概會長這樣（沒有完全改好，意思有到就好）：

const btn = document.querySelector('.btn');

const firstPrize = new Prize('恭喜你中頭獎了！日本東京來回雙人遊！', 'http://pixelartmaker.com/art/cec844662085081.png', 'first__prize__background')
const secondPrize = new Prize(...);
const thirdPrize = new Prize(...)

function showPrizeResult(prize) {
  const body = document.querySelector('body');
  const lotteryTitle = document.querySelector('.title');
  const lotteryImage = document.querySelector('.lottery__image');

  lotteryTitle.innerText = prize.title;
  lotteryImage.src = prize.imgUrl;
  body.classList.add(prize.bgColorClass);
}

class Prize {
  constructor(title, imgUrl, bgClass) {
    this.title = title;
    this.imgUrl = imgUrl;
    this.bgColorClass = bgClass;
  }
}

// 初始化背景顏色
function initializeBackground() {
  body.classList.add('bg_initialize');
  body.className = '';
}

// 渲染抽獎結果到畫面上
function showLotteryResult(prize) {
  lotteryImage.classList.remove('hidden');
  initializeBackground();
  switch (prize) {
    case 'FIRST':
      showPrize(firstPrize);
      break;
    case 'SECOND':
      showPrize(secondPrize);
      break;
    case 'THIRD':
     showPrize(thirdPrize);
      break;
    case 'NONE':
      showPrize(none);
      break;
    default:
      // statements_def
      break;
  }
  btn.innerText = '再來一次！';
}

// 抽獎的非同步 function
async function lottery() {
  try {
    const response = await fetch('https://dvwhnbka7d.execute-api.us-east-1.amazonaws.com/default/lottery').then((res) => {
      if (res.ok) {
        return res.json();
      }
      console.log(`Status code : ${res.status}`);
      return null;
    });
    const data = response.prize;
    showLotteryResult(data);
  } catch (error) {
    alert('系統不穩定，請再試一次');
  }
}

// btn 的監聽事件
btn.addEventListener('click', lottery);

[aszx87410]

太好了，我比較喜歡看閒話家常XDD

[aszx87410]

flex 讚讚讚

[aszx87410]

感謝回饋，看來是我太樂觀了XDD

[aszx87410]

這個讚XD

[aszx87410]

後者，是知識的詛咒所以忽略了，我自以為講得很清楚了 😂

[ChihYang41]

哈哈哈其實我還沒辦法論斷這是好事還壞事，因為這狀況會逼自己去找額外資訊，好像也是提升找各種文件的能力

[aszx87410]

這從上一期吸收的經驗XD

[aszx87410]

仔細想一想的確是，應該先教 OOP 才對

[aszx87410]

week11 跟 12 我自己是預估資訊量 ok 甚至偏少，因為都是前面的延伸，可以等你之後體驗完再來跟我說我的假設是不是正確的XD

[aszx87410]

偏少我倒是覺得還行，有挑戰題在那邊可以讓大家做，偏多對我來說問題比較大，因為一定會有很多同學跟不太上

[aszx87410]

對， 差不多就是這樣，基本上前人卡關超久的地方，下一期一定會變超詳細

[aszx87410]

真的是這樣沒錯，我目前期望到後面課程變複雜時問問題會變得比較困難，spectrum 可以貼圖貼 code 就有優勢，或是到大後期大家出去面試 po 心得文也會有優勢，除此之外我也不期望什麼了XD

[aszx87410]

原本的期待大概是有去看別人 code 就行了，抓 bug 跟 code review 我有預想到會有你提出的那些顧慮，所以本來就沒什麼期望。總之你現在這樣做很棒，也算是幫我省了一些事情，十分感謝！

[ChihYang41]

太好了～我無聊時也喜歡看看 code 和別人互動，接下來有空也會繼續到處裝熟給回饋（？）

[aszx87410]

對話框左邊的加號點下去，有個可以貼 code 的選項

[aszx87410]

不過如果是 thread 的回覆，的確怎麼貼都很醜

[ChihYang41]

對我就是說 thread 的回覆，不管怎麼整理都醜歪歪，看了就頭很痛哈哈哈

[aszx87410]

補給區這概念滿不錯的

[aszx87410]

容易放棄界的王者XDD

[aszx87410]

原來好想還有白板題喔

[ChihYang41]

不像是氛圍嚴肅的考試，比較像是跟對方討論技術，然後他說「啊不然你就用白板寫一下」的狀況，就像閒聊一樣

[aszx87410]

我看了看也覺得很妙，你寫了一個結果是對的，但又不能說這 code 是對的的答案

[aszx87410]

喔不對，我上面講的是因為你迴圈從 0 開始，但你 str 初始值是字串，所以結果也會是錯的

[ChihYang41]

對，我初始值是字串，然後從 0 開始加，變數名字又怪怪的，不知道在寫什麼東西哈哈哈

[aszx87410]

感覺好想最看重的應該是你夠不夠有毅力夠不夠執著，從上面你對自己的描述看起來，似乎不太符合XD

[ChihYang41]

應該是喔，那時候他說其他地方表現不錯，執著力普通，很有可能就是因為這樣哈哈

[aszx87410]

感謝好想工作室 <(_ _)>
我七八月會去那邊一趟

[aszx87410]

其實有這預設是因為我覺得有時候我改作業只看文字的話可以有很多種解釋，例如說：「你為什麼要加這個？」
可以想成很兇的提問，或也可以想成單純的疑問
大部份時候是後者，所以才會跟大家說先預設成後者就對了

另一個原因是這其實可以透過表情符號來改善，但有時候我懶得加，例如說：「你為什麼要加這個 XD?」、「你為什麼要加這個 😂」

[ChihYang41]

哦哦對，其實在計劃剛開始講這個還不錯，避免很多誤會，不過習慣計劃進行流程之後，就會進入就事論事模式，不會預想對方語氣了哈哈

[aszx87410]

第一期有 kris，唯一跟得上進度的同學；第二期有 LinY，超前進度，只學了四個月就找到工作；第三期大概就是她了。

偷偷給你看一篇她的報導XD
https://blog.hahow.in/humans-of-hahow-weimin-just-do-it/

[ChihYang41]

真的是強者我同學！！

[aszx87410]

我後來有看你貼的範例，其實仔細想一想搞不好是必要之惡（？），就是看起來不順眼，但好像也沒什麼更好的方法

[aszx87410]

各方人馬XDD

[aszx87410]

其實她原本就是工程師，只是離職一段時間後東西有點忘記怎麼寫 code，但功力依舊在

[ChihYang41]

又一個強者我同學，每個都臥虎藏龍就是了 XD

[aszx87410]

我自己也滿喜歡這樣用的，可以學起來

[aszx87410]

可以玩玩另一個：https://r30challenge.herokuapp.com/

[ChihYang41]

是 minw 寫的欸好猛，目前玩到第二關，之後有破關的話來寫個心得 ！

[ChihYang41]

OOP 的部分你現在感覺只是把 function 換成物件導向裡的 method 而已，仔細看你就會發現差異不大，twtich 那題我改一下給你看，讓你參考一下什麼叫做方便重複使用：

class TwitchAPI {
  constructor(clientId) {
    this.baseUrl = 'https://api.twitch.tv/kraken'
    this.clientId = clientId;
  }

  sendRequest(url) {
    const headers = new Headers({ 'Client-Id': this.clientId });
    const myInit = { headers };
    return fetch(this.baseUrl + url, myInit).then((res) => {
      if (res.ok) {
        return res.json();
      }
      return null;
    });
  }

  getPopularGames() {
    const url = '/games/top?limit=5';
    return this.sendRequest(url);
  }

  getLiveStreams(gameName, offset) {
    const url = `/streams/?game=${gameName}&limit=20&offset=${offset}`;
    return this.sendRequest(url);
  }
}

const twitchApi = new TwitchAPI('z97jvca5asox81v22jbb24eziykct5');

// 用的時候
const response = await twitchApi.getPopularGames();
const response2 = await twitchApi.getLiveStreams('LOL', 10);

完全同意，我寫完感覺自己只是 function 的搬運工而已哈哈哈哈，本質上沒什麼差別。很感謝這個示範，比原本好很多，我參考一下這個示範回去想想該怎麼寫

[ChihYang41]

抽獎那題 Prize 應該只當作一個容器（？）拿來放資料比較好，顯示的部分可以切開，而且可以盡量避免全域變數，改完大概會長這樣（沒有完全改好，意思有到就好）：

關於這邊我有兩個疑惑：

1. 為什麼會牽涉到全域變數呢？
   我本來以為是 constructor 內的 this 會指向 window ，因為我記得 Huli 的影片解釋

class Person {
  constructor (name) {
    this.name = name;
  }
}

在 JavaScript 運作的方式其實是像

function Person(name) {
    this.name = name;
}

所以以為因為是 this 在 function 內，指向 window，所以會污染全域。

後來研究了一下 this 和 prototype ，看了這篇文章 和 鐵人賽：JavaScript 的 this 到底是誰？ 發現好像跟我想的不一樣，在 new 的時候 this 會指向物件本身，想請問為什麼會牽涉到全域呢？

2. 看完 給OOP初學者的建議：先搞懂「資料跟行為在一起」就好，其它的慢慢來，他的 Q&A 第一題說到：

Q&A
Q1：我常常設計一些類別，只有資料沒有行為，聽起來OK嗎?

不OK，這很不OOP，而且沒意義。
乾脆直接用關聯式陣列去表示那些資料就好。

我以為只放資料的 class 很不 OOP，把資料和行為在一起比較好，但這邊是把 Prize 當容器，我還蠻疑惑的，class 要依照怎麼樣的方式來寫比較好呢？

[aszx87410]

關於第一個問題，this 指到哪裡可參考：

1. 該來理解 JavaScript 的原型鍊了 aszx87410/blog#18
2. 淺談 JavaScript 頭號難題 this：絕對不完整，但保證好懂 aszx87410/blog#39

我指的全域變數是你本來 showPrize 那個方法，裡面直接去使用了外部的變數，這樣這個 class 就跟外部有了依賴性，就沒辦法很好的重用。意思就是哪天你朋友想用，沒辦法直接複製過去使用，外面還需要宣告一些東西才行

第二個問題，我覺得只放資料還行啊XDD 如果想要把行為再放進去，就是把顯示獎項的 method 也寫進去，但是要顯示的地方要從外部傳進去，例如說：

class Prize {
  constructor(title, imgUrl, bgClass) {
    this.title = title;
    this.imgUrl = imgUrl;
    this.bgColorClass = bgClass;
  }

  showPrizeResult(wrapper, lotteryTitle, lotteryImage) {
    lotteryTitle.innerText = prize.title;
    lotteryImage.src = prize.imgUrl;
    wrapper.classList.add(prize.bgColorClass);
  }
}

const body = document.querySelector('body');
const lotteryTitle = document.querySelector('.title');
const lotteryImage = document.querySelector('.lottery__image');

const firstPrize = new Prize('恭喜你中頭獎了！日本東京來回雙人遊！', 'http://pixelartmaker.com/art/cec844662085081.png', 'first__prize__background')
firstPrize.showPrizeResult(body, lotteryTitle, lotteryImage)

[ChihYang41]

第一個問題

原來如此，理解跟外部有依賴性的意思了，另外感謝提供 this 的資料，昨天為了理解 prototype 和 this ，看文章看得有點累 XD

第二個問題

咦真的嗎 XDD 因為這是 Week9 指定閱讀的文章，我以為算是 Huli 部分的觀點哈哈，既然知道這樣沒問題就放心了。

另外如果改成顯示獎項的 method 也寫進去，感覺又回到 class 跟外部有依賴性的問題了嗎？因為會用到外部的變數。目前覺得原本把 showPrize 移出去變成一個 function 似乎比較好

[aszx87410]

不會喔，你看像我這樣改寫，就沒有用到外部變數，都是靠參數傳進去的

[ChihYang41]

有了，看懂了！仔細看才發現是傳參數進去，是我眼花 QQ 感謝 Huli