|
本文寫于 2020 年 7 月 27 日 首先有個問題：Vue 是 MVC 還是 MVVM 框架？ 維基百科告訴我們：MVVM 是 PM 的變種，而 PM 又是 MVC 的變種。 所以一定程度上來說，不管 Vue 是 MVC 還是 MVVM 或者都不是，它的思想方向與這些設計模式的方向是大體相同的。 并且 Vue 的官網(wǎng)中也說道：“雖然沒有完全遵循 MVVM 模型，但是 Vue 的設計也受到了它的啟發(fā)?！?/p> 這個問題網(wǎng)上吵得比較多，本文并不是來討論這個問題的，而是面是向初學者淺淺的分析一下老大哥 MVC 的思想在 Vue 中的體現(xiàn)。 0 新手的困惑大學時候專業(yè)里前后開了幾門網(wǎng)頁課，先是教授 HTML、CCC；后來一門課教了 JS；最后有一門教授 Vue 的課。 由于我大學讀的并不是計算機專業(yè)，而是藝術類的數(shù)字媒體藝術專業(yè)。所以大家對于編程的熱情度幾乎是負的。 上學期的 JS 都沒學好，一聽說要學 Vue，大家的內心自然是崩潰的。課程上來就是一段代碼： let app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});大家一開始的心聲就是這樣的：什么？！這是什么？誰看得懂！ 并且不光是初學者，一些寫了一段時間 Vue 的人，懂得 el 是是什么、data 是什么，但可能也不清楚為什么 Vue 要這么來組織代碼——除非他學過 MVC。 1 一個 MVC 計數(shù)器一個 MVC 模塊是三個對象的合體：M, V, C。
嚴格來說……MCV 沒有嚴格來說，MVC 的定義并不明確，所以我以為 MVC 其實是一種思想方向，代表著視圖和業(yè)務邏輯互不干擾。 還是那句話，放碼過來。我們先實現(xiàn)一個非常常見的例子：加按鈕與減按鈕。 普通版本 JS 計數(shù)器<div id="app"> <span>0</span> <button id="add">+</button> <button id="minus">-</button> </div> 我們希望的結果是，當我們點擊 + 號時， 我相信這種 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 計數(shù)器首先我們想，這樣寫的一個計數(shù)器，如果需要修改，那我一方面要改 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);那么我們來梳理一下現(xiàn)在的代碼：
那我們可以大膽的猜測一下嘛，如何使用 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。除了視圖和數(shù)據(jù)，其他的東西應該都屬于 C，所以 DOM 元素的獲取放在 C 里、事件綁定也放在 C 里。 const controller = {
ui: {},
bindEvents() {}
};這里我們準備將 DOM 元素放在 ui 對象里，但是這里需要腦子轉一下。 一旦我們在這里寫了 所以我們得在里面寫一個 init 函數(shù)，這樣我們執(zhí)行初始化之后，他就會先去獲取 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();
});
}接下來就是一個轉折點了，我們要創(chuàng)建一個 model 對象來保存數(shù)據(jù)。 const model = {
data: {
number: 100
}
};這個時候不知道大家有沒有領悟到一些東西。 既然已經(jīng)有了 model，我們何必還去操作 DOM 獲取數(shù)據(jù)呢？ 直接操作 model 多優(yōu)雅呀！ 所以 bindEvents 可以改成這樣： controller.ui.addBtn.addEventListener('click', () => {
model.data.number += 1;
});
controller.ui.minusBtn.addEventListener('click', () => {
model.data.number -= 1;
});那我們的 view 對象也需要修改，他也應該從 model 中獲取數(shù)據(jù)： const view = {
html: `
<span>{{number}}</span>
......
`,
render() {
const counter = document.createElement('div');
counter.innerHTML = view.html.replace('{{number}}', model.data.number);
app.appendChild(counter);
}
};但是我們這樣操作雖然說修改了數(shù)據(jù)，可是并沒有重新渲染到頁面上呀。所以每次提交之后需要重新 render。 此時問題出現(xiàn)了：點擊 + 或者 - 后，數(shù)字只會變化一次，第二次點擊便毫無用處！ 這是為什么呢？ 很簡單，因為我們重新 render，導致倆綁定了事件的 button 全都不是曾經(jīng)的那個他了。 所以我們使用事件代理來解決這個問題——將事件綁定在外層的 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 屬性，用來存儲我們創(chuàng)建的外層 div。 const view = {
el: null,
// ......
render() {
if (!view.el) {
// 創(chuàng)建 div，并將 div 賦值給 el
} else {
// 將 el 的 innerHTML 更換為新的內容
}
}
};最后我們再進行一步優(yōu)化。 我們本身不應該知道在 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);這個時候我們的程序已經(jīng)是一個比較完整的 MVC 模式了，但直接全部 render 非常浪費性能。 所以 React 之類的框架會使用虛擬 DOM 和 diff 算法來只修改變化的 DOM。 總的來說，我們的 MVC 思想可以抽想成為一個公式： 使用 class 來優(yōu)化代碼 class 優(yōu)化代碼可以提升我們的代碼復用程度，銘記：程序員永遠不要重復自己的操作。 先看看 Model： class Model {
constructor(options) {
for (let key in options) {
this[key] = options[key];
}
}
save() {
console.error('還未傳入save函數(shù)');
}
}
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 的思想是每一個程序員都需要學習的一種設計模式。 初學程序，用了幾個好用的框架與工具，不應該只沉迷于其方便的一面，要善于從工具的運用中尋找出其作者留下的蛛絲馬跡，反推學習、多查資料，才能夠慢慢進化成為不懼怕新技術、框架越來越多的大神程序員！ 工具也許會一個月一變、一天一變，但是思維是永恒的。 （完） |
|
|
