组件拆分问题

Question

最近遇到了需要多个表单的需求，但是表单内容看起来相同，但细比较起来又有一些不同;

主要由功能和权限导致以下问题：

同一标签的表单域可能不同：如设置与编辑1
不同表单的标签顺序可能不同，标签也可能有增减：如新建1与设置，新建2与新建1
由于功能或权限问题也会导致必填判断也不同：如新建1与编辑，新建2与编辑2

页面类似于下面的样

我能想到有三种方案：
方案一：

这些表单都写在一个组件里根据功能和权限控制不同标签的展示

这样会导致对每一个表单域都要进行判断，逻辑复杂，而且对于不同表单如何更改标签的展示顺序，如编辑1与设置中年龄的位置；

方案二：

根据表单的相似性，封装为三个组件

这个我感觉最好，但也会存在代码冗余和逻辑复杂的问题

方案三：

将每个表单都用一个组件来写，

但这样会导致有很多冗余的代码；

我想知道应该采取哪一种方案，或者有什么更好的组件划分方式吗？

新手提交问题，可能更有点长，请见谅。。。。。。

Answer 1

组件拆分的时候，不要从样子上面去分，而是从它本身的业务逻辑里面去看，就拿上面这个表单来，初步判断，应该都是对用户信息的编辑，所以，我们先设计一个统一的本地数据：

const form = {
  id: '',           // 唯一标识
  username: '',     // 账户
  kind: '',         // 类型
  name: '',         // 姓名
  mobile: '',       // 手机
  tel: '',          // 座机
  email: '',        // 邮箱
  permissions: [],  // 权限列表
  notes: '',        // 备注
}

然后，需要设定表单中组件的显示隐藏以及是否可编辑的逻辑：

1. 是否处于编辑状态，可以看 form.id 是否有值来判断（如果没有持久化之后的唯一 ID 标识，那可以由组件单独提供一个 property 来表示当前表单的状态是 create 还是 edit；
2. 权限不同的表单有不同的项目，这个是组件通过一个 availablePermissions 数组传给表单组件，表单组件根据这个数组渲染即可，传进来几个，就展示几个，最后选中项保存到 form.permissions 属性中
3. 以此将为什么要出现不同类型的表单这个问题的拆分成各个不同的小问题，来一个一个实现。
4. 关于表单中顺序的问题，可以使用一个 order 数组，数组的元素就为表单中字段的名称来控制。

---

上面的写一个组件的逻辑只适用于字段显示与隐藏可以不同，但是对于同一个字段，数据处理逻辑却一致的情况下，如果表单本身不同字段的处理逻辑都不同，那么，就应该拆分成三个不同的表单组件了，比如登录框中的 username 与 用户编辑中的 username ，虽然处理的字段都用户的用户名，但是业务逻辑是完全不同的，那就不能写进一个表单里面。

Answer 2

方案一才是较好的方案，此外别人没法给你说细致的方案，你的需求太粗了，问问题时最好能抽象出一个点来。这里不一定只用一个组件，你可以将细节拆分啊，具有共同功能的封装成组件或js函数。
方案二根据表单的相似性，封装为三个组件，看似封装得很完美，但这种几乎无法扩展，无法维护，因为你已经把功能给写死了，新功能不一定能套进来，不信可以试试。
方案三是最低级的写法不多说了。