# [Live-log]_Week9.END
###### tags: `draft`, `real-time`

-  [](/FZ7HY6UzSK669n87RKuymw?both)

---

[TOC]

---

:::info
:::spoiler **主要連結**
- <span style="color: #000;
font-weight: bold;
background: #76b0f3;
border-radius: 8px;
padding: 3px 2px;">【Week9.END】</span>
- **【課堂講義】**
https://hackmd.io/@hexschool/H1Y-JD4KF [target=_blank]
- **【小組任務】**
https://hackmd.io/@hexschool/SJDvTjrKY [target=_blank]
:::

:::warning
- **預計 tag**
- [ ] 待補充項目：`#TODO`
- [ ] 需要練習的部分：`#practice`
- [ ] 課堂小問題：`#Quiz`

:::

---
---

## Summary

- Special bonus LIVE deadline
- ==12/05==-23:59：繳交 W6 主線任務
- 有交就算
- 信箱可以收到新的實況課程網址
- ==12/19==-23:59：最後結算
- 可以收到錄影

- 最終關卡：Kata 目標 ==6hrs== 以內
- Teachable 錄影補充：馬拉松 Live Demo

- 新手建議自己試著實作看看
- 但要設定停損點
- 卡關再去觀看補充影片
- 也可以照著影片實作
- 記得要在期限內繳交作業

- 建議： 12/19 以後到年底前可以試著完成 THE F2E

- ==年底前把培訓班的資源練完==
- 不要後悔

---

---

## 上半堂

### [08:20] Start

- QA
- 

- 老師分享
- 1. 定義資料
- 通常用物件
- 觀察欲輸出的畫面思考需要抽出哪些變數資料
- 先把要用的 DOM 宣告定義出來
- 待會要用來綁監聽、撰寫功能等等
- 養成【小步測試】的習慣、累積信心
- ~~資料有跑出來、好棒棒~~
- ~~`console.log('你很棒')`~~
-

-

### 示範 TODO-list

- 
- 2、3 都可以

- 刪除資料
- `data.splice(1, 1)`

- 常見失誤：
- 記得呼叫函式
- 記得位置是要等存檔之後再秀出畫面
-

- 防呆設計：避免資料是空的
- 偵測空字串、提前 return

  if(txt.value == '') {
    alert('pls input data')
    return
  }

- html tag
- `data-num`
- `data-` 可以自訂屬性
- 範例：埋特定資料的編號 id

- 取得該屬性
- `e.target.getAttribute('data-num')`

- 可讀性：同一行的邏輯不要塞太多

- 監聽刪除按鈕
- 防呆：
- 先偵測 `class`、不符合就提早 return

---

## [09:05] QK-time

---

## [09:10] 下半堂

- QA

- 綁 ul 的好處
- ul 不會在刪除資料的時候一起被刪掉
- 【範圍取值】

### [09:15] 複習判斷服務的使用功能

- Swiper：海報輪播套件

- axios 本身也是套件

- 撰寫網站的重點功能
- https://hackmd.io/@hexschool/H1Y-JD4KF#重新複習

- axios
- 後端 Node.js 也可以用

### [09:27] 最終關卡 - 前台

- 輸出畫面展示
- 

- 資料初始化

－[09:45] 流程
- 1. 資料初始化
- 2. key-point
- 3. 顯示列表

### 加入購物車

  str += '<li>${itrm.title}
  <input data-id ="${item.id}"......</li>'

- `init()`
- 重新整理
- 

- 把每次重新整理需要的函式一起封裝起來
- 需要的時候就呼叫 `init()`

- 

- 2 比較合適
- 避免戳爆

- 但還是要看==使用情境==
- 範例：公車資料就無法
- 因為車子==動態==會一直更新

- 使用者體驗建議：60s 才撈 1 次
- 3 次之後給使用者手動去按重新整理
- 避免使用者在發呆
- 就不用浪費自己的頻寬一直更新資料

- 範例：YouBike 租借站
- 5mins 更新
- 因為車子庫存量也是動態的，但不像公車變化速度需要那麼快

- 定時更新語法
- 關鍵字：`setTimeout`

- 刪除資料之後也要記得更新畫面

- ==#Quiz:== 
- 1. 不夠保險
- 萬一沒刪到後端就 GG
- ~~不要相信任何人~~
- 2. fine
- 3. 也不是不可以
- 但模組超過 3 個則竟量不要

### 加入購物車

- [10:24]

- `js-addcart`
- `js-...`
- 用來代表 樣式 與 邏輯 分離
-

- 防呆
- 

- 把邏輯拆解成函式：重複使用很方便

### [10:37] 後台

- `getOrderData`
- 取得資料之後同時顯示圓餅圖與列表

### 面試常見題目

- 可複習先前的週末任務主題

## [10:53] THE-END

- 記得先完成主線任務到 W6
- 下禮拜才能跟到 3Weeks 的 THE F2E 實況講解