從MVC說起
任何模式的發(fā)明，都是由于人們疲倦與對相同過程的重復(fù)思考。大抵類似于，你愿意經(jīng)歷一次計算324x432=？這樣的問題，但是如果讓你計算一百遍，或者出一百道類似的題，你就會十分的厭倦。
樸素直接的做法
一開始，如果我們想要將數(shù)組以列表的形式展示在頁面上，我們是這樣做的:
<ul id="list"></ul>
<button id="more">加載更多</button>
var dom = document.querySelector('#list');
var data = ['apple', 'pen', 'chestnut'];
var html = data.map(item => {
return `<li>${item}</li>`
}).join('')
dom.innerHTML = html;
這時候的思路是：
遍歷數(shù)據(jù)-> 拼裝html(渲染)->插入到頁面上
然而，事情總不會那么簡單美好，我們希望當(dāng)用戶點擊【加載更多】的時候，能夠用ajax獲取到更多的數(shù)據(jù)，然后展示出來，于是變成了這樣：
var dom = document.querySelector('#list');
var more = document.querySelector('#more');
more.addEventListener('click', function(e){
// 加載數(shù)據(jù) blablabla
// 得到ajaxdata = ['pear', 'banana', 'peach']
var ajaxdata = ['pear', 'banana', 'peach'];
var moreHtml = ajaxdata.map(item => {
return `<li>${item}</li>`;
})
dom.innerHTML += moreHtml;
});
var data = ['apple', 'pen', 'chestnut'];
var html = data.map(item => {
return `<li>${item}</li>`
}).join('')
dom.innerHTML = html;
遍歷數(shù)據(jù)-> 渲染->插入到頁面上->更新數(shù)據(jù)->遍歷數(shù)據(jù)->渲染->插入到頁面上
可能大家已經(jīng)覺得討厭了，似乎把一件類似的事情又做了一遍。。。
而且，如果再加上刪除按鈕，排序按鈕，批量選擇。。。已經(jīng)不想做了
怎么能夠這樣呢，凡是重復(fù)的事情一定可以自動化。。。恩
改造一下,把中間的渲染dom的操作給抽成一個函數(shù)
function render(data, dom) {
var html = data.map(item => {
return `<li>${item}</li>`
}).join('')
dom.innerHTML = html
}
var dom = document.querySelector('#list');
var more = document.querySelector('#more');
var data = ['apple', 'pen', 'chestnut'];
render(data, dom);
more.addEventListener('click', function() {
var ajaxData = ['pear', 'banana', 'peach'];
var newData = data.concat(ajaxData);
render(newData, html)
})
后面的工作中就變得簡單了，我們不再關(guān)心，【數(shù)據(jù)】是怎么轉(zhuǎn)換成【視圖】，只需要關(guān)心，數(shù)據(jù)的變化，然后render
更新數(shù)據(jù)->render
??到這里已經(jīng)初具M(jìn)VC的思想 ，建立M(模型)->V(視圖)的映射，然后通過C(控制器)改變更新M，達(dá)到最后視圖上的更新
簡單的MVC框架
??上一次任務(wù)完成后，我們發(fā)現(xiàn)如果下一次任務(wù)稍微發(fā)生一些變化，我們就要重新寫一個render函數(shù)。如果每一個與數(shù)據(jù)有關(guān)的dom，我們都去專門建立一個MVC是令人討厭的。
??可不可以有一種通用的建立映射的方式呢？
