MVC 與 Vue 本文寫於 2020 年 7 月 27 日首先有個問題：Vue 是 MVC 還是 MVVM 框架？維基百科告訴我們：MVVM 是 PM 的變種，而 PM 又是 MVC 的變種。所以一定程度上來說，三者的思想方向是一樣的。所以不管 Vue 是 MVC 還是 MVVM 或者都不是 ...

MVC 與 Vue

本文寫於 2020 年 7 月 27 日

首先有個問題：Vue 是 MVC 還是 MVVM 框架？

維基百科告訴我們：MVVM 是 PM 的變種，而 PM 又是 MVC 的變種。

所以一定程度上來說，三者的思想方向是一樣的。所以不管 Vue 是 MVC 還是 MVVM 或者都不是，它的思想方向與這些設計模式的方向是大體相同的。

並且 Vue 的官網中也說道：“雖然沒有完全遵循 MVVM 模型，但是 Vue 的設計也受到了它的啟發。”

這個問題網上吵得比較多，本文並不是來討論這個問題的，而是面是向初學者淺淺的分析一下老大哥 MVC 的思想在 Vue 中的體現。

從我們常用的工具框架中學習到編程的精髓思想，才是會學習程式員，不然只是編程民工罷了。

0 新手的困惑

大學時候專業里前後開了幾門網頁課，先是教授 HTML、CCC；後來一門課教了 JS；最後有一門教授 Vue 的課。

由於我大學讀的並不是電腦專業，而是藝術類的數字媒體藝術專業。所以大家對於編程的熱情度幾乎是負的。

上學期的 JS 都沒學好，一聽說要學 Vue，大家的內心自然是崩潰的。課程上來就是一段代碼：

let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

大家一開始的心聲就是這樣的：什麼？！這是什麼？誰看得懂！

並且不光是初學者，一些寫了一段時間 Vue 的人，懂得 el 是是什麼、data 是什麼，但可能也不清楚為什麼 Vue 要這麼來組織代碼——除非他學過 MVC。

1 一個 MVC 計數器

一個 MVC 模塊是三個對象的合體：M, V, C。

M，即為 Model，代表數據；
V，即為 View，代表視圖；
C，即為 Controller，代表控制（業務邏輯）。

嚴格來說……MCV 沒有嚴格來說，MVC 的定義並不明確，所以我以為 MVC 其實是一種思想方向，代表著視圖和業務邏輯互不幹擾。

還是那句話，放碼過來。我們先實現一個非常常見的例子：加按鈕與減按鈕。

普通版本 JS 計數器

<div id="app">
  <span>0</span>
  <button id="add">+</button>
  <button id="minus">-</button>
</div>

我們希望的結果是，當我們點擊 + 號時，<span> 中的數字就會 +1，點擊 - 號時，同理就會 -1。

我相信這種 JS 代碼應該是信手拈來的對吧。

const numberWrapper = document.querySelector('#app span');
const addBtn = document.querySelector('#add');
const minusBtn = document.querySelector('#minus');

addBtn.addEventListener('click', () => {
  const newNumber = parseInt(numberWrapper.innerText) + 1;
  numberWrapper.innerText = newNumber.toString();
});

minusBtn.addEventListener('click', () => {
  const newNumber = parseInt(numberWrapper.innerText) - 1;
  numberWrapper.innerText = newNumber.toString();
});

但這隻是普通版，接下來讓我們用 MVC 的方式來一步步的重構這個代碼。

MVC 版本 JS 計數器

首先我們想，這樣寫的一個計數器，如果需要修改，那我一方面要改 HTML 文件、一方面還要修改 JS 文件，何其麻煩！

寫到一起來吧：

const app = document.querySelector('#app');

const html = `
  <span>0</span>
  <button id="add">+</button>
  <button id="minus">-</button>
`;
const counter = document.createElement('div');
counter.innerHTML = html;
app.appendChild(counter);

那麼我們來梳理一下現在的代碼：

首先我們需要創建 HTML 元素；
然後通過 CSS 選擇器找到對應的 DOM 元素；
再對他們添加各種監聽事件與操作。

那我們可以大膽的猜測一下嘛，如何使用 MVC 思想呢？

首先新建一個對象叫做 view 吧，再將我們的 html 代碼放進去：

const view = {
  html: `
    <span>0</span>
    <button id="add">+</button>
    <button id="minus">-</button>
  `
};

還有我們用來新建 div、將 html 代碼放入 div、再將 div 放進 app 的操作，應該也是屬於視圖層。

所以我們給 view 對象添加一個 render 方法：

const view = {
  // ...html...
  render() {
    const counter = document.createElement('div');
    counter.innerHTML = view.html;
    app.appendChild(counter);
  }
};

view.render();

這樣我們就搞定了 V，然後看看 C。除了視圖和數據，其他的東西應該都屬於 C，所以 DOM 元素的獲取放在 C 里、事件綁定也放在 C 里。

const controller = {
  ui: {},
  bindEvents() {}
};

這裡我們準備將 DOM 元素放在 ui 對象里，但是這裡需要腦子轉一下。

一旦我們在這裡寫了 querySelector，那麼必然是找不到元素的，因為我們還沒有 render，根本沒有那些按鈕和數字。

所以我們得在裡面寫一個 init 函數，這樣我們執行初始化之後，他就會先去獲取 DOM、再去綁定事件：

init() {
  this.ui = {
    numberWrapper: document.querySelector('#app span'),
    addBtn: document.querySelector('#add'),
    minusBtn: document.querySelector('#minus')
  };
  controller.bindEvents();
},

