前、后端访问模式

这种开发模式对于前端较为复杂的网站项目来说是比较合适的，在前后端分离的同时已Ajax作为桥接点。从图中大家也可以看出，这种开发模式相对应的与后端通信中都是以JavaScript作为主要开发语言的。这种开发模式无疑就确定了JavaScript在前端开发中的地位。这类SPA页面由于复杂功能，也使得JavaScript代码在整个项目中变得更加复杂和庞大。因此久而久之也就出现了JavaScript的各种框架，其中就包括类似于后端spring MVC的分层架构。这个时期，浏览器端代码的分层也变得尤为重要了起来。如图3在这个时期内我们可以看到此时的开发模式主要是这个样子的。

SPA开发模式

前端代码通过MVC分层有了更进一步的空间，但是对于SPA类型的网页应用依然是有一些较难处理的地方的，其中最大难点就是的问题大量的JS的代码的梳理和模块化，在整个MVC框架中其实只划分出了controller与model用来处理信息，前端有着一个后端MVC不存在的问题，那边是前端代码的由于view页面的原因，势必会出现大量的业务代码与页面耦合在一起的情况。虽然MVC框架解决了JavaScript代码过于杂乱的问题，但是没有解决大量js代码与页面绑定而导致前端代码不能很好的进行模块化这个问题。而这些难点前端开发中也只能引入一些其他的方案去解决，例如backbone等。或者使用成熟的JavaScript开发框架。例如angularJs、VUE等。此类框架有一个很大的特征那就是将JavaScript代码进行分层，并且有一些规范性的要求提倡开发这遵循，以便可以更加规范的运用框架，使代码结构更加清晰。在对JavaScript代码进行分层后，还会继续在其中进行了进一步的划分，如图4所示。 

图1.4，分层模式

在这种分层模式下，HTML5、CSS3、JavaScript都可以相应的对号入座。HTML在系统只需要考虑内容的显示而样式则完全脱离开来。CSS直接负责所有的样式，包括页面的结构和各个元素间的排版。开发者也可以使用诸如sass、less的“css预编译程序”来辅助完成页面的样式开发。前端复杂的JavaScript也开始变得清晰起来，只需要在各个模块中对应进行业务开发，在同一层中也可以将与业务关系不大的代码分离出来进行，增加可扩展性和可复用性。如此可以极大的减少开发人员的维护成本，前后端的职责进一步确定了起来，后端可以主要用来处理数据业务，不再与前端相挂钩。在前端开发中也使得前端开发愈加的简单和条理也变得清晰。需求与代码之间的关系不再是复杂的对应关系，而是直接明了的模块对应。在这种模式下，对于复杂的SPA单页面应用，我们可以根据业务需求对代码进行模块化架构，并页面内部又可以对一个页面进行组件化，也可以进行抽象化。例如angularJs中的指令，就可以帮助我实现页面的组件化，可以让每一个小功能模块都是一个小的组件。

3 前端工程化

在上面两个小节中主要为大家分析了在如今前端技术发展的进程所出现的主要技术，而这些技术无疑都是因为网页需要越来越复杂。对于整个web网页的项目来说，项目的发展基本也就意味项目愈加复杂了，核心的业务也会朝着多元化发展。Web项目早已经不是Web1.0时代的网站（web page），而是page application，也就是页面应用（web App），这就意味前端开发的多工具是不可避免的。例如，一个页面在架构时，可能会考虑使用CDN进行静态资源加速，使用CSS预编译工具，使用bootstrap作为样式框架，使用angularJS作为JavaScript开发框架，还有各种便于开发插件等。同时还要考虑到在多人同时开发的情况下，如何高效率的进行打包和发布。而以上各个子项都边都是前端工程化的问题，即主要是代码的自动化、规范化、组件化和模块化。