本文介绍前端开发的历史和趋势,帮助前端小白快速了解前端开发。
静态页面阶段
互联网发展的早期，网站的前后端开发是一体的，即前端代码是后端代码的一部分。
1.后端收到浏览器的请求
2.生成静态页面
3.发送到浏览器
那时的前端页面都是静态的，所有前端代码和前端数据都是后端生成的。前端只是纯粹的展示功能，脚本的作用只是增加一些特殊效果，比如那时很流行用脚本控制页面上飞来飞去的广告。
那时的网站开发，采用的是后端 MVC 模式。
Model（模型层）：提供和保存数据
Controller（控制层）：数据处理，实现业务逻辑
View（视图层）：展示数据，提供用户界面
前端只是后端 MVC 的 V。
AJAX 阶段
2004年，AJAX 技术诞生，改变了前端开发。Gmail 和 Google 地图这样革命性的产品出现，使得开发者发现，前端的作用不仅仅是展示页面，还可以管理数据并与用户互动。
AJAX 技术指的是脚本独立向服务器请求数据，拿到数据以后，进行处理并更新网页。整个过程中，前端向后端发送请求，而后端此时仅仅只是根据请求负责提供相应数据即可，其他事情都由前端处理。前端不再是后端的模板，而是实现了从“获取数据 ---> 处理数据 ---> 展示数据”的完整业务逻辑。
就是从这个阶段开始，前端脚本开始变得复杂，不再仅仅是一些玩具性的功能，开始了前后端分离的道路。
前端 MVC 阶段
前端已经不再是仅仅展示功能。前端代码有了读写数据、处理数据、生成视图等功能，因此迫切需要辅助工具，方便开发者组织代码。这导致了前端 MVC 框架的诞生。
2010年，第一个前端 MVC 框架 Backbone.js 诞生。它基本上是把 MVC 模式搬到了前端，但是只有 M （读写数据）和 V（展示数据），没有 C（处理数据）。因为，Backbone 认为前端 Controller 与后端不同，不需要、也不应该处理业务逻辑，只需要处理 UI 逻辑，响应用户的一举一动。所以，数据处理都放在后端，前端只用事件响应处理 UI 逻辑（用户操作）。
后来，更多的前端 MVC 框架出现。另一些框架提出 MVVM 模式，用 View Model 代替 Controller。MVVM 模式也将前端应用分成三个部分。
Model ：读写数据
View ：展示数据
View-Model ：数据处理
View Model 是简化的 Controller，所有的数据逻辑都放在这个部分。它的唯一作用就是为 View 提供处理好的数据，不含其他逻辑。也就是说，Model 拿到数据以后，View Model 将数据处理成视图层（View）需要的格式，在视图层展示出来。
这个模型的特点是 View 绑定 View Model。如果 View Model 的数据变了，View（视图层）也跟着变了；反之亦然，如果用户在视图层修改了数据，也立刻反映在 View Model。整个过程完全不需要手工处理。也就是我们所谓的双向数据绑定。
组件化开发
组件化是一种高效的处理复杂应用系统，更好的明确功能模块作用的方式。
按照功能划分，一张网页可以由多个互相独立的功能单位组成，这种功能单位就叫做“组件”（component）。比如，典型的网页分成页头、内容、页尾三个部分，就可以写成三个组件：Header、Content、Footer。这些组件拼装在一起，就构成了一张页面。
组件内部还可以包含下一级的组件。比如，“文章”组件内部可以包含“表单”组件，“表单”组件内部又可以包含“按钮”组件。
组件的好处有很多，下面是其中几点。
1、有利于细化 UI 逻辑，不同的组件负责不同的功能点。
2、有利于代码复用，多个页面可以使用同样的组件。
3、有利于人员分工，不同的工程师负责不同的组件。
一张图就能理解什么是组件化。
SPA 阶段(单页面应用程序)
前端可以做到读写数据、切换视图、用户交互，这意味着，网页其实是一个应用程序，而不是信息的纯展示。这种单张网页的应用程序称为 SPA（single-page application）。
所谓 SPA，就是指在一张网页（single page）上，通过良好的体验，模拟出多页面应用程序（application）。用户的浏览器只需要将网页载入一次，然后所有操作都可以在这张页面上完成，带有迅速的响应和虚拟的页面切换。
随着 SPA 的兴起，2010年后，前端工程师从开发页面（切模板），逐渐变成了开发“前端应用”（跑在浏览器里面的应用程序）。
目前，最流行的前端框架 Vue、Angular、React 等等，都属于 SPA 开发框架。
网友评论