綁定事件的寫法就非常簡單了：

bindEvents() {
  controller.ui.addBtn.addEventListener('click', () => {
    const newNumber = parseInt(controller.ui.numberWrapper.innerText) + 1;
    controller.ui.numberWrapper.innerText = newNumber.toString();
  });
  controller.ui.minusBtn.addEventListener('click', () => {
    const newNumber = parseInt(controller.ui.numberWrapper.innerText) - 1;
    controller.ui.numberWrapper.innerText = newNumber.toString();
  });
}

接下來就是一個轉折點了，我們要創建一個 model 對象來保存數據。

const model = {
  data: {
    number: 100
  }
};

這個時候不知道大家有沒有領悟到一些東西。

既然已經有了 model，我們何必還去操作 DOM 獲取數據呢？

直接操作 model 多優雅呀！

所以 bindEvents 可以改成這樣：

controller.ui.addBtn.addEventListener('click', () => {
  model.data.number += 1;
});
controller.ui.minusBtn.addEventListener('click', () => {
  model.data.number -= 1;
});

那我們的 view 對象也需要修改，他也應該從 model 中獲取數據：

const view = {
  html: `
    <span>{{number}}</span>
    ......
  `,
  render() {
    const counter = document.createElement('div');
    counter.innerHTML = view.html.replace('{{number}}', model.data.number);
    app.appendChild(counter);
  }
};

但是我們這樣操作雖然說修改了數據，可是並沒有重新渲染到頁面上呀。所以每次提交之後需要重新 render。

此時問題出現了：點擊 + 或者 - 後，數字只會變化一次，第二次點擊便毫無用處！

這是為什麼呢？

很簡單，因為我們重新 render，導致倆綁定了事件的 button 全都不是曾經的那個他了。

所以我們使用事件代理來解決這個問題——將事件綁定在外層的 div 上，然後判斷點擊對象的 id 即可。

寫法如下：

const compute = e => {
  switch (e.target.id) {
    case 'add':
      model.data.number += 1;
      break;
    case 'minus':
      model.data.number -= 1;
      break;
    default:
      return;
  }
  view.render();
};

接下來我們會在 view 對象中添加一個 el 屬性，用來存儲我們創建的外層 div。

const view = {
  el: null,
  // ......
  render() {
    if (!view.el) {
      // 創建 div，並將 div 賦值給 el
    } else {
      // 將 el 的 innerHTML 更換為新的內容
    }
  }
};

最後我們再進行一步優化。

我們本身不應該知道在 render 時，應該 append 給哪一個元素。這個元素應該是別人傳給我的，所以應該這麼寫：

總代碼：

MVC 之 V

const view = {
  el: null,
  html: `
    <span>{{n}}</span>
    <button id="add">+</button>
    <button id="minus">-</button>
  `,
  render(container) {
    if (!view.el) {
      const counter = document.createElement('div');
      view.el = counter;
      counter.innerHTML = view.html.replace(
        '{{n}}',
        model.data.number.toString()
      );
      container.appendChild(counter);
    } else {
      view.el.innerHTML = view.html.replace(
        '{{n}}',
        model.data.number.toString()
      );
    }
  }
};

MVC 之 M

const model = {
  data: {
    number: parseInt(window.localStorage.getItem('number')) || 0
  },
  save() {
    window.localStorage.setItem('number', model.data.number.toString());
  }
};

MVC 之 C

const controller = {
  init(container) {
    controller.ui = {
      container
    };
    view.render(container);
    controller.bindEvents();
  },
  bindEvents() {
    controller.ui.container.addEventListener('click', e => {
      switch (e.target.id) {
        case 'add':
          model.data.number += 1;
          break;
        case 'minus':
          model.data.number -= 1;
          break;
        default:
          return;
      }
      model.save();
      view.render();
    });
  }
};

使用方式：

const app = document.querySelector('#app');

controller.init(app);

這個時候我們的程式已經是一個比較完整的 MVC 模式了，但直接全部 render 非常浪費性能。

所以 React 之類的框架會使用虛擬 DOM 和 diff 演算法來只修改變化的 DOM。

總的來說，我們的 MVC 思想可以抽想成為一個公式：view = render(data)

使用 class 來優化代碼

class 優化代碼可以提升我們的代碼復用程度，銘記：程式員永遠不要重覆自己的操作。

先看看 Model：

class Model {
  constructor(options) {
    for (let key in options) {
      this[key] = options[key];
    }
  }

  save() {
    console.error('還未傳入save函數');
  }
}

export default Model;

這個非常簡單，我們想要傳入任何的東西，都在這個 option 裡面，就像這樣：

const model = new Model({
  data: {},
  save() {}
});

回想一下，我們使用 Vue 的時候，是不是也是如此？

export default new Vue({
  data() {
    return {
      msg: 'hello world'
    };
  },
  methods: {}
});

我沒讀過 Vue 的源碼，不知道 Vue 是否是按照本文的思路構建代碼的。

但是 Vue、React 等框架追根溯源都能找到 MVC 的身上。所以毫無疑問，MVC 的思想是每一個程式員都需要學習的一種設計模式。

初學程式，用了幾個好用的框架與工具，不應該只沉迷於其方便的一面，要善於從工具的運用中尋找出其作者留下的蛛絲馬跡，反推學習、多查資料，才能夠慢慢進化成為不懼怕新技術、框架越來越多的大神程式員！

工具也許會一個月一變、一天一變，但是思維是永恆的。

（完）