javascript - webapp业务流程基本一致，多套主题（样式基本不一样，交互稍有偏差）管理，并且有不断有新增主题，该如何设计组件化架构？

Question

业务场景

一套单页应用，由于需要接入到不同的合作方，因此需要对ui进行调整，有时需要变更一些交互，但整个流程基本一致。

目前打算用vue重构项目，已将公共的业务逻辑抽离成业务层，但编写页面级组件时发现，依然存在大部分可复用代码，例如在登录页面上：

 // viewModel
｛ 
    phoneNum, smsCode, loginbtn
 }

对于每个版本都存在，基本上可以用一套viewmodel去描述这个业务流程，我认为这部分重复代码是可复用。

对于每次新增的版本而言，大多数改动的是样式，少量的交互（也存在动很多交互，但具体业务逻辑流程不变）。

曾经考虑：

方案一：

1.分割viewmodel到各子组件，构建该页面时，引用这些业务组件拼凑，添加／修改样式；
2.子组件间事件通信或动态注册data。
3.交互变更大，新增某个子组件。

但是，一般应该先有ui组件，再有业务组件，此处设计是先有业务组件，再有ui组件。

方案二：

1.先编写ui组件
2.再编写viewmodel对应的流程逻辑
3.引用ui组件，mixin对应逻辑

思路十分凌乱，还请各位给点意见，谢谢。

Answer 1

首先，请区分【组件】和模块的概念。组件仅仅用于表达 UI 交互，不应包含前后端请求等业务逻辑。

具体到问题，Sass 化的站点开发经常需要处理这类【功能可配置】的需求，常见流程：

1. 后端开放【功能配置】接口，前端在页面加载时获取【当前页面配置参数】信息

2. 前端封装各业务逻辑为独立的 JS 模块，通过 export 模块的功能，将业务功能提供给 Vue 的 UI 层使用。

3. 前端 UI 层根据功能配置，调用不同的模块功能。

简单说，开发模式和 Vue 单页应用是一致的，追加根据功能配置定义 UI 逻辑的 JS 模块，做好封装即可。

至于主题动态切换的功能，同样可用配置接口实现。例如，配置接口中存储 style 字段标识当前业务方主题的 className 前缀，然后通过 :class 指令绑定该样式前缀至当前页面上，配合相应的 css 即可轻松实现主题切换。

P.S. 不要在项目开始阶段使用 mixin。mixin 会使得业务逻辑难以查找与调试（混入 mixin 后可以引用不知从何位置导入的函数和变量）。按需导入业务模块才是正确做法。

Answer 2

1. 分离 ui 与 功能组件（例如：网络请求，本地存储），实现功能组件基本上可以自由搭配组合；

2. ui 组件抽取拆分，具体粒度到多小，主要看题主项目之间差异有多大，还有迭代发布速度要求；现实中并不是可复用程度越高越好，层级越多，执行效率越低，出错机会越大，调试难度越高；需要取得一个平衡点。