UI 架構演進史：從 Script、Code Behind 到 MVC、MVP、MVVM

前言

UI 開發模式的演進，本質上是為了解決「業務邏輯」與「介面呈現」如何分離、協作的問題。本文按邏輯脈絡梳理：Script → Code Block/Code Behind → MVC/MVP/MVVM。

階段一：Script 時代（單一腳本）

• 特點：功能單一、管理單一、入口單一（main 函數）。
• 早期程式即輸入→計算→輸出，無 UI 概念，開發者多為數學家。
• 摩爾定律推動硬體效能指數增長，軟體規模爆炸，單一腳本無法承載。

階段二：軟體、UI 與標記語言的誕生

• 需求變化：功能繁雜、管理統一、多入口（從 main 到起始 UI）。
• 人腦是單線程的，無法同時進行 UI 與邏輯思考，導致程式碼必須分離：做什麼（邏輯） vs 長什麼樣（UI）。
• 標記語言（HTML、XAML 等）天然適合描述 UI 結構，成為 UI 層主流。

階段三：Code Block 與 Code Behind 的共存

UI 與邏輯分離後，如何關聯？兩大流派：

Code Block（內嵌腳本）

在標記檔內直接撰寫邏輯，如 Razor、JSP、ASP.NET WebForms 的 <script runat="server">。

@model MyModel
@{ ViewBag.Title = "Edit"; }
<a class="btn">新增</a>
<script>
$('.btn').click(() => { $.oa.drawer.openUrl(...); });
</script>

優點：UI 與邏輯同檔，維護直觀。
缺點：檔案膨脹、難以單元測試、設計師與開發者衝突。

Code Behind（分離類別）

標記檔只保留事件綁定，邏輯移至獨立類別（.cs/.vb）。

<asp:Button OnClick="Remove_Click" />
// CodeBehind.cs
protected void Remove_Click(object sender, EventArgs e) {
    currencyManager.Remove(id);
}

優點：職責清晰、利於團隊協作、可測試。
缺點：事件綁定靈活度較低、View 與 Presenter 耦合。

階段四：MVC、MVP、MVVM——架構模式的正式化

本質差異

• MVC：View 與 Model 不直接通訊，Controller 為中心。
• MVP：View 介面化，Presenter 完全控制 View 行為。
• MVVM：ViewModel 無 View 參考，靠 Binding Engine 自動同步，最適合聲明式 UI。

架構是對客觀不足的妥協，規範是對主觀不足的妥協

沒有銀彈，只有適合當下團隊、專案規模、技術棧的選擇。理解演進歷史，才能在新技術出現時快速定位其解決的核心問題。