昨天，我們學會了如何在 XIB 這個畫版上，佈置我們的View，並透過 @IBOutlet 讓Controller來控制它們。

學習資源

• Model-View-Controller：Apple 官方對 MVC 的核心概念解釋。
• Swift筆記 ：iOS Design Patterns — MVC
• 【在 iOS 開發路上的大小事2－Day10】MVC vs MVVM！MVVM 是什麼？能吃嗎？(上)
• 漫談 iOS 架構：從 MVC 到 VIPER，以及 Redux
  

這些資源都可以搭配AI一起學習，或許你會在一些文章內看到MVVM，但先別急，這之後會講到

為什麼我們需要「架構」？

• 困惑點：程式碼不就是一行一行寫下來嗎？為什麼要搞得這麼複雜，還分什麼 Model、View、Controller？它們到底是什麼？

• AI 協作

  • 我的 Prompt：我是一個 iOS 新手，常常聽到 MVC 架構。請用一個生動、非技術性的比喻，簡單解釋什麼是 MVC，以及為什麼要這樣劃分職責？

  AI 的回答 ：

  好的，這是一個非常好的問題！幾乎所有初學 iOS 或其他許多軟體開發領域的人，都會遇到 MVC 這個詞。我們完全拋開程式碼，用一個你我都很熟悉的「開餐廳」比喻，來讓你秒懂 MVC。

  想像一下，我們開了一家高級餐廳：

  MVC 的三個角色

  1. Model (模型) - 專業的廚房與廚師 👨‍🍳

  • 他是誰？ 餐廳的廚房，裡面有專業的廚師、各種食材、以及獨家食譜。
  • 他做什麼？
    • 管理數據 (食材)：廚房負責儲存、管理所有新鮮的食材。
    • 執行業務邏輯 (食譜)：廚師依照食譜（也就是一套規定好的流程和商業邏輯）將食材烹飪成美味的佳餚。
  • 他的原則：廚房非常專業且專注。他只負責把菜做好，完全不關心餐廳的裝潢、菜單的設計，也不會直接跟客人對話。你給他訂單，他就出菜。

  在 App 中，Model 就是負責處理資料和商業邏輯的部分。例如，一個音樂 App 的 Model 會負責管理歌曲清單、下載歌曲、處理使用者帳號資訊等。

  2. View (視圖) - 華麗的用餐區與菜單 🖼️

  • 他是誰？ 餐廳的外場，包括了所有的桌椅、燈光、裝潢，以及最重要的——給客人看的菜單 (Menu)。
  • 他做什麼？
    • 呈現樣貌：將餐廳美好的一面展示給客人看。菜單上會列出所有可點的菜色和價格。
    • 接收指令：客人會在菜單上指指點點，告訴服務生他想要什麼。
  • 他的原則：View 很「膚淺」，他只在乎外觀。他負責展示東西給客人看，以及接收客人的初步意圖（例如指著菜單上的「牛排」）。但他完全不知道牛排要怎麼做，也不知道廚房在哪裡。他只是一個展示和接收的窗口。

  在 App 中，View 就是使用者看得到、摸得到的使用者介面 (UI)。例如，按鈕、圖片、文字標籤、列表等。

  3. Controller (控制器) - 聰明幹練的服務生 🤵

  • 他是誰？ 串連廚房與外場的服務生。他是整間餐廳運作的核心樞紐。
  • 他做什麼？
    1. 接收指令：客人（使用者）看了菜單 (View)，向服務生點了一份「七分熟牛排」。
    2. 傳遞命令：服務生跑到廚房 (Model)，用廚房聽得懂的語言說：「一張單，菲力七分熟！」
    3. 等待結果：廚房 (Model) 開始烹飪，服務生則等待出菜。
    4. 更新畫面：廚房把做好的牛排交給服務生，服務生再將這盤熱騰騰的牛排端到客人的餐桌 (View) 上。
  • 他的原則：服務生是個溝通大師。他不做菜，也不設計菜單，他的唯一工作就是協調 View 和 Model 之間的溝通，確保整個流程順暢。

  在 App 中，Controller 就是大腦。當使用者點擊了一個按鈕 (View)，Controller 會收到通知，然後去命令 Model 更新資料或執行任務，最後再把 Model 回傳的結果，更新到介面 (View) 上讓使用者看到。

  ---

  為什麼要這樣劃分職責？

  想像一下，如果我們的餐廳沒有這種劃分，會發生什麼事？

  情況一：廚師直接跑出來點餐、送餐 (Model + Controller + View 混在一起)

  • 混亂：廚師滿身油煙地跑到客人面前，客人可能會覺得不專業。廚房裡沒人顧，可能會燒焦。
  • 難以擴充：如果今天想把餐廳裝潢得更漂亮（改 View），結果發現連廚師的工作流程都要跟著改，因為他們是綁在一起的。
  • 效率低落：廚師一下要做菜，一下要點餐，根本忙不過來，無法專心在自己最擅長的事情上。

  劃分職責的好處，就如同專業分工的餐廳：

  1. 關注點分離 (Separation of Concerns)
     • 廚師專心做菜 (Model)，設計師專心裝潢 (View)，服務生專心溝通 (Controller)。大家各司其職，效率最高，也最專業。
  2. 易於維護與修改 (Maintainability)
     • 想換菜單設計？ 沒問題，只要重新設計用餐區 (View) 就好，完全不用動到廚房 (Model) 的運作。
     • 想升級烤箱或改進食譜？ 只要在廚房 (Model) 內部升級就好，客人甚至不會察覺，他們看到的菜單 (View) 和服務流程 (Controller) 都沒變。
  3. 可重用性 (Reusability)
     • 這間廚房 (Model) 的烹飪能力太強了！我們是不是可以再開一間「外賣店」？外賣店可能只有一個簡單的櫃檯 (一個新的 View)，但它依然可以共用同一個廚房 (Model)。

  總結

  MVC 架構就像是為你的 App 建立一個分工清晰的團隊，讓程式碼乾淨、有條理、易於管理與擴充。當你開始寫 iOS App 時，時刻在心中想著這個「餐廳比喻」，就能更清楚地知道哪一段程式碼應該放在哪個檔案裡了。

  • 我的理解是 MVC 架構就像一個分工精良的團隊，將 App 的資料 (Model)、畫面 (View)和溝通邏輯 (Controller) 徹底分開，讓程式碼更有條理、更易於維護。

