---
# System prepended metadata
title: 架構概念與環境建置，前後端分離概念解析與實務開發工作流說明
---
# 架構概念與環境建置，前後端分離概念解析與實務開發工作流說明
## 前端網站開發相關基礎知識
在網頁設計中，我們需要掌握三種語法與角色，才能打造完善的網站：
HTML (HyperText Markup Language，超文字標示語言) 負責內容結構與資訊標記；
CSS (Cascading Style Sheets，階層式樣式表) 負責頁面外觀與排版；
JavaScript (JS) 負責互動行為與動態功能。
三者缺一不可。
> 圖片上的 5 與 3 分別是 HTML5 與 CSS3，只是顯示目前使用的主流版本而已。
### 前端開發三大基礎語言
#### 1. **HTML (Hyper Text Markup Language)**
* 中文：超文字標示語言
* **用途**：負責「內容結構」與「資訊標記」
* **比喻**：就像「建築物的骨架」
* **特色**：
* 定義標題、段落、清單、表格、圖片等
* 沒有 HTML，網頁就會是一片空白
---
#### 2. **CSS (Cascading Style Sheets)**
* 中文：階層式樣式表
* **用途**：負責「外觀樣式」與「頁面排版」
* **比喻**：就像「房子的裝潢與油漆」
* **特色**：
* 控制字體大小、顏色、位置、背景、動畫
* 沒有 CSS，HTML 雖然能顯示，但閱讀體驗很差
---
#### 3. **JavaScript (JS)**
* **用途**：負責「互動行為」與「動態功能」
* **比喻**：就像「電線與開關系統，讓房子活起來」
* **特色**：
* 處理表單送出、按鈕點擊、聊天室訊息、登入註冊
* 讓網頁可以動態更新內容（例如購物車、即時通知）
---
#### 4. **三者缺一不可**
* **HTML** = 骨架 → 沒有就看不到內容
* **CSS** = 外觀 → 沒有就醜陋難讀
* **JavaScript** = 行為 → 沒有就無法互動
* 三者結合 → 完整的現代網頁
---
#### 5. **延伸到框架**
* React / Vue / Angular …
* 本質上都是 **HTML + CSS + JS 的延伸與封裝**
* 幫助開發更快、更有組織
---
📌 示意圖：
#### 補充概念圖
| 純 HTML 只具有線稿結構 | CSS 將賦予色彩與樣式等 | JavaScript 將會提供額外控制 |
| -------- | -------- | -------- |
|  |  |  |
### HTML 基礎知識學習
HTML 是一種 **標籤式語言**（Markup Language）。
它的核心概念就是：使用對應的「標籤 (tag)」來描述網頁內容。
👉 例子：段落標籤 ``
```html
我是一個段落標籤
```
* `` → 開始標籤 (paragraph)
* `
` → 結束標籤
* 中間文字 → 在網頁上顯示的內容
像是以下的範例就是用 p 標籤包覆了一段文字，而 p 標籤其實就是 paragraph(段落) 的縮寫，代表這一個區域是一個文字段落。
```htmlmixed=
我是一個段落標籤
```
#### 範例呈現畫面
#### 標籤的屬性 (Attributes) 與事件 (Events)
##### 屬性 (Attributes)
屬性是 **加在標籤上的附加資訊**，用來改變標籤的顯示方式或增加功能。
* 常見屬性：
* `id` → 元素唯一名稱
* `class` → 元素分類（常用於 CSS 選取）
* `src` → 超連結目標網址（用於 `![]()
`、`
```
💡 開發時請開啟瀏覽器 DevTools（F12）→ **Console** 觀察輸出與錯誤。
---
#### 2. 變數與常數：`let` / `const`
* `const`：宣告**不會被重新指定**的變數（推薦預設用它）
* `let`：需要重新指定時使用
* `var`：舊語法，不建議
```javascript
const siteName = 'My Todo'; // 不會被重新指定
let count = 0; // 需要更新時用 let
count += 1;
```
---
#### 3. 基本型別（為 JSON 對照做準備）
* **Number**：`42`, `3.14`
* **String**：`'text'`、`"text"`、`` `Hi ${name}` ``
* **Boolean**：`true` / `false`
* **null**（空值） / **undefined**（未定義）
* **Object**、**Array**
```javascript
const n = 42;
const s = `Hello`;
const ok = true;
const user = { name: 'Alex', age: 33 };
const list = [1, 2, 3];
```
---
#### 4. 物件與陣列（理解 JSON 的關鍵）
**物件（Object）**：鍵值對
**陣列（Array）**：有序集合
```javascript
const book = {
title: 'My Book',
pages: 220,
author: { name: 'Alex', email: 'test@foo.com' },
};
console.log(book.title); // 點記法
console.log(book['author']['name']); // 括號記法（動態鍵名時用）
```
[詳細教材](https://hackmd.io/@react-course/S13wL00DR)
---
#### 5. 函式與箭頭函式
```javascript
function add(a, b) { return a + b; }
const add2 = (a, b) => a + b;
```
> 箭頭函式若是後方沒有使用 {} 進行包覆，後面那段程式的執行結果將會自動 return
---
#### 6. 常用語法糖
* **樣板字串**（易於組 HTML / 訊息）：
```javascript
const title = 'Learn JS';
const li = `${title}`;
```
* **解構 / 展開**（處理物件、陣列很方便）：
```javascript
const { name, email } = book.author;
const withId = { id: 1, ...book };
const more = [0, ...list, 4];
```
* **三元運算子**（簡寫 if/else）：
```javascript
const label = list.length ? '有資料' : '沒有資料';
```
---
#### 7. 陣列方法（渲染列表的核心）
* `map`：把陣列**一一轉換**成新陣列（很適合轉成 HTML 字串）
* `filter`：**過濾**
* `find`：找出第一個符合的元素
```javascript
const todos = [{ title: 'A' }, { title: 'B' }];
const html = todos.map(t => `${t.title}`).join('');
// => "AB"
```
---
#### 8. DOM 操作與事件（Todo & 表單必備）
```javascript
const form = document.querySelector('.todo-list__form');
const input = document.querySelector('.todo-list__input');
const list = document.querySelector('.todo-list__items');
form.addEventListener('submit', (e) => {
e.preventDefault(); // 阻止表單預設送出
const title = input.value.trim(); // 去頭尾空白
if (!title) return;
// 1) 更新資料 → 2) 重新渲染 → 3) 清空輸入
// （實作見 Todo 範例）
input.value = '';
});
```
---
#### 9. 迷你練習
**目標**：把輸入加入清單並顯示（不含樣式，對齊 Todo 範例的思路）
```html
```
[線上範例](https://github.com/IffyArt/2025-fullstack-course-forntend/tree/feature/javascript-base)
---
#### 10. 易錯點清單
* `==` vs `===`：請用 **`===`**（嚴格相等）
* `const` vs `let`：預設用 **`const`**，需要重新指定才用 `let`
* `innerHTML` 會解析 HTML，**輸入若來自使用者需小心**（課程中先使用可信資料）
## 建立現代 Web 開發的整體觀念
### 傳統網頁的運作方式
在早期的網站設計中，每一個頁面幾乎都是一份獨立的 HTML 文件。
* 當使用者切換頁面時，瀏覽器會向伺服器請求一個新的 HTML 檔，並整頁刷新。
* 可以把它想像成 **翻書**：每翻一頁，看到的就是一份全新的 HTML 頁面。
📌 優點：簡單直觀，容易實作。
📌 缺點：當專案變大時，重複的內容（例如導覽列、頁尾）需要在每個檔案中分別維護，修改起來非常麻煩。
---
### 維護困境
舉個例子：
* 在 10 頁的小網站裡，如果要更換導覽列的 LOGO，你需要修改 10 份 HTML。
* 在 1000 頁的大型網站中，這個動作就會變成一場災難。
這就像是一本有 1000 頁的書，每一頁都寫著書名，如果要改書名，就得把每一頁都改一次。
---
### 現代 Web 架構的解法
為了解決這個問題，現代 Web 開發採用了 **前後端分離** 與 **組件化設計** 的方式：
* **前端**：專注於 UI 與使用者體驗，負責渲染頁面。
* **後端**：專注於提供資料與邏輯，通常透過 API (REST/GraphQL) 對外服務。
* **共用組件**：像是導覽列、頁尾、側邊欄，可以在多個頁面重複使用，只需要維護一份程式碼。
這種方式大幅降低了維護成本，也讓不同團隊（前端、後端）可以同時開發，提升效率。
---
### 單頁應用程式（SPA, Single Page Application）
現代框架（例如 React、Vue、Angular）常採用 **單頁應用程式 (SPA)** 的模式：
* 使用者只載入一次 HTML，之後的操作都透過 **JavaScript 動態切換內容**。
* 當使用者切換頁面時，瀏覽器不再整頁刷新，而是只更新需要改變的部分。
* 後端只提供 **API 資料**，而不是整份 HTML。
📌 優點：
* 體驗更流暢，像在操作 App
* 前後端職責清晰
* 可重複使用的組件，讓維護更容易
#### 範例示意圖
在這個範例中：
* 右邊的 Aside（側邊欄）保持不變
* 只有主要內容區（Main Content）會隨使用者操作而更新
* 這就是 **前後端分離 + 組件化開發** 的實際應用
---
### 總結
* **傳統架構**：每個頁面獨立，維護困難
* **現代架構**：前後端分離，透過 API 提供資料，前端負責畫面
* **SPA 模式**：一次載入，動態更新，體驗更流暢
* **組件化**：共用元件只需要維護一次，大幅降低開發成本
## 全端（Full Stack）是什麼？
全端開發 = **前端（Front End）＋後端（Back End）＋資料庫（Database）**。
可把網站比喻成餐廳：
* **前端**：店面外觀、動線與擺設（使用者看到與操作的部分）
* **後端**：廚房處理流程（商業邏輯）
* **資料庫**：食材與庫存（資料）
* **API/資料傳輸**：服務生把餐點送到客人手上（前後端溝通）
---
### 什麼時候不需要後端？
不是所有網站都要後端與資料庫。像**形象官網、個人頁**等內容固定、更新頻率低的網站，用**靜態網站**即可；
若要登入、下單、即時更新等 **動態功能**，才需要後端與資料庫。
---
### 雛形／設計的重要性
雛形與視覺設計不屬於 Full Stack 本身，卻像**建築藍圖**：
與工程可分離，但對做出**好用又好看**的網站至關重要。
#### 範例示意圖
## 了解前後端分離的架構模式與傳統架構的差異
在軟體與網站開發中，如何組織程式碼是一件非常重要的事。良好的架構能讓專案 **更好維護、更易於擴充、也更便於測試**。
常見的兩種設計模式是 **MVC (Model-View-Controller)** 與 **MVVM (Model-View-ViewModel)**。
這兩者的目標相同：把「資料邏輯」和「顯示介面」分開，但它們的資料流與角色定位並不一樣。
---
### MVC 架構
MVC 是一種傳統且廣泛使用的架構模式，常見於伺服器端框架（例如：Ruby on Rails、Laravel、ASP.NET MVC）。
* **Model（模型）**
* 負責資料邏輯與狀態管理
* 例如：存取資料庫、處理計算
* **View（視圖）**
* 負責顯示內容給使用者
* 例如：HTML 頁面、報表畫面
* **Controller（控制器）**
* 負責接收使用者操作並進行協調
* 例如：當使用者按下「送出表單」 → Controller 呼叫 Model → 更新資料 → 將結果傳給 View 顯示
📌 MVC 的特點
* 資料流向清楚（Controller → Model → View）
* 適合中小型專案或後端模板直出的網站
* 缺點：前端互動較多時，Controller 會變得複雜
---
#### MVC 架構示意圖
> 在典型的 MVC 網站中：
>
> * 使用者（User）觸發事件（點擊按鈕、請求頁面）
> * Controller 負責協調並呼叫 Model
> * Model 從資料庫（DB）取得資料並處理
> * 最後 Controller 把資料交給 View 渲染給使用者
---
### MVVM 架構
MVVM 是隨著前端框架（如 Vue、Angular）興起而流行的架構模式。它強調 **資料綁定 (Data Binding)**，讓「資料改變」與「畫面更新」能自動同步。
* **Model（模型）**
* 同 MVC，負責資料邏輯與狀態
* **View（視圖）**
* 使用者介面，負責顯示資料與接收互動
* **ViewModel（視圖模型）**
* 負責管理 View 與 Model 的橋樑
* 提供「資料狀態」給 View，並處理事件邏輯
* 透過 **雙向資料綁定**，當 Model 更新 → View 自動更新；當使用者輸入 → Model 自動更新
📌 MVVM 的特點
* 透過資料綁定，開發效率大幅提升
* 前端互動複雜時，程式碼更容易維護
* 缺點：小型專案可能過度設計，增加複雜度
---
#### MVVM 架構示意圖
> 在 MVVM 的世界裡：
>
> * 使用者（User）操作 View
> * ViewModel 自動處理資料流與事件
> * Model 更新後，透過 ViewModel 立即反應到畫面上
> * 不需要像 MVC 一樣透過 Controller 手動調用
---
### MVC 與 MVVM 的比較
| 特點 | MVC | MVVM |
| ---------- | ------------ | --------------- |
| **控制邏輯位置** | 在 Controller | 在 ViewModel |
| **資料流** | 單向，需手動更新 | 雙向，自動同步 |
| **適合場景** | 傳統伺服器渲染頁面 | 前端框架 (SPA, PWA) |
| **優點** | 結構清晰，後端常用 | 開發效率高，互動性強 |
| **缺點** | 前端互動代碼繁瑣 | 小專案可能過度設計 |
📌 總結：
* **MVC** 適合傳統網站或後端為主的系統。
* **MVVM** 更適合現代前端框架與單頁應用程式（SPA）。
## JSON 基礎教學
### 為什麼需要 JSON？
在現代 Web 開發中，前端與後端分離後，雙方必須透過 **資料交換格式** 來溝通。
這些格式要同時滿足幾個條件：
* 簡單易讀
* 易於解析與生成
* 能被不同語言支援
* 安全且結構清晰
早期常用的格式是 **XML**，但由於語法繁瑣，逐漸被 **JSON (JavaScript Object Notation)** 取代。
如今，JSON 幾乎成為網頁與伺服器之間傳遞資料的事實標準。
👉 延伸閱讀：
* [XML 教學](https://www.w3schools.com/xml/)
* [JSON 官方網站](https://www.json.org/json-en.html)
---
### JSON 是什麼？
JSON（JavaScript Object Notation）是一種 **輕量級資料交換格式**。
它的語法和 JavaScript 物件相似，但它本身只是一種「格式」，並不是程式語言。
📌 特點：
* 語法簡單，容易理解
* 幾乎所有程式語言都支援
* 對前端開發者特別友善（因為與 JavaScript 語法相近）
JSON 可以表示的基本資料型別：
* **數值 (Number)**：整數、小數、科學記號
* **字串 (String)**：必須用雙引號 `"`
* **布林值 (Boolean)**：`true` / `false`
* **陣列 (Array)**：有序集合，用 `[]` 包裹
* **物件 (Object)**：無序的「鍵-值對」，用 `{}` 包裹
* **空值 (null)**：代表空資料
---
### JSON 的範例
```json
{
"type": "book",
"pages": 220,
"title": "My Book",
"author": {
"name": "Alex",
"age": 33,
"email": "test@foo.com",
"directions": "Lorem ipsum dolor sit amet consectetur adipisicing elit."
}
}
```
---
### 在 JavaScript 中使用 JSON
#### 物件轉 JSON
使用 `JSON.stringify()`
```javascript
var book = {
type: 'book',
pages: 220,
title: 'My Book',
author: {
name: 'Alex',
age: 33,
email: 'test@foo.com',
},
};
console.log(JSON.stringify(book));
// {"type":"book","pages":220,"title":"My Book","author":{"name":"Alex","age":33,"email":"test@foo.com"}}
```
---
#### JSON 轉物件
使用 `JSON.parse()`
```javascript
var jsonData = '{"type":"book","pages":220,"title":"My Book","author":{"name":"Alex","age":33,"email":"test@foo.com"}}';
console.log(JSON.parse(jsonData));
// {type: "book", pages: 220, title: "My Book", author: {…}}
```
### JSON 與 localStorage
瀏覽器提供 **localStorage**，可以在同一個網域下保存資料，即使重新整理或關閉瀏覽器也不會立即消失。
📌 注意：localStorage 只能存放 **字串**，所以常搭配 JSON 使用。
#### 儲存資料
```javascript
localStorage.setItem('myCat', 'Tom');
```
#### 取得資料
```javascript
let cat = localStorage.getItem('myCat');
```
#### 刪除資料
```javascript
localStorage.removeItem('myCat');
```
#### 清空全部
```javascript
localStorage.clear();
```
---
### 總結
* JSON 是目前最主流的資料交換格式，取代了 XML
* 支援跨語言，前端與後端溝通的最佳選擇
* JavaScript 內建 `JSON.stringify()` 與 `JSON.parse()`
* 在瀏覽器端，可與 **localStorage** 搭配，實現資料儲存
## TODO LIST 第一版練習
[範例連結](https://github.com/IffyArt/javascript-base-todo-list)
```bash=
project
│ index.html
│
└───assets
│ │
│ └───javascript
│ │ │ script.js
│ │
│ └───style
│ │ style.css
```
### HTML 樣板
```htmlembedded=
Document
- 全部
- 代辦
- 已完成
```
### CSS樣式
```css=
* {
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 40px;
min-height: 100vh;
background-color: aliceblue;
}
.todo-list {
width: 400px;
}
.todo-list__form {
display: flex;
}
.todo-list__form input {
flex: 1;
padding: 15px;
outline: none;
border: none;
font-size: 1rem;
}
.todo-list__form button {
padding: 15px;
border: none;
background-color: lightslategray;
color: white;
}
.todo-list__tabs {
display: flex;
margin: 10px 0;
background-color: white;
list-style-type: none;
}
.todo-list__tabs > li {
padding: 15px 20px;
letter-spacing: 2px;
cursor: pointer;
transition: background-color 300ms, color 300ms;
}
.todo-list__tabs > li.active,
.todo-list__tabs > li:hover {
background-color: lightslategray;
color: white;
}
.todo-list__items {
display: flex;
flex-direction: column;
list-style-type: none;
}
.todo-list__items li {
display: inline-flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
padding: 10px 20px;
background-color: white;
}
.todo-list__not-found {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
background-color: lightslategray;
color: white;
}
```
### JavaScript 操作
```javascript=
// 去取得 localStorage 上方的資料，若沒有結果的話會回傳結果 null
// 原本使用兩個陣列是指空值合併運算符，但這個操作其實比較新，因此我們可以改用三元運算式進行操作
const todoListData = JSON.parse(localStorage.getItem('todoList'))
? JSON.parse(localStorage.getItem('todoList'))
: [];
// 去取得 DOM 上面 class 名稱是 todo-list 的節點
const todoList = document.querySelector('.todo-list');
// 去取得 todoList 中 class 名稱是 todo-list__form 的節點
const todoListFrom = todoList.querySelector('.todo-list__form');
// 去取得 todoListFrom 中的第一個 button 節點
const todoListFromButton = todoListFrom.querySelector('button');
// 去取得 todoList 中 class 名稱是 todo-list__tabs 的節點
const todoListTabs = todoList.querySelector('.todo-list__tabs');
// 去取得 todoList 中 class 名稱是 todo-list__items 的節點
const todoListItems = todoList.querySelector('.todo-list__items');
// 建立一個協助我們宣染頁面 todo list 的函式
const renderTodoList = () => {
// 在此處先宣告一個將要被宣染到 html 的變數，沒有跟賦值一起操作是為了讓過程比較好修改與理解
let todoListUI;
// 讓要被宣染到 html 的物件，指定成一個 map 出來的新陣列，此處將會回傳一個 html 模板
todoListUI = todoListData.map(
(element) =>
`
${element.title}
${element.status}
`,
);
// 這裡可以個別將 todoListUI 與 todoListData 列印出來，並觀察其中的差異
console.log(todoListData); // 陣列資料
console.log(todoListUI); // 要被宣染到 html 的內容
// 這裡會將 todoListItems 這個 node 節點所在的 html，置換為下方的其中一種方式
// 這裡藉由三元運算式的方式，去判斷目前陣列是否有內容（用長度判斷），若沒有內容的話新增一個提示區塊
todoListItems.innerHTML = todoListUI.length
? todoListUI.join('')
: '目前沒有內容
';
};
// 幫 todoListFromButton 這個節點新增按鈕點擊事件
todoListFromButton.addEventListener('click', function (event) {
// 因為我們的 button 是放在 form 中，因此點擊時會直接觸發表單送出操作，這裡是將這一預設操作給停止
event.preventDefault();
// 新增一筆資料到我們的 todoListData 這個 array 上面
todoListData.push({ title: 'ssss', status: '代辦' });
// 將已經新增資料的陣列，轉成 JSON 格式之後上傳到 localStorage 上面，這裡的機碼(儲存位子)使用 todoList
localStorage.setItem('todoList', JSON.stringify(todoListData));
// 觸發畫面更新的函式，因為此時他所倚賴的陣列已經更新了內容，因此會在畫面上增加一筆項目
renderTodoList();
});
// 此處算是初始化的操作，沒有執行的話畫面預設會是空的內容
renderTodoList();
```
## Todo List 第二版
[範例連結](https://github.com/IffyArt/2025-fullstack-course-forntend/tree/feature/todo-list-v2)
```bash=
project
│ index.html
│
└───assets
│ │
│ └───javascript
│ │ │ script.js
│ │
│ └───style
│ │ style.css
```
### HTML 樣板
```htmlembedded=
Document
- 全部
- 代辦
- 已完成
```
### CSS樣式
```css=
* {
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 40px;
min-height: 100vh;
background-color: aliceblue;
}
.todo-list {
width: 400px;
}
.todo-list__form {
display: flex;
}
.todo-list__form input {
flex: 1;
padding: 15px;
outline: none;
border: none;
font-size: 1rem;
}
.todo-list__form button {
padding: 15px;
border: none;
background-color: lightslategray;
color: white;
}
.todo-list__tabs {
display: flex;
margin: 10px 0;
background-color: white;
list-style-type: none;
}
.todo-list__tabs > li {
padding: 15px 20px;
letter-spacing: 2px;
cursor: pointer;
transition: background-color 300ms, color 300ms;
}
.todo-list__tabs > li.active,
.todo-list__tabs > li:hover {
background-color: lightslategray;
color: white;
}
.todo-list__items {
display: flex;
flex-direction: column;
list-style-type: none;
}
.todo-list__items li {
display: inline-flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
padding: 10px 20px;
background-color: white;
}
.todo-list__items > li > label {
display: inline-flex;
align-items: center;
flex: 1;
}
.todo-list__items > li > label > input {
margin-right: 10px;
}
.todo-list__not-found {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
background-color: lightslategray;
color: white;
}
```
### JavaScript 操作
```javascript=
// 去取得 DOM 上面 class 名稱是 todo-list 的節點
const todoList = document.querySelector('.todo-list');
// 去取得 todoList 中 class 名稱是 todo-list__form 的節點
const todoListFrom = todoList.querySelector('#create-todo-list');
// 去取得 todoListFrom 中的第一個 button 節點
const todoListFromButton = todoListFrom.querySelector('button');
// 去取得 todoListFrom 中的第一個 input 節點
const todoListFromInput = todoListFrom.querySelector('input');
// 去取得 todoList 中 id 名稱是 search-todo-list 的節點
const todoListSearch = todoList.querySelector('#search-todo-list');
// 去取得 todoListSearch 中的第一個 button 節點
const todoListSearchButton = todoListSearch.querySelector('button');
// 去取得 todoListSearch 中的第一個 input 節點
const todoListSearchInput = todoListSearch.querySelector('input');
// 去取得 todoList 中 class 名稱是 todo-list__tabs 底下的 li 節點
const todoListTabs = todoList.querySelectorAll('.todo-list__tabs li');
// 去取得 todoList 中 class 名稱是 todo-list__items 的節點
const todoListItems = todoList.querySelector('.todo-list__items');
// 去取得 todoList 中 class 名稱是 todo-list__info 的節點
const todoListInfo = todoList.querySelector('.todo-list__info');
// 去取得 localStorage 上方的資料，若沒有結果的話會回傳結果 null
// 使用短路求值的技巧做操作
let todoListData = JSON.parse(localStorage.getItem('todoList')) || [];
// 定義整個 todo list 的初始狀態
let currentStatus = '全部';
// 定義一個關鍵字
let keyword = '';
// 建立一個協助我們宣染頁面 todo list 的函式
const renderTodoList = () => {
// 在此處先宣告一個將要被宣染到 html 的變數，沒有跟賦值一起操作是為了讓過程比較好修改與理解
let todoListUI;
todoListUI =
currentStatus === '全部'
? todoListData
: todoListData.filter((element) => element.status === currentStatus);
todoListUI = todoListUI.filter((element) => element.title.includes(keyword));
// 讓要被宣染到 html 的物件，指定成一個 map 出來的新陣列，此處將會回傳一個 html 模板
todoListUI = todoListUI.map(
(element, index) =>
`
${element.status}
delete
`,
);
// 這裡可以個別將 todoListUI 與 todoListData 列印出來，並觀察其中的差異
console.log(todoListData); // 陣列資料
console.log(todoListUI.join('')); // 要被宣染到 html 的內容
// 這裡會將 todoListItems 這個 node 節點所在的 html，置換為下方的其中一種方式
// 這裡藉由三元運算`式的方式，去判斷目前陣列是否有內容（用長度判斷），若沒有內容的話新增一個提示區塊
todoListItems.innerHTML = todoListUI.length
? todoListUI.join('')
: '目前沒有內容
';
todoListInfo.innerHTML = `${
keyword ? '關鍵字：' + keyword : ''
}目前的${currentStatus}共： ${todoListUI.length} 筆`;
};
const updateLocalStorage = () => {
// 將已經新增資料的陣列，轉成 JSON 格式之後上傳到 localStorage 上面，這裡的機碼(儲存位子)使用 todoList
localStorage.setItem('todoList', JSON.stringify(todoListData));
};
const editTodoItemStatus = (id) => {
// 對原始資料的陣列進行搜尋，並取得符合輸入 id 的資料結果
const itemData = todoListData.find((element) => element.id === id);
// 對資料的狀態進行狀態上的判斷，隨後再將判斷出的結果進行賦值操作
itemData.status = itemData.status !== '代辦' ? '代辦' : '已完成';
// 觸發畫面繪製的函式
renderTodoList();
// 觸發 updateLocalStorage 的函式操作
updateLocalStorage();
};
const deleteTodoItem = (id) => {
// 將 todoListData 重新給予一個沒有包括傳入 id 物件的陣列
todoListData = todoListData.filter((element) => element.id !== id);
// 觸發畫面繪製的函式
renderTodoList();
// 觸發 updateLocalStorage 的函式操作
updateLocalStorage();
};
// 幫 todoListFromButton 這個節點新增按鈕點擊事件
todoListFromButton.addEventListener('click', function (event) {
// 因為我們的 button 是放在 form 中，因此點擊時會直接觸發表單送出操作，這裡是將這一預設操作給停止
event.preventDefault();
// 從 todoListFormInput 上方取得他的數值
const inputValue = todoListFromInput.value;
// 判斷 inputValue 在被剪裁去空格之後，是否還有內容值，若變為空字串則會被轉換為 false
if (!inputValue.trim()) {
// 將 todoListFromInput 的數值改為空字串
todoListFromInput.value = '';
// 將函示進行返回操作，當一個函式 return 時後面的程式將不會運作
return;
}
// 將 todoListFromInput 的數值改為空字串
todoListFromInput.value = '';
// 新增一筆資料到我們的 todoListData 這個 array 上面
todoListData.push({
// 幫資料使用目前時間建立一個 id
id: new Date().getTime(),
title: inputValue,
status: '代辦',
});
// 觸發 updateLocalStorage 的函式操作
updateLocalStorage();
// 觸發畫面更新的函式，因為此時他所倚賴的陣列已經更新了內容，因此會在畫面上增加一筆項目
renderTodoList();
});
// 幫 todoListFromButton 這個節點新增按鈕點擊事件
todoListSearchButton.addEventListener('click', function (event) {
// 因為我們的 button 是放在 form 中，因此點擊時會直接觸發表單送出操作，這裡是將這一預設操作給停止
event.preventDefault();
// 設定關鍵字為 input 的 value
keyword = todoListSearchInput.value;
// 觸發畫面更新的函式，因為此時他所倚賴的陣列已經更新了內容，因此會在畫面上增加一筆項目
renderTodoList();
});
// 對 todoListTabs 進行迴圈操作，幫每一個項目都執行一次函式
todoListTabs.forEach((element) => {
// 對目前被執行的項目新增一個點擊事件
element.addEventListener('click', () => {
// 對 todoListTabs 進行迴圈操作，將每一個項目的 class 上的 active 做刪除
todoListTabs.forEach((element) => element.classList.remove('active'));
// 對目前被點擊的項目新增一個 active 的 class
element.classList.add('active');
// 將當前的定義設定為點擊的文字內容
currentStatus = element.innerHTML;
// 觸發畫面更新的函式，
renderTodoList();
});
});
// 此處算是初始化的操作，沒有執行的話畫面預設會是空的內容
renderTodoList();
```