以组件为基础，基于功能扩展的前端架构

一直想讨论什么是理想的，健壮的，可扩展的Web前端架构，最近刚好有一些时间，结合自身的经验做个总结。

 

1. 基于组件的前端架构

下图是一个常见的前端画面，我们把画面拆解为组件，整个画面有多个组件构成，形成一个单根的组件树。

 

组件树上同一个分支内部是相互协作的，作为一个整体来提供服务，不同的分支之间由于功能的不同而差异很大。按照功能来组织前端架构是一个合适的方法，功能内部包含了子组件。

 

本文讨论的前端架构就是以组件为基础，按照功能进行分组的架构，如下图：

Shared 指的是项目中共享的功能，包括UI组件，数据处理组件等等基础设施，这些共享功能会放到单独的一个分组内。

而Core包含了如何加载每一个功能，包括组件，路由，状态管理等等。

 

2. 子功能（feature）内部结构

每一个子功能代表了组件树上的一个分支，提交了一个独立的功能，功能里面包含了多种，多个组件。

按照组件的功能，把组件分为两类：呈现组件和容器组件。呈现组件只负责UI呈现，以及响应用户事件，不包含业务逻辑，保持高度可重用。而容器组件上可以构建业务逻辑，挂载着上下文状态，知道如何获取业务数据，以及处理用户事件。

最后我们引入一个全局唯一的实体来管理App的状态，Redux就是一个非常好的选择。这样一个功能内部的结构如下：

3. App整体代码结构

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

— src    — core        // 加载所有feature的组件，路由，合并所有feature的状态管理    — shared      // 共享的基础设施代码    — features       — feature 1          — redux               — actions.js               — reducer.js               — initialState.js          — components                — component1.js                — component1.less          — index.js  — scripts  — package.json