前端架构-单页面应用

前端架构原理

本章前半部分讲解了MVC、MVVM架构的原理，针对此部分内容，我整理了两篇文章：

• 架构模式-MVC
• 架构模式-MVVVM

前端架构选型

框架选型需要考虑的因素：

1. 框架情况调研
   • 是否能满足大部分应用的需求？
   • 是否有丰富的组件库？
   • 社区支持怎么样？
   • 替换成本
2. 团队是否能快速的掌握框架。
   • 根据不同基础的团队，降低学习成本。
3. 框架的生态系统。
   • 足够的功能组件、库支持，保证开发专注于业务。
4. 浏览器的兼容性。
   • 业务方向限定选择范围。
5. 后期维护成本和难度。
   • 越大型的项目，越需要大而全的框架。
6. 最小的迁移代价。
   • 框架间迁移项目
   • 框架的向下兼容性。

大而全还是小而美

1. 大而全。（例如：Angular）
   • 优点：功能全，开箱即用，文档详细，规范准则多，代码质量高。
   • 缺点：体积大，上手成本、难度高，规范准则多。
2. 小而美。（例如：React）
   • 优点：灵活性高，可定制度高，上手成本、难度底。
   • 缺点：维护成本高，代码质量低。

React

优点：不需要DOM操作、组件化思想、JSX模板、多平台领域支持。
缺点：为优化DOM操作而生，需要依赖其他库完成项目搭建。

Angular

优点：开箱即用，自带完整应用所需要的所有要素；完善的开发规范、指南。
缺点：需严格按照规范编码，相应的框架问题不易修改。

Vue

优点：上手难度低，可轻量化引用，
缺点：多依赖，维护成本高

启动前端应用

通用流程：

• 寻找合适的脚手架（star）
• 选择合适的UI框架/组件库。创建自己的组件库
• 确认浏览器支持范围
• 明确响应式设计需求
• 服务端渲染。（作用：SEO、更快的页面渲染速度）

---

《前端架构：从入门到微前端》——知识点整理。