基于configcomponent转向面向数据的编程

面向数据编程

面向数据编程是什么样的体验？

其实是数据驱动式编程更向前走一步，我们知道现在MVVM框架，像React、vue、Angular这些给前端带来了很大的进步，更优雅的工程化体系结构，更健壮的代码体系结构。同样给开发者带来了数据驱动式开发的体验，但是业务代码还是经常会出现业务逻辑与UI表达形式的穿插混合的情况，很难统一。

样式行为分离

面向数据的编程其实核心思想还是做样式行为分离，中间的解耦利器便是数据。

样式 mix 行为 = 样式 + 数据 + 行为

于是我们抽象出来的config-component组件，作为驱动样式行为分离的通用组件，驱动面向数据编程。
github： https://github.com/chalecao/c…
欢迎star！！！

例如实现下面的表单：

基于antd组件库，比较下不同的代码结构：

左边的图是基于ANTD正常的写法，我们要写Form，要写检验规则，要写子组件等等，关键是这些逻辑是糅合在一起的。右边是基于config-component提供的ConfigForm组件做了封装，只需要提供JSON schema配置数据即可驱动你的页面，分离数据校验和UI逻辑，UI逻辑基于UIconfig，数据校验基于schema做校验。

creative feature创新特性

✅ change your code style to face data, use JSON schema config to driven you page.数据驱动式开发更进一步转向面向数据编程，结合React Hooks开发更高效，专注于数据和业务逻辑.基于JSON配置数据驱动你的页面或者表单。

✅ add schema mechanism to ensure you data correct and force you to care you data and handle the abnormal situation.开发中引入schema机制验证核心数据的正确性，无论是表单还是前台组件均可适用。

✅ support get data async, verify data when it changes.基于schema动态校验数据，支持异步数据更新，响应式做校验。

usage用法

安装：

npm install config-component --save

config-component默认提供了2中类型组件，

• ConfigComponent, 通用类型组件，配置页面逻辑，用于前台页面
• ConfigForm， 专用于配置化表单，可以用中后台页面

For common component:

import {ConfigComponent} from 'config-component'
...
<ConfigComponent
      initialValues={...}
      schema={...}
      uiConfig={...}
      />

For form component:

import {ConfigForm} from 'config-component'
...
<ConfigComponent
      initialValues={...}
      schema={...}
      uiConfig={...}
      onSubmit={()=>{...}}
      componentSet={...}
      />

params:

ℹ️schema: the core data you care, ConfigComponent will verify you core data with schema，you can specify alt props in item, when error occurs, will show alt as default value

ℹ️initialValues: init value in you comp

ℹ️uiConfig: define your ui interface with json config, support event hooks, see example in playground file.

ℹ️onSubmit: used only in form when submit data.

ℹ️componentSet: support Ant Design or Fusion or you selfdefine Components.

online example在线案例

playground：https://chalecao.github.io/co…

example – configForm

online example: https://codesandbox.io/s/conf…

example – configComponent

online example: https://codesandbox.io/s/conf…

总结

面向数据的编程，核心关注数据