一、 MVC模式
MVC是模型(Model)－视图(view)－控制器(controller)的缩写，它能将对象、显示、控制分离以提高软件的的灵活性和复用性，以使得程序具有对象化的特征，也更容易维护。
模型层（Model）：指从现实世界中抽象出来的对象模型，是应用程序中用于处理应用程序数据逻辑的部分，通常用作数据处理。在MVC的三个部件中，模型拥有最多的处理任务。被模型返回的数据是中立的，模型与数据格式无关，这样一个模型能为多个视图提供数据。 视图层（View）：是应用和用户之间的接口，是应用程序中处理数据显示的部分。在视图中其实没有真正的处理发生，它只是作为一种输出数据并允许用户操纵的方式。
控制器（Controller）:控制器负责视图和模型之间的交互，控制对用户输入的响应、响应方式和流程；它主要负责两方面，一是把用户的请求分发到对应的模型，二是把模型的改变及时地反映到视图上。
- 优点：视图层和业务层分离，更易于维护和修改；由于应用于模型的代码只需写一次就可以被多个视图重用，所以减少了代码的重复性；模型与数据格式无关，这样一个模型能为多个视图提供数据；MVC使开发和维护用户接口的技术含量降低，使用MVC模式使开发时间得到相当大的缩减。
- 缺点：不适合小型，中等规模的应用程序；对于不复杂的界面，可能会增加结构的复杂性，降低运行效率。
- 使用案例：最典型的MVC就是JSP +servlet+javabean的模式。可以创建学生列表，进行添加一个学生的信息等操作。
//model
let model = {
...
}
//view
let boxDom = document.getElement("");
//controller
function Controller(){
this.init();//初始化
}
二、MVVM模式
MVVM是模型(Model)－视图(view)-视图模型(ViewModel)的简写,它本质上就是MVC 的改进版。MVVM层实现了前后端更好的分离在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互的，ModelViewModel之间的交互是双向的。VUE是基于MVVM的设计模式开发的。
Model：代表数据模型，用来存储数据，定义数据修改和操作的业务逻辑；
View：代表视图界面，用来展示UI界面和响应用户交互；
ViewModelL：视图模型，Controller抽离出来的 数据和逻辑处理部分，是一个同步View和Model的对象
Controller：控制器，监听模型数据的改变和控制视图行为、处理用户交互 ；
- 优点：可以独立于Model变化和修改；可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视图逻辑；有较强的可测试性；更适用于数据驱动型的应用。
- 缺点：学习曲线较为复杂，需要设计者丰富的专业知识；在处理大量数据时可能会产生性能问题；可能会增加代码的复杂性。
- 使用案例:Vue.js,AngularJS,ReactJS
//Vue 的 ViewModel 层
var app = new vue({
e: '#app',
data: { //描述视图状态
message: 'fighting';
server: {};
},
methods: { // 用于描述视图行为（完全前端定义）
show(){
...
}
},
created(){
//获取 Model 层的数据
}
})
三、总结
无论是MVC还是MVVM，都有其优缺点，在实际场景中要准确判断实际需求，场景特点，才能达到较好的效果。随着前端技术的日渐强大，设计模式也不断发展，开发者需要不停学习刻苦研究，为创造更好的前端应用不懈努力。
