7.1 前端的组件化架构
在给定的软件系统中，基于组件的架构侧重于对广泛使用的功能进行关注点分离，即将不同的复杂性/关注点分离出来，分别进行处理，让每一小部分都拥有自己的关注的焦点，通过定义、实现松散耦合的独立组件，将其组合到系统中，降低整个系统的复杂度
组件化优点：可重用、代码简洁、易测试，它将一个页面的单一mvc架构拆解成多个组件mvc + 一个页面的MVC架构
我们可以从底至顶的了解前端页面开发：
1. 风格指南
早期侧重视觉，对设计文字，颜色，logo，icon等设计做出规范，产出物为UI 规范
2. 模式库（UI）
更侧重前端开发，对界面样式进行实现，产出物称为 UI框架
封装组件库应考虑的问题：
- 组件提供怎样的方式，选择一次性引入所有组件的包，还是使用某个组件的时候才引入某个组件
- 组件如何发布？组件内部是否有相应的发布方式，是否直接使用git服务器作为包中心
- 复杂的组件是否直接使用外部组件，而非自己开发
- 对于复杂的组件，是否拆分为一个或多个组件，以降低维护成本
- 组件的反馈渠道，如何提供对其他项目的支持，遇到问题时如何处理，比如gitHub的管理方式是什么
- 组件的发布策略，是定期发布版本，还是以语义化版本的方式已发布
封装组件的过程：
- 创建脚手架，它可以从框架自带的工具生成，或是从其组件库修改
- 第一个组件，创建一个基本的组件，引入项目上，进行手脚架测试
- 进行发布测试，选择合适的发布策略，发布组件库，提供快捷的使用方式
- 创建组件的文档中心，可以通过jsdoc类似的方式从代码中生成文档，也可以其他专业方式
- 提供组件实例，创建一个实例的网站，提供组件交互
- 持续改进，添加新的组件，修复bug，并不断优化和扩展
组件类型： 基本类型，复合类型，业务类型
二次封装： 中介者模式：用一个中介对象来封装一些列对象交互，中介者使各对象不需要显式地相互引用，从而使其耦合松散，而且可以独立的更改他们之间的维护，如我们定义一个button组件，他提供原有的组件的数属性，开发中引用原有组件，未来在使用，也只需要引入 装饰者模式： 在不改变已有的组件下，对其动态的扩展，
3. 设计系统
设计系统在某种程度结合了风格指南和模式库，并附加了一些业务的特别要素，并进一步的完善了组件化到页面模块相关的内容
设立原则、创建模式，原子设计，有机体，模版，页面
