版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Solitarily/article/details/85340422
12.29学习记录
一、3-1 前端框架的分析
What
框架中的框就是“约束”，架就是“支撑”，框架会控制我们书写代码时的结构、依赖关系以及交互关系。简单点来说就是我们按照框架的要求来写业务，而与业务无关的一些内容由框架完成，提高开发效率。
Why
原生JS搞不定了（主要不是技术问题，而是成本、效率问题）。
How
通过实战开发学会框架的使用
二、3-2 前端框架要解决的问题
传统的原生开发方式的不足
- 代码层面问题
- 效率问题
- 多页应用问题
代码层面问题
- 缺失规范，代码混乱 -> 结构化开发
- 缺少限制，容易冲突 -> 独立文件，独立作用域
- 缺少支撑，能力要求高 -> 提供支持，只关注业务
效率问题
- 关注所有流程 -> 关注业务
- 团队效率低 -> 并行开发
- 测试效率低 -> 模块测试，自动化测试
多页应用的问题
- 路由体验问题（多次请求，时间长，用户体验不好） -> 使用单页路由
- 无页面切换效果 -> 可以添加过程动画
- 浪费服务器资源 -> 减少服务器请求
框架开发的不足
- 兼容性问题，SEO不好
- 有场景要求，开发自由度降低
- 黑盒开发，框架本身有出错的风险
- 有学习成本
三、3-3 三大框架对比
Angular
- 背景：2009年发布，Google
- 主要版本：1.x, 2.x, 4.x, 5.x(beta)
- 基于html的大而全的MVC框架（对js和css的关注较少）
React
- 背景：2013年5月开源，Facebook
- 最新版本：16.x
- 基于js的视图层框架（可以把html、css都转换到js里来处理；视图层框架指只关注页面的显示，而不像Angular的MVC框架（数据也在页面中处理））
Vue
- 背景：2014年2月开源，尤雨溪，现加入阿里Weex团队
- 主要版本：0.1x，1.x，2.x
- 基于html的视图层框架
框架对比
| Angular | React | Vue | |
|---|---|---|---|
| 组织方式 | MVC | 模块化 | 模块化 |
| 数据绑定 | 双向绑定 | 单向绑定 | 双向绑定 |
| 模版能力 | 强大 | 自由 | 简洁 |
| 自由度 | 较小 | 大 | 较大 |
| 路由 | 静态路由 | 动态路由 | 动态路由 |
其他维度
| Angular | React | Vue | |
|---|---|---|---|
| 背景 | 阿里巴巴 | ||
| 文档 | 英文 | 英文 | 多语言 |
| 上手难度 | 较高 | 较高 | 一般 |
| App方案 | Ionic | RN | Weex |
适用场景
- Angular：后端开发人员构建CURD类型应用
- React：前端开发人员构建复杂的Web应用
- Vue：前端开发人员快速构建Web应用