---
# System prepended metadata

title: '[Live-log]_Week9.END'
tags: [real-time, draft]

---

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


![](https://img.shields.io/badge/Created_Date-03_Dec_2021-orange) 
- ![](http://img.shields.io/static/v1?logo=Pinboard&label=Edit&message=➦&style=style=flat) [![hackmd-github-sync-badge](https://hackmd.io/FZ7HY6UzSK669n87RKuymw/badge)](/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 
- ![](https://i.imgur.com/IfnAzYr.png)

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

- 

### 示範 TODO-list

- ![](https://i.imgur.com/q4or2jR.png)
    - 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
![](https://i.imgur.com/s0pZ9U5.png)

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

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

- Swiper：海報輪播套件

- axios 本身也是套件

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


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



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

- 輸出畫面展示
    - ![](https://i.imgur.com/F3eFGFA.png)

- 資料初始化

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

### 加入購物車

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

- `init()`
    - 重新整理
- ![](https://i.imgur.com/wM2M1DB.png)

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


- ![](https://i.imgur.com/JDYNbpM.png)

- 2 比較合適
    - 避免戳爆

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

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

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

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


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

- ==#Quiz:== ![](https://i.imgur.com/D9Bt20R.png)
    - 1. 不夠保險
        - 萬一沒刪到後端就 GG
        - ~~不要相信任何人~~
    - 2. fine
    - 3. 也不是不可以
        - 但模組超過 3 個則竟量不要

### 加入購物車

- [10:24]

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

- 防呆
    - ![](https://i.imgur.com/BaDgHo8.png)


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


### [10:37] 後台

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



### 面試常見題目

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


## [10:53] THE-END

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









