1.3　零散的前端架构

如果将浏览器作为前后端的界定线（事实上，早期甚至目前很大一部分前端工程师确实只负责浏览器网页端的工作），那么在AJAX诞生之前，前端仅仅是交互逻辑层中薄薄的一层静态展示层。没有动态数据，没有模块化，现如今“无所不能”的JavaScript在那时的唯一作用仅仅是做一些简单的表单验证。在当时如果有人讨论前端架构可能会被嘲笑小题大做，因为那时所谓的前端架构不如叫作“源码目录结构”，不妨称之为“第一代前端架构模式”。

随着AJAX的诞生和普及，前端工程师开始处理HTTP请求和DOM。频繁地操作DOM必然需要考虑性能问题，前端架构设计中便有了性能优化环节。浏览器开发商相继发布高性能的JavaScript引擎，网站性能得到保障，前端的业务体量进一步提升。为应对不断增长的代码量，前端工程师开始思考合理的组件化和模块化；数据复杂度和体量的增长催生了以Backbone.js为代表的第一代JavaScript MV*框架，前端架构中新增了数据管理模块。至此便形成了“第二代前端架构模式”，相比前一代新增了以下环节：

● 性能优化

● 组件化/模块化

● 数据管理

Node.js的普及令前端工程师开始接触Web服务层，以此为契机，前后端工程师开始思考架构的进一步细化和解耦，即前后端分离。确切地说，前后端分离应该被理解为一种分工协作的模式，严格来讲，其并不属于前端技术架构领域。但是在本书中，我们仍然将其视为前端架构的一部分进行讨论，原因有三：首先，催生前后端分离的关键因素是前端业务和技术的发展；其次，相比后端而言，前端架构受前后端分离的影响更大，甚至可以说是关键性因素；最后，在众多相对成熟的前后端分离方案中，起主要作用的，或者通俗一些说，操刀写代码的主力大多是前端工程师。

至此，“第三代前端架构模式”成形，也是前端发展至今相对完善的架构模式。总结之前的内容，完整的前端架构包括以下环节：

● 源码组织规范

● 组件化/模块化

● 数据管理

● 性能优化

● 前后端分离

以上各个环节是任何一个大中型Web前端项目必然具备的，我们可以称之为前端架构中的共通点，或者说其是与业务类型无关的。

在HTML5发布之前，前端的业务类型非常单一，前端工程师的工作仅仅是围绕着DOM展开的。随后，HTML5为前端带来了多媒体、绘图、即时通信等技术，前端的业务类型开始扩展：

● HTML5 Video/Audio取代Flash成为浏览器端音视频处理的首选方案。

● WebRTC技术令网页逐步取代桌面应用成为电话会议、网络直播等即时通信业务的主要平台。

● WebGL是大型3D图形应用（地图、游戏等）的首选方案，还可以结合DeviceOrientation API开发Web VR应用。

不同业务类型的技术架构往往包含一些与业务紧密相关的特殊性，比如视频播放器如何实现分段视频的无缝连续播放，复杂图形应用如何实现并行计算（使用Web Worker）以保障交互的流畅，类似Google Docs的多人协作平台如何设计高效的diff算法解决编辑冲突问题等。这些独特的业务类型均在一定程度上造成了前端技术架构的零散性。

除此之外，项目的体量同样影响前端技术架构的设计。一个仅包含一张海报图片的推广活动网页的架构几乎没有讨论的必要性；庞大的CMS系统（Content Management System，内容管理系统）要求具备严谨且复杂的数据管理模块。这些均是前端技术架构零散性的具体表现。

其实不论是什么类型的应用，越接近用户的环节技术架构越零散。比如，对于Web应用来说，项目的体量、类型对数据层最大的影响是数据库和查询算法的设计；对业务逻辑层而言，架构模式、领域模型、分布式架构甚至编程语言的选择都必须以业务为核心；而直接接触用户的前端虽然编程语言的技术选型单一，但是前后端分离架构、模块化规则等均受业务体量和类型的直接影响。