前端架構核心：UI 與資料層徹底分離的實作模式與程式碼範例

「介面與資料分離」不只是口號，必須落實在程式碼結構：UI 程式碼零依賴資料存取邏輯，資料層零耦合 UI 元件。本文以 jQuery + Callback/Event 模式示範純前端分離架構，可直接套用至 Vue/React/Angular 的 Service/Store 概念。

核心原則

1. 資料層 (Model) 只負責資料獲取、快取、事件發送，完全不引用 DOM、jQuery、任何 UI 庫。
2. UI 層 (View) 只負責渲染、綁定使用者事件、訂閱資料層事件，不含任何 AJAX/快取邏輯。
3. 雙向解耦：需求變更時，修改單一層即可，另一層零影響。

完整可執行範例 (單一 HTML)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>UI-Data Separation Demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function () {
    // ========== 資料層 ==========
    var Countries = function () {}
    Countries.prototype = {
        _items: [],
        _getData: function (success) {
            var items = [
                { id: 0, name: '中國' },
                { id: 1, name: '日本' },
                { id: 2, name: '美國' }
            ];
            $.extend(this._items, items);
            success(items);
        },
        // 事件訂閱機制
        on_selected: $.Callbacks(),
        on_inserted: $.Callbacks(),
        // 對外方法
        select: function () {
            var self = this;
            this._getData(function (items) {
                self.on_selected.fire({ sender: self, items: items });
            });
        },
        insert: function (item) {
            this._items.push(item);
            this.on_inserted.fire({ sender: self, item: item });
        }
    };

    // ========== UI 層 (僅此區塊可修改) ==========
    var countries = new Countries();
    countries.on_selected.add(function (args) {
        $(args.items).each(function () {
            $('#countries').append($('<option>').attr('value', this.id).text(this.name));
        });
    });
    countries.on_inserted.add(function (args) {
        $('#countries').append($('<option selected="selected">').attr('value', args.item.id).text(args.item.name));
    });
    var id = 10;
    $('#btnAdd').click(function () {
        countries.insert({ id: ++id, name: $('#countryName').val() });
    });
    countries.select();
});
</script>
</head>
<body>
<select id="countries"></select>
<div>
<input id="countryName" /><button id="btnAdd">新增</button>
</div>
</body>
</html>

程式碼結構解析

驗證分離成效

• 換 UI：改用 `
  • ` 渲染、或換成 Vue/React，Model 完全不用動。
  • 換資料來源：`_getData` 改呼叫真實 REST API、LocalStorage、IndexedDB，View 完全不用動。
  • 單元測試：Model 可在 Node.js 無 DOM 環境直接測試；View 可 Mock Model 事件測試渲染邏輯。

  擴充建議

  • 引入 Promise/async-await 取代回調，簡化非同步流程。
  • 使用 EventEmitter 或 Redux/Vuex/Pinia 統一狀態管理。
  • TypeScript 介面定義 interface Country { id: number; name: string } 強化型別安全。

  此模式為現代前端框架「資料驅動視圖」的基石，理解並實踐它，架構才不會隨專案增長而崩壞。