前端性能优化四十八：组件化

SPA/MPA

project
├─ dist            # 打包配置目录
│  ├─ prod         # 生产环境
│  └─ test         # 测试环境
├─ src             # 源码目录
│  ├─ apis         # 接口模块：包括全局接口请求的功能，控制数据定向转换
│  ├─ assets       # 资源模块：包括样式、脚本、字体、图像、音频、视频等资源文件
│  ├─ components   # 组件模块：包括全局通用的基础组件、皮肤主题和字体图标
│  ├─ layouts      # 布局模块：包括以布局为最小粒度的组件集合，由至少一个基础组件组成
│  ├─ flows        # 流程模块：包括以流程为最小粒度的组件集合，由至少一个基础组件组成
│  ├─ pages        # 页面模块：包括以页面为最小粒度的组件集合，由至少一个基础组件组成
│  ├─ routes       # 路由模块：包括全局页面跳转的功能，控制页面自由切换
│  ├─ stores       # 数据模块：包括全局数据状态的功能，控制数据驱动视图
│  ├─ views        # 视图模块：包括以视图为最小粒度的组件集合，由至少一个基础组件组成
│  ├─ utils        # 工具模块：包括全局通用的常量与方法
│  ├─ index.html   # 模板入口文件
│  ├─ index.js     # 脚本入口文件
│  └─ index.scss   # 样式入口文件
└─ package.json

①. 将一个具备通用功能的交互设计划分为模板、样式和逻辑组成的功能单元:
    a. 对内管理内部状态满足交互需求
    b. 对外提供属性接口扩展用户需求

②. 组件化是前端工程化的重要基础:
    a. 代码更高层次的复用性,提升开发效率
    b. 组件的封装也是对象的封装
    c. 高内聚低耦合
    d. 组件化的项目利于单元测试、需求迭代

③. 优秀的组件化遵循以下设计哲学:
    a. 将设计图划分为最小组件层级
    b. 使用预设规范创建组件静态版本
    c. 确定组件内部最小且完整的状态的表示方式
    d. 确定组件内部最小且完整的状态的存放方式
    e. 实现数据流的正向传递与反向传递

④. 模块化与组件化区别:
    a. 模块化着重在文件层面上对代码与资源实现拆分与组装
    b. 组件化着重在功能层面上对交互与设计实现拆分与组装