# 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