前端技术的发展流程？

1. 前端技术的发展流程？

静态网页->服务器组装动态网页数据->后端为主的MVC->前后端分离->纯前端的MV*->前端虚拟DOM、前后端同构

阶段1.静态网页阶段特征：

网页是纯静态的

页面交互考静态页面的跳转

阶段2.服务器组装动态数据：

动态页面的崛起：JavaScript诞生，仅仅使用JavaScript的静态页面不能读取后台数据库中的数据，以PHP，JSP、ASP.NET为代表的动态页面技术相继诞生。

其流程为：浏览器发送请求->后端生成静态页面->发送到浏览器

特征：

网页不再是纯静态的：页面可以获取服务器数据信息不断更新

后台代码变得庞大臃肿：由于前端展示的所有内容，都在后端进行拼装，后端的逻辑非常重，因此，后台代码变得庞大臃肿。

服务器组装动态数据

PHP：

是一种开源的通用计算机脚本语言，尤其适用于网络开发并可嵌入HTML中使用。

JSP：

是由SUN公司倡导和许多公司参与共同创建的一种软件开发者可以响应客户端请求。

ASP：

1.0在1996年随着IIS3.。0而发布。2002年。ASP.net取代了他。

阶段3-后端MVC框架

M:Model 模型层（提供/保存数据）

C：Controller 控制层（数据处理，实现业务逻辑）

V：View 视图层 （展示数据，提供用户界面）

阶段4：前后端分离 

AJAX：

Asyncchromous JavaScript and XML （异步的JavaScript和XML）

AJAX不是一门新的编程语言，而是一种使用现有标准的的新算法，也就是说他不是一门语言，是一种方法。

                原理上这是几门技术的一个综合。主要是DOM,XML,JavaScript,JSON,CSS等。AJAX的出现标志着Web2.0时代来临

AJAX的使用好处：

提升用户体验

异步，不阻塞页面

前后端分离，其通过AJAX连接

前端：html，js，css

后端：业务逻辑，数据

web2.0 jquery是典型的的前后端开发框架的代表，但存在一些问题

适用于大型的前端应用

框架臃肿

全DOM操作，维护困难

典型的jquery代码：

    

 

阶段5：前端MVc
*前端MVC，*前端通过Ajax得到数据，因此也有了处理数据的需求。
前端代码变得也需要保存数据、处理数据、生成视图，这导致了前端MVC框架的诞生

前端MVVM*
这种框架提出MVVM模式，用View Model 代替Controller

Node（后端）中的MVC模式与前端中的MVVM之间的区别

MVC是后端分层开发概念

MVVM是前端视图层概念，主要关注与 视图层分离，也就是说：MVVM把前端的视图层分为了三部分：

Model，View，VM ViewModel

MVVM相对于MVC的优点

双向数据绑定：当model变化时，view-Model会自动更新

开发人员专注于业务逻辑实现：直接操作DOM的代码大大将第一，减少开发成本

逻辑清晰，适用于大型系统的开发

前端3大流行框架：

React Angular Vue

阶段6 前端virtual DOM 、 前后端同构

*Virtual DOM：*使用虚拟DOM，页面的渲染过程不再是数据直接通过前端模板渲染到页面，也不是初始化viewModel

进行页面模板填充和事件绑定，而是通过dom衍生描述语法（这为什么称为DOM衍生描述语法，通常我们通过html来描述的，但是目前一些框架是通过非标准的html方式描述的，定义的一套迎合自己框架的方式，其实使用html也是可以的，这里的虚拟DOM应该就是向vue里面通过$refs调用DOM一样，应该也包含把DOM的改变转化为数据的改变）解析生成虚拟DOM，页面交互编程了修改虚拟DOM，然后将虚拟DOM的改变反映到htmlView层上。

前后端同构：

只开发一套代码，既可以用来实现前端的JavaScript加载渲染，也可以用于后台的直出渲染

因为Node.js使JavaScript成为服务器脚本语言

JavaScript成为唯一的浏览器和服务器都支持的语言，前端工程师可以编写后端程序