原始时代

web 1.0 时代,是不存在前端概念的，大家都在使用 jsp、php、asp。得益于 jsp 的强大，开发微型项目的时候，可以很快的开发出来，但相对的，编写大型项目的时候问题也会很明显的暴露出来。业务体系增大，调试困难；jsp 混杂业务，后期难以维护；不区分职责

后端MVC时代

由于 1.0 时代的问题，为了代码更好维护，也为了明确前后端的职责。此时后端出现了MVC框架（ Spring，Structs 等），前端以模板的形式进行开发，然后后端将逻辑编写到模板中。缺点：前后端开发效率低，职责不明确，更多的时候是由后端进行前后端一肩挑

前后端分离

得益于Ajax的到来，使得前后端的职责更加明确，因为前端可以通过Ajax发送请求来进行数据交互。前端开发人员只需要专注于开发自己页面，实现与用户交互，数据则由后台提供。而且Ajax可以使得页面实现部分刷新，极大地减少了之前需要反复开发的页面。前端的类库也逐渐地丰富起来，其中最著名的就是jQuery。

前端框架——MVC、MVP、MVVM

MVC

前端的MVC与后端类似，具备着 View、Controller和Model。Model层负责保存应用数据，与后端数据进行同步；Controller层负责业务逻辑，根据用户行为对Model层的数据进行修改；View层负责试图展示，将Model中的数据可视化出来

MVP

MVP 模式与 MVC 模式非常的接近，区别是将 Controller 换成了 Presenter。在 MVC 模式中是 Model 影响 View，View 影响 Controller，Controller 影响 Model，三者是互相影响。MVP 模式就是在 Model 和 View 中间增加一个代理人，避免 View 与 Model 之间的直接交流，无论是视图的修改还是 Model 的更新，必须由 Presenter 来进行处理。

MVVM

MVVM 是 Model-View-ViewModel 的简写，即模型-视图-视图模型。MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯 JavaScript 对象表示，View负责显示，两者做到了最大限度的分离。把 Model 和 View 关联起来的就是 ViewModel。ViewModel 负责把 Model 的数据同步到 View 显示出来，同时还负责把View的修改同步回Model。

【模型】到【视图】的转化，实现方式是数据绑定；【视图】到【模型】的转化，实现方式是 DOM 事件监听。两个方向都实现了的，我们称之为双向绑定。Vue 双向绑定的核心是数据劫持，Angular 双向绑定的核心是脏检查，React 是单向数据流，实现了【模型】影响【视图】。

脏检查

在 angular中，他没有办法判断你的数据是否做了更改， 所以它设置了一些条件，当你触发了这些条件之后，它就执行一个检测来遍历所有的数据，对比你更改了地方，然后执行变化。

在检查时，它需要将原对象复制一份，在某个时间，比较现在对象与原对象的值，如果不一样就表明发生了变化，这个策略要保留两份变量，而且要遍历对象，比较每个属性，这个检查很不科学。而且效率不高，有很多多余的地方，所以官方称为 脏检查。