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);
那么我們來梳理一下現在的代碼：
- 首先我們需要創建 HTML 元素；
- 然后通過 CSS 選擇器找到對應的 DOM 元素；
- 再對他們添加各種監聽事件與操作，
那我們可以大膽的猜測一下嘛，如何使用 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.uj5u.com/qiye/25022.html
標籤：JavaScript
上一篇：父組件監聽子組件的生命周期
下一篇：JavaScript基礎-01