MVC 與 Vue

MVC 與 Vue

本文寫于 2020 年 7 月 27 日

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

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

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

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

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

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

由于我大學讀的并不是計算機專業，而是藝術類的數字媒體藝術專業。是以大家對于程式設計的熱情度幾乎是負的。

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

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

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

一個 MVC 子產品是三個對象的合體：M, V, C。

M，即為 Model，代表資料；

V，即為 View，代表視圖；

C，即為 Controller，代表控制（業務邏輯）。

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

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

我們希望的結果是，當我們點選 + 号時， 中的數字就會 +1，點選 - 号時，同理就會 -1。

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

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

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

寫到一起來吧：

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

首先我們需要建立 HTML 元素；

然後通過 CSS 選擇器找到對應的 DOM 元素；

再對他們添加各種監聽事件與操作。

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

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

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

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

這樣我們就搞定了 V，然後看看 C。除了視圖和資料，其他的東西應該都屬于 C，是以 DOM 元素的擷取放在 C 裡、事件綁定也放在 C 裡。

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

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

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

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

接下來就是一個轉折點了，我們要建立一個 model 對象來儲存資料。

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

既然已經有了 model，我們何必還去操作 DOM 擷取資料呢？

直接操作 model 多優雅呀！

是以 bindEvents 可以改成這樣：

那我們的 view 對象也需要修改，他也應該從 model 中擷取資料：

但是我們這樣操作雖然說修改了資料，可是并沒有重新渲染到頁面上呀。是以每次送出之後需要重新 render。

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

這是為什麼呢？

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

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

寫法如下：

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

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

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

總代碼：

MVC 之 V

MVC 之 M

MVC 之 C

使用方式：

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

是以 React 之類的架構會使用虛拟 DOM 和 diff 算法來隻修改變化的 DOM。

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

使用 class 來優化代碼

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

先看看 Model：

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

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

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

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

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

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

（完）