---
# System prepended metadata

title: My New Tab 設計目標

---

# My New Tab 設計目標

## 主要目標＆範例
- 顯示現在時間
- 跟自己說嗨（?
    - 設定自己的名字
- 隨機產生背景圖片
    - 設定喜歡的圖片主題
- To-Do List
    - 新增項目
    - 改變狀態（未完成/完成）
    - 項目顯示（未完成/所有）
    - 刪除所有資料
- 製作成瀏覽器擴充功能
![](https://hackmd.io/_uploads/Hy7q8nvUh.png)

![](https://hackmd.io/_uploads/H1hkthDI2.png)

![](https://hackmd.io/_uploads/r1AfFhvIn.png)

![](https://hackmd.io/_uploads/HywK5nvL2.png)


## 推薦的設計模式 MCV
MVC (Model-View-Controller) 是一種設計模式，主要目的是用來簡化應用程式的開發與增強程式的可維護性，比較像是一種軟體開發的架構與邏輯

- M：Model，跟資料互動(新增、刪除、查詢、修改)
    - getData()
    - setData()
- V：View，決定畫面長甚麼樣子、控制畫面上的元素
    - HTML的架構
    - renderWindow()
    - renderSomething()
    - render...
- C：Controller，負責邏輯與資料處理，協調 Model 與 View 的互動
    - updateWindow()

```javascript=
<body>
    <!-- V:view，是畫面的部分，會呈現資料 (畫面的架構) -->
    <h1 id="name"></h1>
    <p id="age"></p>
    <script>
        // M:model，負責讀/寫資料
        let Data = {
            name: "Chris, Pan",
            age: 19
        }
        function getData(){
            return Data 
        }
        function setData(name, age){
            Data['name'] = name
            Data['age'] = age
        }
        // C:Controller，跟model拿資料，再將資料呈現到View(畫面上)
        function updateWindow(){
            let Data = getData()
            renderName(Data.name)
            renderAge(Data.age)
        }
        // V:view，是畫面的部分，會呈現資料 (畫面的控制)
        function renderName(name){
            let nameElement = document.getElementById('name')
            nameElement.innerText = name
        }
        function renderAge(age){
            let ageElement = document.getElementById('age')
            ageElement.innerText = age 
        }
    </script>
</body>
```

- 優點：方便修改、使程式結構更直覺、有利於團隊分工
- 缺點：需要較嚴謹的規劃、結構複雜不適合小型專案

## 提示
- 開一個空的資料夾，開始一個新的專案！
- 把 HTML, CSS, JavaScript 三樣東西分開檔案寫
- 資料夾架構可參考：
    - assets
        - main.css
        - some CSS files...
    - script
        - main.js
        - some JavaScript files...
    - images
        - some images...
    - index.html
    - manifest.json