一个好的业务组件必然是逻辑清晰以及方便修改维护。
下面以 Vue 为例子进行进行概念上的简单说明。
一些涉及到的概念
- 数据驱动 UI
- 单向数据流
- 有限状态机
模板
模板应保证逻辑清晰，业务复杂的部分可拆分成独立的业务组件又或者通过 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 里面处理数据的单位以及一些简单的判断。
保证代码的可维护性
- 代码、数据逻辑之间的关系应保持简单与一致，不应存在多种不同的业务关系模型。
- 单向数据流。
- 数据处理以及操作分开。
- 交互状态复杂的业务组件应用有限状态机以及 computed。