共计 1902 个字符,预计需要花费 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 做校验。
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…
总结
面向数据的编程,核心关注数据