前言

Day 4 我們先聊了 MVC 架構 的概念，Day 5 則把焦點放在 Magento 的 Model 模式 —— Repository、Model、ResourceModel 如何協作，把產品資料取出來。

不過，光有資料還不夠，使用者想要看到的可不是一坨 array 或 JSON，而是一個完整的 產品頁畫面。那麼問題來了：

👉 *當 Controller 拿到資料後，Magento 是如何把它轉換成畫面呈現給使用者的呢？
這就進入了 View 的世界。
.
.

Magento 的 View 模式：MVC + MVVM 的融合

小小說明一下！Magento 其實不是純粹的 MVC 架構。

為什麼呢？🤔
因為像 Magento 這種 大型框架，如果用單純 MVC，Controller 會變得又大又肥 —— 它既要協調流程，又要處理資料加工，維護起來超級痛苦。
.
.
所以 Magento 在 View 這一側，借用了 MVVM 的概念：

• 讓 Block 來當 ViewModel，負責準備資料、提供乾淨的方法給前端呼叫。
• 讓 PHTML 專心顯示，不再混雜邏輯。

👉 簡單來說，Magento 是 MVC + MVVM 的融合體，取了兩邊的優點，讓系統既有架構性，又能維持清晰分工。
.
.

ℹ️ 小小註解：什麼是 MVVM？

在傳統 MVC 裡，Controller 除了要管流程，還常常要幫 View 準備資料，久了就會變得很「肥大」。

因此後來出現了 MVVM (Model–View–ViewModel)，這是一種軟體架構模式，把程式分成三個角色：

• Model：專心處理資料與商業邏輯，例如資料庫存取、計算規則。
• View：單純負責畫面顯示，把資料渲染給使用者看，不摻雜邏輯。
• ViewModel：站在中間，負責把 Model 的資料整理好，轉換成 View 可以直接使用的形式。

👉 好處：

• View 不用自己管資料，只要專心顯示。
• Controller 保持精簡，不再過度肥大。
• 程式更乾淨，維護性更高。

.
.

現在，讓我們正式走進 Magento 的 View！

資料有了，架構鋪好了，接下來就要看畫面怎麼生出來。Magento 的 View 並不是單純的一個模板，它是由三個角色合作完成的：

• Layout XML：決定頁面結構（要有哪些區塊、元件）
• Block（ViewModel）：準備資料（把 Model 的資料整理成前端能用的形式）
• PHTML（View）：顯示畫面（用 HTML 把資料輸出給使用者看）

👉 如果對照 MVVM：

• View = PHTML：專心顯示畫面，不摻雜邏輯。
• ViewModel = Block：負責把資料準備好，提供乾淨的方法給 View 使用。
• Model = Magento 的 Model/Repository/ResourceModel：專心處理資料與商業邏輯。
• Layout XML：則是 Magento 自己加的一層，用來決定頁面「結構要怎麼拼」，換句話說，Layout XML 就像一張「頁面藍圖」，告訴系統 這個頁面要放什麼、放在哪裡。

那麼，我們要怎麼理解 Magento 的 View 呢？
就像前幾天一樣，最有效的方式不是硬啃原始碼，而是先從一個「產品頁載入」的情境出發，交給 Claude 快速整理出呼叫鏈，再順著這條線索，來理解 Layout、Block、PHTML 三個角色。
.
.

用 Claude 快速定位 Layout

這邊我們一樣交給 Claude 幫忙。問題很簡單：「當我們進入產品頁後，對應的 Layout XML 檔案位置在哪？」

我丟出的 prompt 是：

請幫我找出 Magento 在Users進入產品頁時，主要會使用到的 Layout XML 檔案位置，並幫我整理清單。

Claude 幫我們整理出來的結果是這樣：

.
.

我們可以看到，Layout 不會只有一個，而是會有多個 XML 一起組成，因為不同的模組都能把自己的區塊掛進產品頁。

那麼這裡，我們就先把焦點放在最核心的檔案：catalog_product_view.xml，來看看它是怎麼定義結構的。
.
.

打開 catalog_product_view.xml，可以看到它其實就是在幫產品頁「畫藍圖」。我們先挑幾個例子來看：

這裡我們就能知道，產品頁有載入一個區塊：

• Block：Magento\Catalog\Block\Product\View
  • 位置：vendor/magento/module-catalog/Block/Product/View.php
• PHTML：Magento_Catalog::product/view/form.phtml
  • 位置：vendor/magento/module-catalog/view/frontend/templates/product/view/form.phtml

👉 簡單來說，Layout XML 在這裡做的事情就是：
把 Block 指派到頁面上，並綁定它的 PHTML 模板，讓後續能夠顯示畫面。
.
.

再深入看Block、Phtml檔案，會發現：

• PHTML：單純是模板檔，用來輸出畫面（HTML + PHP），本身不處理邏輯。

  在這裡你可以看到，它直接呼叫 $block->getProduct()，把資料印到頁面上。

• Block ：本質上就是一個 PHP 類別，負責準備資料、提供方法給 PHTML 呼叫。例如上面 PHTML 用到的getProduct()，就是在 Block 裡定義好的：

👉 這樣一來，我們就可以很清楚看到：

• PHTML：只專心顯示畫面。
• Block：負責準備、提供資料。

兩者分工明確，對照 MVVM，這正好就是 View (PHTML) 與 ViewModel (Block) 的關係。

.
.

結語

現在的我們，已經越來越了解 Magento 的架構了，也開始慢慢掌握後端開發的技巧。
這樣下來，Day 4、Day 5、Day 6，我們已經把 Magento 的後端架構 大致梳理了一遍：

• Day 4：MVC 概覽（整體流程）
• Day 5：Model（Repository / Model / ResourceModel）
• Day 6：View（Layout / Block / PHTML）

一步步走來，從最初的陌生，到漸漸能看懂程式呼叫鏈，像是修行人慢慢打通經脈，內外功開始互相呼應。

接下來，修煉將邁入新階段 ——
不再只是理解架構，而是要思考 後端開發的真正心法：
在這龐大的系統裡，該怎麼樣去動手、怎麼樣去改造，才能既能達成需求，又能走得長遠？

明天，我會分享這個「後端開發的心法」：一種面對龐大系統時，如何下手的正確姿勢。