基于config-component转向面向数据的编程?

面向数据编程

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

其实是数据驱动式编程更向前走一步,我们知道现在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 Designor Fusionor 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...

总结

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

原文链接:segmentfault.com

上一篇:冒泡排序,快速排序的JavaScript实现
下一篇:政采云前端小报第46期

相关推荐

  • 鸡啄米:C++编程入门系列之前言

    从今天开始将给大家讲解一些C编程入门的知识,对于也是个温习巩固的过程。将会用深入浅出的方式,尽量用最简单的语言让读者学会C语言,并爱上这门语言。         本前言讲述的是编程语言的发展过程、面...

    11 天前
  • 高性能javascript--编程实践

    setTimeout()和settimeInterval()传递函数而不是字符串作为参数 引申: 用setTimeout()方法来模拟setInterval()与setInterval()之间的...

    4 个月前
  • 高性能JavaScript DOM编程(1)

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵。有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用...

    3 年前
  • 面对对象编程

    一、创建对象 1.构造函数 var Vehicle = function () { this.price = 1000; }; var v = new Vehicle(); v.price // 1...

    9 个月前
  • 面向未来编程(Future-Oriented Programming),建设未来 Vue 生态

    概要 Vue 的作者尤雨溪最近公布了 3.0 版本最重要的 RFC Vue Functionbased API(https://zhuanlan.zhihu.com/p/68477600)。

    10 个月前
  • 面向切面编程与装饰器

    面向切面编程 ~~~~ 嗯,百度百科一下 ~~~~ AOP 为 Aspect Oriented Programming 的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统...

    8 个月前
  • 非权威的JS模块化编程笔记

    前言:对于JS的模块化编程,一直都处于边学边用的状态,借着此次重构代码的机会,对“JS模块化编程”做一个系统的完整的学习和整理。(随时更新) 参考文章:http://www.ruanyifeng.c...

    2 年前
  • 重探浏览器事件(浅析事件编程化)

    前言 在平常开发过程中,就算不使用现在主流的框架也至少得使用个Jquery,这些工具帮我们统一不同浏览器平台之间的差异和细节,可以将注意力集中到开发上来. 不过有意思的一点是,在看完高程的N年后...

    1 年前
  • 配置节点表示为静态bower_components?

    Amol M KulkarniConnor Leech(https://stackoverflow.com/users/1933917/amolmkulkarni)提出了一个问题:configure ...

    2 年前
  • 配置(Configuration)

    你可能已经注意到,很少有 webpack 配置看起来很完全相同。这是因为 webpack 的配置文件,是导出一个对象的 JavaScript 文件。此对象,由 webpack 根据对象定义的属性进行解...

    10 天前

官方社区

扫码加入 JavaScript 社区