# 原始时代

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中的数据可视化出来

image-20200427223220090

# MVP

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

image-20200427223244025

# MVVM

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

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

# 脏检查

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

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

Last Updated: 2020-4-27 22:56:04