写给读者的话
本人是千千万万前端小白中的一员，所以对前端小白的痛苦感同身受，面对一个新的知识点，很多时候感到束手无策。网上搜资料，有的不全，有的看不懂，所以本人作为小白，很有义务将自己觉得理解了的知识点尽可能的解释的通熟易懂，恨不得一个字一个字的解释。但是别人的终究是别人的，把它变成自己的才是正道，希望此文能帮助像我一样的人更好的理解mvc，一起加油吧
先上demo代码，下面有详尽分析
index.js
function Event(sender) {
this._sender = sender;
this._listeners = [];
}
Event.prototype = {
constructor : Event,
attach: function (listener) {
this._listeners.push(listener);
},
notify: function (args) {
var index;
for (index = 0; index < this._listeners.length; index += 1) {
this._listeners[index](this._sender, args);
}
}
};
function ListModel(items) {
this._items = items;
this._selectedIndex = -1;
this.itemAdded = new Event(this);
this.itemRemoved = new Event(this);
this.selectedIndexChanged = new Event(this);
}
ListModel.prototype = {
constructor : ListModel,
getItems: function () {
return [].concat(this._items);
},
addItem: function (item) {
this._items.push(item);
this.itemAdded.notify({
item: item
});
},
removeItemAt: function (index) {
var item;
item = this._items[index];
this._items.splice(index, 1);
this.itemRemoved.notify({
item: item
});
if (index === this._selectedIndex) {
this.setSelectedIndex(-1);
}
},
getSelectedIndex: function () {
return this._selectedIndex;
},
setSelectedIndex: function (index) {
var previousIndex;
previousIndex = this._selectedIndex;
this._selectedIndex = index;
this.selectedIndexChanged.notify({
previous: previousIndex
});
}
};
function ListView(model, elements) {
this._model = model;
this._elements = elements;
this.listModified = new Event(this);
this.addButtonClicked = new Event(this);
this.delButtonClicked = new Event(this);
var _this = this;
// attach model listeners
this._model.itemAdded.attach(function () {
_this.rebuildList();
});
this._model.itemRemoved.attach(function () {
_this.rebuildList();
});
// attach listeners to HTML controls
this._elements.list.change(function (e) {
_this.listModified.notify({
index: e.target.selectedIndex
});
});
this._elements.addButton.click(function () {
_this.addButtonClicked.notify();
});
this._elements.delButton.click(function () {
_this.delButtonClicked.notify();
});
}
ListView.prototype = {
constructor : ListView,
show: function () {
this.rebuildList();
},
rebuildList: function () {
var list, items, key;
list = this._elements.list;
list.html('');
items = this._model.getItems();
for (key in items) {
if (items.hasOwnProperty(key)) {
list.append($('<option>' + items[key] + '</option>'));
}
}
this._model.setSelectedIndex(-1);
}
};
function ListController(model, view) {
this._model = model;
this._view = view;
var _this = this;
this._view.listModified.attach(function (sender, args) {
_this.updateSelected(args.index);
});
this._view.addButtonClicked.attach(function () {
_this.addItem();
});
this._view.delButtonClicked.attach(function () {
_this.delItem();
});
}
ListController.prototype = {
constructor : ListController,
addItem: function () {
var item = window.prompt('Add item:', '');
if (item) {
this._model.addItem(item);
}
},
delItem: function () {
var index;
index = this._model.getSelectedIndex();
if (index !== -1) {
this._model.removeItemAt(this._model.getSelectedIndex());
}
},
updateSelected: function (index) {
this._model.setSelectedIndex(index);
}
};
$(function () {
var model = new ListModel(['PHP', 'JavaScript']),
view = new ListView(model, {
'list': $('#list'),
'addButton': $('#plusBtn'),
'delButton': $('#minusBtn')
}),
controller = new ListController(model, view);
view.show();
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MVC</title>
</head>
<body>
<select id="list" size="10" style="width: 10rem"></select><br/>
<button id="plusBtn"> + </button>
<button id="minusBtn"> - </button>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script src="index.js"></script>
</html>
MVC模式说明：
- model层和view层都继承了观察者类，观察者类中包含订阅和发布方法
- model层定义了底层操作，包括对数据的增删改查
- view层绑定了增删改事件，一旦所绑定的事件发生，就调用观察者类中的发布方法发布消息；同时又订阅了model层数据的变动，一旦所订阅的model层的数据发生变化，就调用view层自身方法更新数据显示
- controller层订阅了view层的增删改事件，一旦所订阅的事件发布了，就调用自身的方法经过业务逻辑的处理，调用相应的model层的方法
针对代码做具体分析：
见下图：
首先页面加载执行初始化代码，执行完成后页面上会有一个列表，里面包含两个选项：PHP和Javascript，然后底下有"+"和"-"两个按钮，以点击"+"为例，流程分析开始：
- 首先定义了一个观察者Event构造函数
- view层中绑定了增删改事件，同时订阅了model层数据改动事件;
- 我们点击"+"号按钮，触发了view层中的addButton的click事件，然后addButtonClicked调用观察者构造函数的发布方法notify()发布消息，代码如下：
this._elements.addButton.click(function () {
_this.addButtonClicked.notify();
});
4.由于在controller层中订阅了view层的addButtonClicked发布的消息，将addItem()保存在其对应的listener数组中，所以此时执行_this.addItem()，代码如下：
this._view.addButtonClicked.attach(function () {
_this.addItem();
});
5.在controller层中的addItem()方法中，如果有item输入，就调用model层中的addItem(item)并传入item，代码如下：
addItem: function () {
var item = window.prompt('Add item:', '');
if (item) {
this._model.addItem(item);
}
}
6.在model层中的itemAdd()方法中，获取到controller层中传过来的item之后，将其保存到this.item数组中，然后model层中的item调用notify()发布消息，代码如下：
addItem: function (item) {
this._items.push(item);
this.itemAdded.notify({
item: item
});
}
7.由于在view层中订阅了model层的itemAdd发布的消息，将rebuildList()保存在其对应的listener数组中，所以此时执行_this.rebuildList()，代码如下：
this._model.itemAdded.attach(function () {
_this.rebuildList();
});
8.view层中的rebuildList()干的事情就是每次都先清空列表内容，然后重新获取内容，再循环添加到列表中，最后调用model层中的setSelectedIndex(-1)把选中项的index还原为-1，代码如下：
rebuildList: function () {
var list, items, key;
list = this._elements.list;
list.html('');
items = this._model.getItems();
for (key in items) {
if (items.hasOwnProperty(key)) {
list.append($('<option>' + items[key] + '</option>'));
}
}
this._model.setSelectedIndex(-1);
}
9.model层中的setSelectedIndex()干的事情就是把上一次的选中项的index和当前选中项的index进行交换，然后model层中的selectedIndexChanged调用notify()发布消息，代码如下：
setSelectedIndex: function (index) {
var previousIndex;
previousIndex = this._selectedIndex;
this._selectedIndex = index;
this.selectedIndexChanged.notify({
previous: previousIndex
});
}
10.你会发现view层中没有对selectedIndexChanged的订阅，那写起来干嘛呢？就是留着以后进行扩展用的，你可以继续按照这个模式写下去
MVC的优点：
- 耦合性低：视图层和业务层分离了，如果页面上显示改变的话，直接在视图层更改即可，不用动模型层和控制层上的代码;也就是视图层 与 模型层和控制层
已经分离了;所以很容易改变应用层的数据层和业务规则。
- 可维护性：分离视图层和业务逻辑层也使得WEB应用更易于维护和修改。
MVC的缺点：
个人觉得适合于大型项目，对于中小型项目并不适合，因为要实现一个简单的增删改操作，只需要一点点JS代码，但是MVC模式代码量明显增加了。
希望此文对你有帮助，如有疑问和错误，请告诉我，谢谢！
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。