从MVC说起
任何模式的发明，都是由于人们疲倦与对相同过程的重复思考。大抵类似于，你愿意经历一次计算324x432=？这样的问题，但是如果让你计算一百遍，或者出一百道类似的题，你就会十分的厌倦。
朴素直接的做法
一开始，如果我们想要将数组以列表的形式展示在页面上，我们是这样做的:
<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;
这时候的思路是：
遍历数据-> 拼装html(渲染)->插入到页面上
然而，事情总不会那么简单美好，我们希望当用户点击【加载更多】的时候，能够用ajax获取到更多的数据，然后展示出来，于是变成了这样：
var dom = document.querySelector('#list');
var more = document.querySelector('#more');
more.addEventListener('click', function(e){
// 加载数据 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;
遍历数据-> 渲染->插入到页面上->更新数据->遍历数据->渲染->插入到页面上
可能大家已经觉得讨厌了，似乎把一件类似的事情又做了一遍。。。
而且，如果再加上删除按钮，排序按钮，批量选择。。。已经不想做了
怎么能够这样呢，凡是重复的事情一定可以自动化。。。恩
改造一下,把中间的渲染dom的操作给抽成一个函数
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)
})
后面的工作中就变得简单了，我们不再关心，【数据】是怎么转换成【视图】，只需要关心，数据的变化，然后render
更新数据->render
到这里已经初具MVC的思想 ，建立M(模型)->V(视图)的映射，然后通过C(控制器)改变更新M，达到最后视图上的更新
简单的MVC框架
上一次任务完成后，我们发现如果下一次任务稍微发生一些变化，我们就要重新写一个render函数。如果每一个与数据有关的dom，我们都去专门建立一个MVC是令人讨厌的。
可不可以有一种通用的建立映射的方式呢？
