MVC 與 Vue

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

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 的思想是每一個程式員都需要學習的一種設計模式。

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

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

(完)


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

更多相關文章
  • 原帖地址: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:是元素值; ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...