基础不牢地动山摇，前期打好一个基础很重要。
这部分的知识点比较基础，要先具备对基础知识的掌握。
2.2 阶段二：4-7 前端工程化学习
理解并掌握前端如何使用webpack等工具对你的代码进行打包配置，掌握前端资源部署的原理。
前后端分离：从服务端视角理解前后端分离。
图：前后端分离/未分离
分离前服务端的代码会有一个VM模版引擎写在java工程中，当发起URL Requst时，会返回这个HTML Response。
public String sayHello(Model m) {
List<String> list = new ArrayList<>();
list.add("hello");
list.add("hello world");
list.add("hello world ！");
m.addAllAttributes(list);
return "hello";
}
Controller来填入数据，同时View层来模板引擎消费数据，处理数据展示。
变化1: 模板不再出现UI逻辑。
<!DOCTYPE html>
<html>
<head>
<script src="//g.alicdn.com/dingding/dingtalk-theme/entr.css"></script>
</head>
<body>
<div id="Root"></div>
<script type="text/javascript" src="https://localhost:3000/static/js/boundle.js" crossorigin></script>
</body>
</html>
变化2: SPA单页面应用 与多页面应用的区别
SPA单页面应用 | MPA 多页面应用 | |
组成 | 一个主页面和多个页面片段 | 多个主页面 |
刷新方式 | 局部刷新 | 整页刷新 |
URL模式 | 哈希模式（hash） | 历史模式（history） |
SEO搜索引擎优化 | 难实现，可使用SSR方式改善 | 容易实现 |
数据传递 | 容易 | 通过url、cookie、localStorage等传递 |
页面切换 | 速度快，用户体验良好 | 切换加载资源，速度慢，用户体验差 |
维护成本 | 相对容易 | 相对复杂 |
选择一个前端框架，我认为学习前端框架有三个重点：
- 理解MVVM模式、单页面应用、前端路由。
- 掌握框架提供的API方法，比如页面的render原理、数据变更如何更新视图、以及框架的生命周期等。
- 会使用数据状态管理来分发数据到你的页面。
- 阿里集团前端体系
