这里的MVC 是一种设计模式，它将应用划分为 3 个部分 ：
数据（model）、展现层（view）和用户交互层（control）。
相信大家都知道在不用任何库和框架写原生的前端代码的时候，很多大牛都提倡将HTML（结构层）、CSS（表现层）、JavaScript(交互层)分离开来，目的是更好的维护代码。虽然我们这里的MVC模式和上面的前端代码分层逻辑完全不一样，但是小编觉得其实从某种宏观的角度来它们的本质都是为了更好的维护代码(解耦、复用...)，让其他小伙伴更容易阅读。
1.从聊天的例子说起
这里我们举一个网页版的微信发消息的例子说起，当我们给别人发消息的时候到展示是这样的：
- 用户提交一条新的聊天消息（按下发送的那一刹那）
- 控制器(control)的事件处理器被触发
- 控制器(control)创建了一个新的聊天模型记录
- 然后控制器更新视图(聊天对话框)
- 用户在窗口就可以看到新的聊天消息
下面我们将上面的聊天例子简单的总结下就是这样的一个过程
- 用户和应用产生交互。
- 控制器的事件处理器被触发。
- 控制器从模型中请求数据，并将其交给视图。
- 视图将数据呈现给用户。
我们可以不用类库或者框架就可以实现这种MVC的架构模式，重点是需要将MVC的每一个部分按照职能划分清晰，使其保持良好的解耦。我们可以对每一个部分进行独立的开发、测试和维护
2、模型(model)
模型是用来存放所有应用数据的对象的。如当我们有一个User模型，用来存放用户的列表、他们的属性以及所有与模型有关的逻辑。当控制器(control)从服务器中抓取数据或创建新的记录时，它就会将数据包装成模型实例
模型不必知道视图和控制器的细节，模型只需要包含数据及直接和这些数据相关的逻辑，其他任何的事件处理代码、视图模板、以及和模型无关的逻辑都应该隔离在模型之外，将模型和视图代码混淆在一起是违反MVC的设计原则的。
3、视图
视图层是展示给用户的，用户可与之产生交互。在JavaScript应用中，视图大多由HTML、CSS、JavaScript模板组成。除了简单的条件语句外，视图不应当包含任何其他逻辑。
实际上，和模板类似，视图也可以从其他的应用中解耦出来。视图不必去知晓模型和控制器的所有细节，它们是相互独立的。
4、控制器
控制器作为模型和视图之间的纽带。
- 控制器从视图(view)中获得事件和输入，对其进行处理(这个过程很可能包含模型，取的数据在模型中封装)，并相应的取更新视图。
- 当页面加载的时候，控制器会给视图添加事件监听，如监听表单的提交、按钮的点击、移动端手势的滑动等。当用户和应用产生交互的时候，控制器中的事件触发器就开始工作了
5、结合
最后我们看上面描述的MVC模型图
MVC用户交互模型
参考链接：http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
《基于MVC的JavaScript webfu富应用开发》
网友评论