前端学堂
学有所用

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

文章目录[隐藏]

本文接上篇:基于config-component转向面向数据的编程 继续分析如何转向面向数据的编程

面向数据

前面我提出了样式行为数据分离的想法:

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

之前我们都知道做样式行为分离,从jQuery之后也出现了像Angular,Backbone,Avalon,React,Vue等等很多前端框架,从MVC设计理念到MVVM到响应式设计。这些前端框架的基本出发点其实都是样式和行为分离,JS框架主要解决的是行为的问题。

程序(行为) = 算法 + 数据

大学的计算机课程中我们都学过:程序主要包含两部分,算法和数据。

对于前端领域,其实多了一部分就是样式。当然样式主要包括:HTML结构+CSS样式,这些都是基础知识,就不用做多介绍,从HTML5+CSS3标准之后,也没有多大的变化。但是在MVVM框架中使用方式发生了变化,对于React框架,引入了jsx类型文件,支持编写HTML片段,通过DSL分析,基于AST转化成包装函数,最后编译成我们的代码。

config-component

config-component其实将JSX中html代码片段做了进一步的抽象,转化成JSON-Schema的数据形式来驱动。用户只需要专注于如何构造处理JSON数据,具体的展现是通过JSON数据来驱动view展示。将我们的程序转化成:样式+数据+算法

程序= 样式 + 数据 + 算法

从前端目前codeless的发展方向来看,这其实只是其中一部分,更进一步基于config-component我们可以做

  1. DDV(数据驱动view),对于一些比较固定的场景,比如导购展示页面,完全可以通过数据驱动页面的展示,包括驱动某个UI展示,驱动整个框架展示。这时候后端接口返回数据就需要包含两个层次,UI层数据和业务数据。如果同时将两个数据混在一起,其实就类似我们说的SSR(服务端渲染)了,但是是从另一个方式来实现的,可以说是轻量级的服务端渲染
  2. 可视化搭建,这个场景和第一个场景结合起来更能发挥价值。后端同学可能并不擅长写UI,即使抽象成JSON Schema,也需要了解简单的一些前端知识。而这个UI层的JSON Schema我们可以通过可视化搭建来完成,搭建之后生成一份JSON Schema,作为页面的UI,在搭建的时候处理好后端数据的映射关系其实就ok了。需要我们处理的其实是一些算法逻辑。

config-component中提供了config-form组件,主要用于解决中后台的form表单的处理,包含了以下功能:

  1. JSON Schema驱动表单展示,支持自定义组件,支持函数组件,支持原生组件
  2. 提供数据统一校验机制,将数据模型层统一抽出来处理,UI中通过schemaKey关联即可,处理起来更加灵活。提供数据校验高亮和自定义提示
  3. 支持灵活的自定义事件处理

比较一下传统的写法:

<div className={`step-1 ${step}`}>
        <div>
          任务类型: <Select
            className="select-type"
            onChange={id => setTaskSelected(() => {
              const task = taskList.find(item => item.id == id)
              task.taskIndex = JSON.parse(task.taskIndex)
              return task
            })}
            dataSource={taskList.map(it => ({ label: it.taskName, value: it.id }))}
          />
          <ul className="step-1-tips">
            <li>每日任务:活动周期内,每日完成任务指标即可获得奖励,例如:每日收银笔数达到5笔,获得3元红包。</li>
            <li>周期任务:活动周期内,累计完成任务指标即可获得奖励,例如:一个月内累计活跃超过24天,获得100元红包。</li>
            <li>每日&amp;周期任务:活动周期内,在每日完成任务指标基础上,还要达到周期任务指标,才能领取任务奖励,例如:每日任务完成收银5笔,完成任务天数达到24天及以上,获得100元红包</li>
            <li>签到任务:以签到形式的激励任务,可以实现连续参与权益递增</li>
          </ul>
        </div>
        <br /><br />
        <Button type="primary" disabled={!Object.keys(taskSelected.taskIndex).length} onClick={() => {
          setStep('step2')
          // 如果是周期任务
          if (isPeriod()) {
            awardGetWayList.splice(1)
          }
        }}>创建任务</Button>
      </div>

下面是基于config-form写法

const schema = yup.object().shape({
    outerTaskId: yup.string().required(),
    activityName: yup.string().required('请填写任务名称').max(12, '活动名称最长12个字符'),
    taskTime: yup.array().required('请填写任务时间').test(
      'check-time',
      '任务时间 >= 1天',
      value => {
        return value && value[1].hour(23).minute(59).second(59).milliseconds(0)
          .valueOf() - value[0].milliseconds(0).valueOf() >= (24 * 60 * 60 * 1000 - 1000)
      },
    ),
    activityDes: yup.string().required('请填写任务概要').max(24, '最长24个字符'),
    activityRemark: yup.string().required('请填写任务细则').max(200, '最长200个字符'),
    minAmount: yup.string().test('check-number', '请输入正确的单个红包最小金额(2位小数)', value => {
      if (!value) return true
      return checkNumber2Decimal(value)
    }),
...
const formConfig = {
    initialValues: {
      outerTaskId: taskSelected.id,
      taskLabel: taskSelected.taskName,
      joinWay: joinTypeList[0].value,
      sendingStrategy: Object.keys(sendingStrategyMap)[0],
      awardGetWay: awardGetWayList[0].value,
      collectPeriodContent: Object.keys(collectPeriodContentMap)[0],
      splitPeriodContent: Object.keys(splitPeriodContentMap)[0],
      filtFlag: filtFlagList[0].value,
      ...(detail ? {
        ...detail,
        joinWay: ('' + detail.joinWay),
        awardGetWay: ('' + detail.awardGetWay),
        taskTime: [moment(detail.activityStart), moment(detail.activityEnd)],
        ...detailMap,
      } : {})
    },
    schema,
    onSave: (schemaForm) => {
      actionType = SAVING
      // console.log(actionType)
    },
    onAudit: (schemaForm) => {
      actionType = SUBMIT
      // console.log(actionType)
      schemaForm.submit()
    },
    onSubmit: (formData) => {
....
return <ConfigForm
{...formConfig}
uiConfig={{
  layout,
  items: [
    {
      layout,
      label: '任务类型: ',
      comp: 'Input',
      schemaKey: 'taskLabel',
      props: {
        disabled: true,
      },
    },
    {
      layout,
      label: '任务时间: ',
      comp: 'DatePicker.RangePicker',
      schemaKey: 'taskTime',
      props: {
        disabledDate,
        disabled,
        onOk: onKeyUp
      },
    },
    {
      layout,
      label: '任务名称: ',
      comp: [
        {
          comp: 'Input',
          schemaKey: 'activityName',
          props: {
            trim: true,
            disabled,
            onKeyUp
          },
        }, {
          comp: 'span',
          children: '最多12个字符',
          props: {
            className: 'f-tips',
          },
        }],
      props: {},
    },
    {
      layout,
      label: '任务概要: ',
      comp: [
        {
          comp: 'Input',
          schemaKey: 'activityDes',
          props: {
            trim: true,
            disabled,
            onKeyUp
          },
        }, {
          comp: 'span',
          children: '最多24个字符',
          props: {
            className: 'f-tips',
          },
        }],
      props: {},
    },

上面我们只是截取了片段。

赞(0) 打赏
未经允许不得转载:前端学堂 » 基于config-form转向面向数据的编程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