好的业务组件设计

好的业务组件设计

一个好的业务组件必然是逻辑清晰以及方便修改维护。

下面以 Vue 为例子进行进行概念上的简单说明。

一些涉及到的概念

1. 数据驱动UI
2. 单向数据流
3. 有限状态机

模板

模板应保证逻辑清晰，业务复杂的部分可拆分红独立的业务组件又或者经过 computed 组装数据关系。

不该该在模板写逻辑语句，仅使用简单的条件判断以及方法调用或表达式。

状态的设计(data、computed)

状态分全局状态以及本地状态，全局状态就是 sotre(Vuex 或者本身另外定义的 Vue 对象)，本地状态包括数据(data)以及根据数据响应的状态(computed)。

须要根据 data、store 或者 其余 computed 响应的同步状态都属于 computed，computed 必须是同步数据，computed 内部禁止任何异步操做。

全部须要异步获取以及没法由其余数据响应变化的数据都是 data。

有时候能够把 computed 做为一个不可写属性使用，返回一个常量或者其余想输入到模板的值。

原则是 data 的结构应清晰简单，数据之间的关系放在 computed。

数据的处理

服务器获取的数据不要在业务组件直接写请求，应经过 services 封装。

数据单位应保存一致(例如时间使用 13 位，金钱使用分)，须要进行转换的数据按就近原则进行处理：若是是服务器数据在 services 进行转换，若是是用户输入的数据，经过 computed 进行 get/set 处理。

发送到服务器的数据也是同样，应在 services 里面处理数据的单位以及一些简单的判断。

保证代码的可维护性

1. 代码、数据逻辑之间的关系应保持简单与一致，不该存在多种不一样的业务关系模型。
2. 单向数据流。
3. 数据处理以及操做分开。
4. 交互状态复杂的业务组件应用有限状态机以及 computed。