静态页面阶段
互联网发展的早期,网站的前后端开发是一体的,即前端代码是后端代码的一部分。
前端开发的历史演变后端收到浏览器的请求生成静态页面发送到浏览器那时的前端页面都是静态的,所有前端代码和前端数据都是后端生成的。前端只是纯粹的展示功能,脚本的作用只是增加一些特殊效果,比如那时很流行用脚本控制页面上飞来飞去的广告。
那时的网站开发,采用的是后端MVC模式。
Model(模型层):提供/保存数据Controller(控制层):数据处理,实现业务逻辑View(视图层):展示数据,提供用户界面前端只是后端MVC的V。
AJAX阶段
年,AJAX技术诞生,改变了前端开发。Gmail和Google地图这样革命性的产品出现,使得开发者发现,前端的作用不仅仅是展示页面,还可以管理数据并与用户互动。
AJAX技术指的是脚本独立向服务器请求数据,拿到数据以后,进行处理并更新网页。整个过程中,后端只是负责提供数据,其他事情都由前端处理。前端不再是后端的模板,而是实现了从“获取数据--》处理数据--》展示数据”的完整业务逻辑。
就是从这个阶段开始,前端脚本开始变得复杂,不再仅仅是一些玩具性的功能。
前端MVC阶段
前端代码有了读写数据、处理数据、生成视图等功能,因此迫切需要辅助工具,方便开发者组织代码。这导致了前端MVC框架的诞生。
年,第一个前端MVC框架Backbone.js诞生。它基本上是把MVC模式搬到了前端,但是只有M(读写数据)和V(展示数据),没有C(处理数据)。因为,Backbone认为前端Controller与后端不同,不需要、也不应该处理业务逻辑,只需要处理UI逻辑,响应用户的一举一动。所以,数据处理都放在后端,前端只用事件响应处理UI逻辑(用户操作)。
后来,更多的前端MVC框架出现。另一些框架提出MVVM模式,用ViewModel代替Controller。MVVM模式也将前端应用分成三个部分。
Model:读写数据View:展示数据View-Model:数据处理ViewModel是简化的Controller,所有的数据逻辑都放在这个部分。它的唯一作用就是为View提供处理好的数据,不含其他逻辑。也就是说,Model拿到数据以后,ViewModel将数据处理成视图层(View)需要的格式,在视图层展示出来。
这个模型的特点是View绑定ViewModel。如果ViewModel的数据变了,View(视图层)也跟着变了;反之亦然,如果用户在视图层修改了数据,也立刻反映在ViewModel。整个过程完全不需要手工处理。
SPA阶段
前端可以做到读写数据、切换视图、用户交互,这意味着,网页其实是一个应用程序,而不是信息的纯展示。这种单张网页的应用程序称为SPA(single-pageapplication)。
所谓SPA,就是指在一张网页(singlepage)上,通过良好的体验,模拟出多页面应用程序(application)。用户的浏览器只需要将网页载入一次,然后所有操作都可以在这张页面上完成,带有迅速的响应和虚拟的页面切换。
随着SPA的兴起,年后,前端工程师从开发页面(切模板),逐渐变成了开发“前端应用”(跑在浏览器里面的应用程序)。
目前,最流行的前端框架Vue、Angular、React等等,都属于SPA开发框架。