web前端开发的MVC与MVP初探

什么是MVC？

在WEB开发中，常常会听到“MVC”这个词，这到底是什么意思呢？其实MVC指的就是一种软件设计模式（或者说架构）。这种设计模式的思想是将软件划分为3个模块：视图（View）、控制器（Controller）、模型（Model）。每个模块完成相关的功能。

为什么使用MVC？

当一个WEB应用的规模越来越大时，会发现一个问题：要去维护它会非常的麻烦。这是一件让程序员很头疼的事情。采用MVC模式的目的就是为了解决这个问题。

MVC中各部分通信

1. View发送指令给Controller
2. Controller完成业务逻辑后，要求Model改变状态
3. Model更新数据完成后，要求View更新视图，用户得到反馈

MVP中各部分通信

MVP中只是将C换成了（Presenter）

1. 各部分之间的通信，都是双向的
2. View 与 Model 不发生联系，都通过 Presenter 传递
3. View 非常薄，不部署任何业务逻辑，称为”被动视图”（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里

什么是M、V、C？

对于初学者来说，M、V、C这3个概念听起来会有点抽象。那我们举个例子来解释。比如说我们要写一个公司成员管理系统，其中有一个显示公司员工的页面，页面上有个导航栏，导航栏上有3个按钮A、B、C，点击这几个按钮分别A、B、C三个小组的成员列表。对于这个页面来说，这个页面的html文件和css文件就构成了视图层（V）。对于这个页面涉及的信息–员工信息，我们可以包装成一个类，取名叫Employee。其中保存员工的相关信息（名字、工号等）。这个类还有一些方法，比如将其所保存的信息保存到数据库（增加一条员工信息）以及从数据库获取相关信息并包装成对应的对象employee1、emplyee2……那么这个Employee以及其他一些保存系统相关信息的类就构成了模型（M）。 控制器是模型和视图之间的纽带。控制器从视图获取事件和输入，对它们（很可能包含模型）进行处理，并相应地更新视图。再拿这个例子来说，要用一个监听器监听A、B、C这3个按钮的点击事件，然后监听器判断是哪个按钮被点击，再判断当前是否处于该按钮已经被点击的状态，如果同一按钮被重复点击，那么就向Employee请求信息，将得到的员工信息填入html页面中。
其实这个例子应该属于MVP模式，只是因为MVC更耳熟，便这样叫了，方便理解。

小结

学习前端开发快半年了，想养成一个写博客记录心得的习惯，就从这篇开始吧。