前后端分离/前端模块化/传统页面和单页面

前后端分离讲解

1.从MVC到前后端分离
MVC:Model + View + Controller，即模型+视图+控制器，项目开发时分层会分为三层：控制层，业务层，持久层。

前后端分离：目前比较常用的就是前端人员自行实现跳转逻辑和页面交互，后端只负责提供接口数据，二者之间通过调用 RESTful api 的方式来进行数据交互

2.前后端分离是一种项目部署模式(架构模式)
前后端分离后，各端应用可以独立打包部署，并针对性的对部署方式进行优化，不再是前后端一个统一的工程最终打成一个部署包进行部署。以 web 应用为例，前端项目部署后，不再依赖于 Servlet 容器，可以使用吞吐量更大的 Nginx 服务器，采用动静分离的部署方式，既提升了前端的访问体验，也减轻了后端服务器的压力，再进一步优化的话，可以使用页面缓存、浏览器缓存等设置，也可以使用 CDN 等产品提升静态资源的访问效率。

3.优点

1. 可以真正实现前后端的解耦，不仅仅是开发方式的改进，前后端开发人员的职责也更加清晰，对于整个技术团队有很大的益处。
2. 并行开发可以有效的提升开发效率，因为可以前后端并行开发，而不再是前后端代码强依赖。
3. 职责分明意味着出现问题可以快速找到负责人，不会出现互相推诿的现象。
4. 前后端开发的解耦也会增加各端代码的维护性和易读性。
5. 尽早的使用前后端分离的开发模式，一旦业务扩张需要进行多产品开发，如 App 、微信小程序等，后端接口只需要些许的增改即可，因为有大量的复用接口，大大提升效率。
6. 前端项目部署时不需要重启服务器，无缝升级。
7. 分开部署也会进一步减轻后端服务器的压力。

前端模块化

为什么需要模块化，举一个简单的🌰：

浏览器厂商更新是比较保守的，因此很多ES6语法是不能直接在浏览器上运行的，这时候我们总不能把写好的ES6代码改成ES5代码，于是就有了下面的转换

编译前：

[1,2,3].map(item => console.log(item))

编译后：

[1, 2, 3].map(function (item) {
  return console.log(item);
});

压缩后:

[1,2,3].