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

jiezi

5 年前

其实是数据驱动式编程更向前走一步，我们知道现在 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 做校验。

✅ 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 动态校验数据，支持异步数据更新，响应式做校验。

安装：

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.

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

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

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

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

面向数据编程

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

样式行为分离

creative feature 创新特性

usage 用法

online example 在线案例

example – configForm

example – configComponent

总结