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
  • .net 6 C#中System.IO.Path類的用法
    1. 說明 /* Performs operations on System.String instances that contain file or directory path information. These operations are performed in a cross-pla ...
  • 使用WebApi+Vue3從0到1搭建《許可權管理系統》:二、搭建JWT系統鑒權
    視頻地址：【WebApi+Vue3從0到1搭建《許可權管理系統》系列視頻：搭建JWT系統鑒權-嗶哩嗶哩】 https://b23.tv/R6cOcDO qq群:801913255 一、在appsettings.json中設置鑒權屬性 /*jwt鑒權*/ "JwtSetting": { "Issuer" ...
  • 實戰指南：使用 xUnit 和 ASP.NET Core 進行集成測試【完整教程】
    引言 集成測試可在包含應用支持基礎結構（如資料庫、文件系統和網路）的級別上確保應用組件功能正常。 ASP.NET Core 通過將單元測試框架與測試 Web 主機和記憶體中測試伺服器結合使用來支持集成測試。 簡介 集成測試與單元測試相比，能夠在更廣泛的級別上評估應用的組件，確認多個組件一起工作以生成預 ...
  • .NET Emit 入門教程：第六部分：IL 指令：9：詳解 ILGenerator 指令方法：運算操作指令（指令篇結束）
    在.NET Emit編程中，我們探討了運算操作指令的重要性和應用。這些指令包括各種數學運算、位操作和比較操作，能夠在動態生成的代碼中實現對數據的處理和操作。通過這些指令，開發人員可以靈活地進行算術運算、邏輯運算和比較操作，從而實現各種複雜的演算法和邏輯......本篇之後，將進入第七部分：實戰項目 ...
  • WPF多表頭表格實現
    前言 多表頭表格是一個常見的業務需求，然而WPF中卻沒有預設實現這個功能，得益於WPF強大的控制項模板設計，我們可以通過修改控制項模板的方式自己實現它。 一、需求分析 下圖為一個典型的統計表格，統計1-12月的數據。 此時我們有一個需求，需要將月份按季度劃分，以便能夠直觀地看到季度統計數據，以下為該需求 ...
  • gRPC入門學習之旅（七）
    如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目 在當下這個年代 SPA 已是主流，人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面，比如追求首屏載入速度的時候。最近在項目中回歸傳統效果還是不錯。 有的時候我們希望將 ...
  • System.AggregateException: 發生一個或多個錯誤.....
    System.AggregateException: 發生一個或多個錯誤。 > Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失敗。檢查輸出視窗瞭解更多詳細信息。 內部異常堆棧跟蹤的結尾 > (內部異常 #0) Microsoft ...
  • 精通中間件測試：Asp.Net Core實戰指南，提升應用穩定性和可靠性
    引言 在上一章節我們實戰了在Asp.Net Core中的項目實戰，這一章節講解一下如何測試Asp.Net Core的中間件。 TestServer 還記得我們在集成測試中提供的TestServer嗎？ TestServer 是由 Microsoft.AspNetCore.TestHost 包提供的。 ...
  • Case表達式
    在發現結果為真的WHEN子句時,CASE表達式的真假值判斷會終止,剩餘的WHEN子句會被忽略: CASE WHEN col_1 IN ('a', 'b') THEN '第一' WHEN col_1 IN ('a') THEN '第二' ELSE '其他' END 註意: 統一各分支返回的數據類型. ...
  • 揭秘：C#語法中“_ =” 是什麼？
    在C#編程世界中，語法的精妙之處往往體現在那些看似微小卻極具影響力的符號與結構之中。其中，“_ =” 這一組合突然出現還真不知道什麼意思。本文將深入剖析“_ =” 的含義、工作原理及其在實際編程中的廣泛應用，揭示其作為C#語法奇兵的重要角色。 一、下劃線 _：神秘的棄元符號 下劃線 _ 在C#中並非 ...
所有分類