title: 實踐出真知：MVC和MVVM
date: 2018-04-13 08:40:02
tags: mvc mvvm 數據驅動
categories: web
---

理論來自於實踐，並指導於實踐 - 佚名

我相信在MVC等理論形成之前，就已經有人在付諸MVC的實踐。只是後來有人總結下來，並指導人們做軟件開發。這種設計典範並不是只有後臺的代碼才有，前端也可以有很好的框架，像react和vue。

為什麽這麽強調實踐。因為在我學習MVC理論的時候，我是蒙蔽的。雖然看了很多優秀的文檔，比如，阮大神的MVC，MVP 和 MVVM 的圖示

看了之後挺有感覺，興沖沖寫代碼的時候，又感覺不知所措。不知從何下手，不知如何劃分。
最近在用react，又幫別人寫了一個jquery代碼，現在將這種套路試著總結一下。

需求

從後臺獲取數據，渲染一個簡單的列表，實現列表的增刪改查
類似於這種
{% asset_img demo1.png %}

之前的套路 jquery

這是之前寫代碼的套路：

1. 頁面初始渲染時，從後臺獲取數據（一個數組）
2. 將數據使用 字符串拼接 或者 前端模板 將數據渲染到頁面中
3. 給渲染的列表綁定增刪改查的事件
4. 拿一個刪除舉例，點擊刪除按鈕，獲取當前行數據的id值，發送ajax請求，根據id在後臺數據庫中刪除，返回成功碼，前端將當前行使用DOM方法刪除
5. 其他的事件也是類似，在ajax的成功回調中進行dom的操作，畢竟jquery是DOM操作神器，操作起來都感覺6的飛起

使用react實現

1. 在組件中定義state.arr
   將即將要渲染的數據保存在其中
2. 寫html模板
3. 請求數據，setState數據值，數據改變，頁面自動刷新

4. 接著拿刪除舉例，點擊刪除按鈕，獲取當前行數據的id值，發送ajax請求，在成功的回調中，使用

   let a = this.state.arr.filter(item => item.id !== id);
   this.setState({
   arr: a
   })

   數據改變，視圖又自動刷新

5. 其他事件也是類似，從始至終都沒有再操作過dom，只是各種使用setState方法，來維護要展示的數據

這種方法肯定就是著名的MVC模式了。和第一種比起來，就發現這種好處是什麽。我們只專心的操作數據，維護狀態，從沒有去操作過dom。
讓我們精力更集中。

適時放一張圖來感受一下。

{% asset_img mvc1.png %}

看著上圖來念一遍：數據改變 -> 視圖刷新 -> 事件修改數據（controller）-> 數據改變再次渲染視圖。

抄一段阮一峰大神博客的原文

View 傳送指令到 Controller
Controller 完成業務邏輯後，要求 Model 改變狀態
Model 將新的數據發送到 View，用戶得到反饋

TIPS:因為jquery是操作dom神器。使用react和vue都不建議直接操作dom，所以用框架的話還是早是日脫離jquery

如果感覺不強烈，可以畫一張示意圖來看一下，第一種方法的流程是什麽樣的。

{% asset_img mvc2.png %}

獲取數據後 -> 渲染了一次視圖 -> 監聽事件完成後臺交互 -> 又雙叕粗暴的改變了視圖

根據這種思想改造一下第一種方法 jquery

我們要維護一個狀態數組，數組改變後，就去刷新視圖，監聽事件，改變狀態

準備工作：
因為jquery不會自動刷新視圖，還是需要寫一個render方法來渲染視圖，這個方法在初次渲染數據和修改數據後改變都要執行的。

var arr = []; // 要維護的數據

function render(arr) {
    // 渲染 arr
    
    bindEvent();
}

function bindEvent() {
    // 綁定各種事件 
}

這樣重構完，再來結合圖看一次。

{% asset_img mvc3.png %}

點擊查看代碼示例

點擊查看源碼

接下來對比一下 mvc 和 mvvm

上面實現了簡陋的mvc。會發現，不管arr狀態有個風吹草動，整個列表都會重新調用渲染方法。react和vue內置了各種diff算法，避免了這個尷尬。

未完待續。。。

實踐出真知：MVC和MVVM