MVC 與 Vue

来源:https://www.cnblogs.com/xhyccc/archive/2020/07/28/13391487.html
-Advertisement-
Play Games

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);

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

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

那我們可以大膽的猜測一下嘛，如何使用 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 的思想是每一個程式員都需要學習的一種設計模式。

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

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

（完）


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [轉貼]SQLSERVER的相容級別
    原帖地址：https://www.cnblogs.com/jinanxiaolaohu/p/10030021.html ALTER DATABASE (Transact-SQL) 相容級別 https://docs.microsoft.com/zh-cn/sql/t-sql/statements/a ...
  • JAVA JDBC Template的使用
    JAVA JDBC Template的使用 什麼是Template？ Spring框架對JDBC的簡單封裝。提供了一個JDBCTemplate對象簡化JDBC的開發 Template使用步驟 導入jar包 創建JdbcTemplate對象。依賴於數據源DataSource * JdbcTemplat ...
  • java JDBC資料庫連接池技術（Druid ，c3p0）
    java JDBC資料庫連接池技術 為什麼使用資料庫連接池? 這個原因與為什麼使用線程池有點相似，都是為了提高資源的利用率，減少申請時間的浪費，提高程式的運行效率。 資料庫連接池的基本思想就是為資料庫連接建立一個“緩衝池”。預先在緩衝池中放入一定數量的連接，當需要建立數 據庫連接時，只需從“緩衝池” ...
  • Android連載28-複習以往內容（六）
    一、 體驗生命周期 xml中TextView用於顯示一行文字 載入佈局的函數setContentView() 代碼requestWindowFeature(Window.FEATURE_NO_TITLE)用於將活動的標題隱藏。 建立layout.xml，然後註冊到一個新建的活動類中，最後還得把活動類 ...
  • RecyclerView拖拽view後，itemView發生交換的規則重寫
    最近有個需求，要實現列表的itemView拖拽後，交換位置。網上搜索了一番，發現RecyclerView來實現此方案很容易，RecyclerView的預設幾個api很強大，只需幾行代碼就可以實現簡單的拖拽需求。 有一篇文章值得推薦給大家，RecyclerView 擴展(二) - 手把手教你認識Ite ...
  • Android聊天背景圖所碰到的問題總結
    現在的社交類App，聊天都是標配，此外在聊天的基礎上還衍生出了很多功能，如表情包，背景，氣泡等。 某一天測試給我提了一個bug，說，軟鍵盤彈起收攏的時候聊天背景圖會抖動。要解決下。我很納悶，這塊用的不是ImageView來實現的麽，Android的效果是咋樣，就是咋樣啊。我咋知道怎麼改呢？ 向測試小 ...
  • WEB文件命名規範
    WEB開發約定 文件命名 【√】小寫的英文字母、數字和下劃線的組合 【！】不得含漢字、空格和特殊字元 命名規範好處 ①方便團隊理解代碼開發的文件含義 ②使用“按名稱排例”的命令時，同類文件能夠排列在一起 以便查找、修改、替換、計算負載量等操作 （一）HTML的命名原則 |文件類型 |命名舉例（小寫） ...
  • jQuery數組的操作
    jQuery操作數組主要有兩種方式： 普通數組 $.each(array,function(k,v){ //... }); 關聯數組，{"id":10,"name":"tom"} 索引數組，[1,2,3,4,5,6,7,8,9] k:如果是關聯是鍵名，如果是索引是下標（從0開始; vo:是元素值; ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類