MVC架构模式理解

MVC架构模式理解

好的MVC架构,能实现View与Model层的分离、可替代。拥有条理、逻辑清晰的代码结构。前端

简介与架构理念

MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计建立 Web 应用程序的模式。使用MVC的目的是 将M和V的实现代码分离,从而使同一个程序能够使用不一样的表现形式

核心理念:分离bash

前端领域的理解

当理解MVC的三个组成部分时,只有抓住核心理念,才能深入的理解其中的含义,并实际应用。架构

View

view层的主要做用是:实现DOM元素与Controller之间的 “绑定”函数

所以view的主要内容则是:设计

  • 事件绑定Controller方法
  • 方法绑定Controller方法
document.getElementId('id').addEventListener('eventName',controller);
document.getElementId('id').innerText = Controller.getModelByKey('text');

Model

Model层的主要做用是:保证数据的 “纯净” 存储。code

若是你之前对Ajax数据请求属于哪部分有疑问,那么从纯净角度来看,它并不该该属于Model部分。事件

Controller

Controller层的主要做用是:“联接” View层与Model层。get

所以Controller的主要内容则是:架构模式

  • View的事件绑定函数
  • Model的数据的获取、处理函数

要作好MVC架构,必定要把握好各个层的侧重方向,划分好功能区域,保证功能区的分离event