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
更多相關文章
  • 原帖地址: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的使用 什麼是Template? Spring框架對JDBC的簡單封裝。提供了一個JDBCTemplate對象簡化JDBC的開發 Template使用步驟 導入jar包 創建JdbcTemplate對象。依賴於數據源DataSource * JdbcTemplat ...
  • java JDBC資料庫連接池技術 為什麼使用資料庫連接池? 這個原因與為什麼使用線程池有點相似,都是為了提高資源的利用率,減少申請時間的浪費,提高程式的運行效率。 資料庫連接池的基本思想就是為資料庫連接建立一個“緩衝池”。預先在緩衝池中放入一定數量的連接,當需要建立數 據庫連接時,只需從“緩衝池” ...
  • 一、 體驗生命周期 xml中TextView用於顯示一行文字 載入佈局的函數setContentView() 代碼requestWindowFeature(Window.FEATURE_NO_TITLE)用於將活動的標題隱藏。 建立layout.xml,然後註冊到一個新建的活動類中,最後還得把活動類 ...
  • 最近有個需求,要實現列表的itemView拖拽後,交換位置。網上搜索了一番,發現RecyclerView來實現此方案很容易,RecyclerView的預設幾個api很強大,只需幾行代碼就可以實現簡單的拖拽需求。 有一篇文章值得推薦給大家,RecyclerView 擴展(二) - 手把手教你認識Ite ...
  • 現在的社交類App,聊天都是標配,此外在聊天的基礎上還衍生出了很多功能,如表情包,背景,氣泡等。 某一天測試給我提了一個bug,說,軟鍵盤彈起收攏的時候聊天背景圖會抖動。要解決下。我很納悶,這塊用的不是ImageView來實現的麽,Android的效果是咋樣,就是咋樣啊。我咋知道怎麼改呢? 向測試小 ...
  • WEB開發約定 文件命名 【√】小寫的英文字母、數字和下劃線的組合 【!】不得含漢字、空格和特殊字元 命名規範好處 ①方便團隊理解代碼開發的文件含義 ②使用“按名稱排例”的命令時,同類文件能夠排列在一起 以便查找、修改、替換、計算負載量等操作 (一)HTML的命名原則 |文件類型 |命名舉例(小寫) ...
  • 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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...