表現與資料分離：前端 MVC 架構實作

探討「表現與資料分離」概念於前端的實踐：HTML 作為 Model、CSS 作為 View、JavaScript 作為 Controller。透過重構簡單的下拉選單聯動範例，展示前端 MVC 如何應對需求變更。

原始耦合代碼

直接在 change 事件中硬編碼邏輯與 DOM 操作，難以應對「Select 改為 Input 模擬」、「行動裝置保留 Select」等變更。

MVC 重構版

var piliController = {
    start: function () { this.view.start(); },
    set: function (name) { this.model.setPerson(name); }
};
piliController.model = {
    piliKV: { '葉小釵': '刀狂劍癡', '一頁書': '百世經綸', '素還真': '清香白蓮' },
    curPerson: null,
    setPerson: function (name) { this.curPerson = this.piliKV[name] ? name : null; this.onchange(); },
    onchange: function () { piliController.view.update(); },
    getPiliAction: function () { return this.curPerson ? this.piliKV[this.curPerson] + this.curPerson : '???'; }
};
piliController.view = {
    start: function () { $('#pili').change(this.onchange); },
    onchange: function () { piliController.set($('#pili').val()); },
    update: function () { $('#end').html(piliController.model.getPiliAction()); }
};
piliController.start();

優勢分析

• View 僅操作 DOM，不含業務邏輯；Model 純粹管理資料與規則；Controller 協調兩者。
• 需求變更時，僅需替換 View 實作（如改用 Input 模擬 Select），Model 與 Controller 不變。
• 資料與表現完全解耦，利於單元測試與維護。

雖初看增加複雜度，但隨專案增長，關注點分離帶來的彈性與可維護性極具價值。