實踐 MVC，從整理「資料夾」開始

理論懂了，但要怎麼在我們的 Xcode 專案中實踐呢？第一步，就是建立一個清晰的資料夾結構。

我參考了 AI 和一些學長的建議，在 Xcode 中按右鍵 New Folder，為我們接下來的專案，規劃了這樣的資料夾結構：

/YourAppName (專案根目錄)
├── 📂 Models
│   └── (未來存放資料模型的 .swift 檔案)
│
├── 📂 Views
│   └── (未來存放自定義 UITableViewCell 等的 .swift 和 .xib 檔案)
│
├── 📂 Controllers
│    └── 📂 MainVC
│        ├── MainViewController.swift (把我們的主畫面控制器移進來)
│        └── MainViewController.xib
│
├── 📂 Resources (或 Supporting Files)
│   ├── AppDelegate.swift
│   ├── SceneDelegate.swift
│   ├── Assets.xcassets
│   └── Info.plist
│
└── 📂 Extensions
    └── (未來存放擴充功能的 .swift 檔案，例如擴充 UIColor)

我將現有的檔案，按照它們的角色，拖曳進對應的資料夾。雖然現在檔案還很少，但從一開始就建立好這個框架，能讓專案在未來保持整潔、有條理。

今天我們學習了 iOS 開發最基礎也最重要的MVC架構，並為我們未來的專案搭建好了穩固的架構。

明天，我們先深入探討 App 內部溝通的核心，為接下來長達一週的專案開發，鋪平最後一哩路。