前端元编程：使用注解加速你的前端开发

 无论你用React，Vue，还是Angular，你还是要一遍一遍写相似的CRUD 页面，一遍一遍，一遍一遍，一遍又一遍……

麻阳网站建设公司创新互联公司,麻阳网站设计制作，有大型网站制作公司丰富经验。已为麻阳1000+提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的麻阳做网站的公司定做！

“天下苦秦久矣”～～

前端开发的“痛点”在哪里？

img

现在的前端开发，我们有了世界一流的UI库React，Vue，Angular，有了样式丰富的UI组件库Tea (腾讯云UI组件库，类似Antd Design)， 有了方便强大的脚手架工具(例如，create react app)。但是我们在真正业务代码之前，通常还免不了写大量的样板代码。

现在的CRUD页面代码通常：

1.  太轻的“Model”或着“Service”，大多时候只是一些API调用的封装。
2.  胖”View“，View页面中有展示UI逻辑，生命周期逻辑，CRUD的串联逻辑，然后还要塞满业务逻辑代码。
3.  不同的项目业务逻辑不同，但是列表页，表单，搜索这三板斧的样板代码，却要一遍一遍占据着前端工程师的宝贵时间。

特别是CRUD类应用的样板代码受限于团队风格，后端API风格，业务形态等，通常内在逻辑相似书写上却略有区别，无法通过一个通用的库或者框架来解决（上图中背景越深，越不容易有一个通用的方案）。

说好的“数据驱动的前端开发”呢？

对于这个“痛点”——怎么尽可能的少写模版代码，就是本文尝试解决的问题。

我们尝试使用JavaScript新特性 Decorator和 Reflect元编程来解决这个问题。

前端元编程

从ECMAScript 2015 开始，JavaScript 获得了 Proxy 和 Reflect 对象的支持，允许你拦截并定义基本语言操作的自定义行为（例如，属性查找，赋值，枚举，函数调用等）。借助这两个对象，你可以在 JavaScript 元级别进行编程。

在正式开始之前，我们先复习下 Decorator和 Reflect。

Decorator

这里我们简单介绍Typescript的 Decorator，ECMAScript中 Decorator尚未定稿，但是不影响我们日常的业务开发(Angular同学就在使用Typescript的 Decorator)。

简单来说， Decorator是可以标注修改类及其成员的新语言特性，使用 @expression的形式，可以附加到，类、方法、访问符、属性、参数上。

TypeScript中需要在 tsconfig.json中增加 experimentalDecorators来支持：

 
 
 
 

  
  
  
  
{ 
  
  
  
  
    "compilerOptions": { 
  
  
  
  
        "target": "ES5", 
  
  
  
  
        "experimentalDecorators": true 
  
  
  
  
    } 
  
  
  
  
}
 
 
 
 

比如可以使用类修饰器来为类扩展方法。

 
 
 
 

  
  
  
  
// offer type 
  
  
  
  
abstract class Base { 
  
  
  
  
  log() {} 
  
  
  
  
} 
  
  
  
  
function EnhanceClass() { 
  
  
  
  
  return function(Target) { 
  
  
  
  
    return class extends Target { 
  
  
  
  
      log() { 
  
  
  
  
        console.log('---log---') 
  
  
  
  
      } 
  
  
  
  
    } 
  
  
  
  
  } 
  
  
  
  
} 
  
  
  
  
@EnhanceClass() 
  
  
  
  
class Person extends Base { }
  
  
  
  
const person = new Person() 
  
  
  
  
person.log()  
  
  
  
  
// ---log---
 
 
 
 

更多查看 typescript 官方的文档:https://www.typescriptlang.org/docs/handbook/decorators.html

Reflect

Reflect 是ES6中就有的特性，大家可能对它稍微陌生，Vue3中依赖Reflect和Proxy来重写它的响应式逻辑。

简单来说， Reflect是一个人内置的对象，提供了拦截 JavaScript操作的方法。

 
 
 
 

  
  
  
  
const _list  = [1,2,3] 
  
  
  
  
const pList = new Proxy(_list,{ 
  
  
  
  
  get(target, key,receiver) { 
  
  
  
  
    console.log('get value reflect:', key) 
  
  
  
  
    return Reflect.get(target, key, receiver)
  
  
  
  
  }, 
  
  
  
  
  set(target,key,value,receiver) { 
  
  
  
  
    console.log('set value reflect',key,value) 
  
  
  
  
    return Reflect.set(target,key,value,receiver) 
  
  
  
  
  } 
  
  
  
  
}) 
  
  
  
  
pList.push(4) 
  
  
  
  
// get value reflect:push 
  
  
  
  
// get value reflect:length 
  
  
  
  
// set value reflect 3 4 
  
  
  
  
// set value reflect length 4
 
 
 
 

Reflect Metadata

Reflect Metadata 是ES7的一个提案，Typescript 1.5+就有了支持。要使用需要：

•  npm i reflect-metadata--save
•  在 tsconfig.json 里配置 emitDecoratorMetadata 选项

简单来说，Reflect Metadata能够为对象添加和读取元数据。

如下可以使用内置的 design:key拿到属性类型：

 
 
 
 

  
  
  
  
function Type(): PropertyDecorator { 
  
  
  
  
  return function(target,key) { 
  
  
  
  
    const type = Reflect.getMetadata('design:type',target,key) 
  
  
  
  
    console.log(`${key} type: ${type.name}`); 
  
  
  
  
  } 
  
  
  
  
} 
  
  
  
  
class Person extends Base { 
  
  
  
  
  @Type() 
  
  
  
  
  name:string = '' 
  
  
  
  
} 
  
  
  
  
// name type: String
 
 
 
 

使用Decorator,Reflect减少样板代码

回到正题——使用Decorator和Reflect来减少CRUD应用中的样板代码。

什么是CRUD页面？

img

CRUD页面无需多言，列表页展示，表单页修改 ……包括API调用， 都是围绕某个数据结构(图中 Person)展开，增、删、改、查。

基本思路

基本思路很简单，就像上图，Model是中心，我们就是借助 Decorator和 Reflect将CRUD页面所需的样板类方法属性元编程在Model上。进一步延伸数据驱动UI的思路。

img

1.  借助Reflect Matadata绑定CRUD页面信息到Model的属性上
2.  借助Decorator增强Model，生成CRUD所需的样板代码

Show Me The Code

下文，我们用TypeScript和React为例，组件库使用腾讯Tea component 解说这个方案。

首先我们有一个函数来生成不同业务的属性装饰函数。

 
 
 
 

  
  
  
  
function CreateProperDecoratorF() { 
  
  
  
  
  const metaKey = Symbol(); 
  
  
  
  
  function properDecoratorF(config:T): PropertyDecorator { 
  
  
  
  
    return function (target, key) { 
  
  
  
  
      Reflect.defineMetadata(metaKey, config, target, key); 
  
  
  
  
    }; 
  
  
  
  
  } 
  
  
  
  
  return { metaKey, properDecoratorF} 
  
  
  
  
}
 
 
 
 

一个类装饰器，处理通过数据装饰器收集上来的元数据。

 
 
 
 

  
  
  
  
export function EnhancedClass(config: ClassConfig) { 
  
  
  
  
  return function(Target) { 
  
  
  
  
    return class EnhancedClass extends Target { 
  
  
  
  
    } 
  
  
  
  
  } 
  
  
  
  
}
 
 
 
 

API Model 映射

TypeScript项目中第一步自然是将后端数据安全地转换为 type， interface或者 Class，这里Class能在编译后在JavaScript存在，我们选用 Class。

 
 
 
 

  
  
  
  
export interface TypePropertyConfig { 
  
  
  
  
  handle?: string | ServerHandle 
  
  
  
  
} 
  
  
  
  
const typeConfig = CreateProperDecoratorF() 
  
  
  
  
export const Type = typeConfig.properDecoratorF; 
  
  
  
  
@EnhancedClass({}) 
  
  
  
  
export class Person extends Base {
  
  
  
  
  static sexOptions = ['male' , 'female' , 'unknow']; 
  
  
  
  
  @Type({ 
  
  
  
  
    handle: 'ID' 
  
  
  
  
  }) 
  
  
  
  
  id: number = 0 
  
  
  
  
  @Type({}) 
  
  
  
  
  name:string = '' 
  
  
  
  
  @Type({ 
  
  
  
  
    handle(data,key)  { 
  
  
  
  
      return parseInt(data[key] || '0') 
  
  
  
  
    } 
  
  
  
  
  }) 
  
  
  
  
  age:number = 0 
  
  
  
  
  @Type({ 
  
  
  
  
    handle(data,key)  { 
  
  
  
  
      return Person.sexOptions.includes(data[key]) ? data[key] : 'unknow' 
  
  
  
  
    } 
  
  
  
  
  }) 
  
  
  
  
  sex: 'male' | 'female' | 'unknow' = 'unknow' 
  
  
  
  
}
 
 
 
 

重点在 handle?:string|ServerHandle函数，在这个函数处理API数据和前端数据的转换，然后在 constructor中集中处理。

 
 
 
 

  
  
  
  
export function EnhancedClass(config: ClassConfig) { 
  
  
  
  
  return function(Target) { 
  
  
  
  
    return class EnhancedClass extends Target { 
  
  
  
  
      constructor(data) { 
  
  
  
  
        super(data) 
  
  
  
  
        Object.keys(this).forEach(key => { 
  
  
  
  
          const config:TypePropertyConfig = Reflect.getMetadata(typeConfig.metaKey,this,key) 
  
  
  
  
          this[key] = config.handle ? typeof config.handle === 'string' ? data[config.handle]:config.handle(data,key): data[key]; 
  
  
  
  
        }) 
  
  
  
  
      } 
  
  
  
  
    } 
  
  
  
  
  } 
  
  
  
  
}
 
 
 
 

列表页TablePage

列表页中一般使用Table组件，无论是Tea Component还是Antd Design Component中，样板代码自然就是写那一大堆Colum配置了，配置哪些key要展示，表头是什么，数据转化为显示数据……

首先我们收集Tea Table 所需的 TableColumn类型的column元数据。

 
 
 
 

  
  
  
  
import {TableColumn} from 'tea-component/lib/table' 
  
  
  
  
export type EnhancedTableColumn = TableColumn;
  
  
  
  
export type ColumnPropertyConfig = Partial>; 
  
  
  
  
const columnConfig = CreateProperDecoratorF() 
  
  
  
  
export const Column = columnConfig.properDecoratorF; 
  
  
  
  
@EnhancedClass({}) 
  
  
  
  
export class Person extends Base { 
  
  
  
  
  static sexOptions = ['male' , 'female' , 'unknow'];
  
  
  
  
  id: number = 0 
  
  
  
  
  @Column({ 
  
  
  
  
    header: 'person name' 
  
  
  
  
  }) 
  
  
  
  
  name:string = '' 
  
  
  
  
  @Column({ 
  
  
  
  
    header: 'person age'
  
  
  
  
  }) 
  
  
  
  
  age:number = 0 
  
  
  
  
  @Column({}) 
  
  
  
  
  sex: 'male' | 'female' | 'unknow' = 'unknow' 
  
  
  
  
}
 
 
 
 

然后在EnhancedClass中收集，生成column列表。

 
 
 
 

  
  
  
  
function getConfigMap(F: any, cachekey: symbol,metaKey: symbol): Map { 
  
  
  
  
  if (F[cachekey]) { 
  
  
  
  
    return F[cachekey]!; 
  
  
  
  
  } 
  
  
  
  
  const item = new F({}); 
  
  
  
  
  F[cachekey] = Object.keys(item).reduce((pre,cur) => { 
  
  
  
  
    const config: T = Reflect.getMetadata( 
  
  
  
  
      metaKey, 
  
  
  
  
      item, 
  
  
  
  
      cur 
  
  
  
  
    );
  
  
  
  
    if (config) { 
  
  
  
  
      pre.set(cur, config); 
  
  
  
  
    } 
  
  
  
  
    return pre 
  
  
  
  
  }, new Map()); 
  
  
  
  
  return F[cachekey]; 
  
  
  
  
}  
  
  
  
  
export function EnhancedClass(config: ClassConfig) { 
  
  
  
  
  const cacheColumnConfigKey = Symbol('cacheColumnConfigKey'); 
  
  
  
  
  return function(Target) { 
  
  
  
  
    return class EnhancedClass extends Target { 
  
  
  
  
      [cacheColumnConfigKey]: Map | null 
  
  
  
  
      /** 
  
  
  
  
       * table column config 
  
  
  
  
       */ 
  
  
  
  
      static get columnConfig(): Map { 
  
  
  
  
        return getConfigMap(EnhancedClass, cacheColumnConfigKey,columnConfig.metaKey) 
  
  
  
  
      } 
  
  
  
  
      /** 
  
  
  
  
       * get table colums 
  
  
  
  
       */ 
  
  
  
  
      static getColumns(): EnhancedTableColumn[] { 
  
  
  
  
        const list : EnhancedTableColumn[] = [] 
  
  
  
  
        EnhancedClass.columnConfig.forEach((config, key) => { 
  
  
  
  
          list.push({ 
  
  
  
  
            key, 
  
  
  
  
            header: key,
  
  
  
  
            ...config 
  
  
  
  
          }) 
  
  
  
  
        }) 
  
  
  
  
        return list 
  
  
  
  
      } 
  
  
  
  
    } 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

Table数据一般是分页，而且调用方式通常很通用，也可以在EnhancedClass中实现。

 
 
 
 

  
  
  
  
export interface PageParams { 
  
  
  
  
  pageIndex: number; 
  
  
  
  
  pageSize: number; 
  
  
  
  
} 
  
  
  
  
export interface Paginabale { 
  
  
  
  
  total: number; 
  
  
  
  
  list: T[] 
  
  
  
  
} 
  
  
  
  
export function EnhancedClass(config: ClassConfig) { 
  
  
  
  
  return function(Target) {
  
  
  
  
    return class EnhancedClass extends Target { 
  
  
  
  
       static async getList(params: PageParams): Promise> { 
  
  
  
  
        const result = await getPersonListFromServer(params) 
  
  
  
  
        return { 
  
  
  
  
          total: result.count, 
  
  
  
  
          list: result.data.map(item => new EnhancedClass(item)) 
  
  
  
  
        } 
  
  
  
  
      }
  
  
  
  
    } 
  
  
  
  
  } 
  
  
  
  
}
 
 
 
 

自然我们封装一个更简易的Table 组件。

 
 
 
 

  
  
  
  
import { Table as TeaTable } from "tea-component/lib/table"; 
  
  
  
  
import React, { FC ,useEffect, useState} from "react"; 
  
  
  
  
import { EnhancedTableColumn, Paginabale, PageParams } from './utils' 
  
  
  
  
import { Person } from "./person.service"; 
  
  
  
  
function Table(props: { 
  
  
  
  
  columns: EnhancedTableColumn[];
  
  
  
  
  getListFun: (param:PageParams) => Promise> 
  
  
  
  
}) { 
  
  
  
  
  const [isLoading,setIsLoading] = useState(false) 
  
  
  
  
  const [recordData,setRecordData] = useState>() 
  
  
  
  
  const [pageIndex, setPageIndex] = useState(1); 
  
  
  
  
  const [pageSize, setPageSize] = useState(20); 
  
  
  
  
  useEffect(() => { 
  
  
  
  
    (async () => { 
  
  
  
  
      setIsLoading(true) 
  
  
  
  
      const result = await props.getListFun({ 
  
  
  
  
        pageIndex, 
  
  
  
  
        pageSize 
  
  
  
  
      }) 
  
  
  
  
      setIsLoading(false) 
  
  
  
  
      setRecordData(result) 
  
  
  
  
    })(); 
  
  
  
  
  },[pageIndex,pageSize]);
  
  
  
  
   return ( 
  
  
  
  
    
  
  
  
  
      columns={props.columns}  
  
  
  
  
      records={recordData ? recordData.list : []}  
  
  
  
  
      addons={[ 
  
  
  
  
        TeaTable.addons.pageable({ 
  
  
  
  
            recordCount:recordData ? recordData.total : 0,
  
  
  
  
             pageIndex, 
  
  
  
  
            pageSize, 
  
  
  
  
            onPagingChange: ({ pageIndex, pageSize }) => { 
  
  
  
  
              setPageIndex(pageIndex || 0); 
  
  
  
  
              setPageSize(pageSize || 20); 
  
  
  
  
            } 
  
  
  
  
          }), 
  
  
  
  
      ]} 
  
  
  
  
    /> 
  
  
  
  
) 
  
  
  
  
} 
  
  
  
  
export default Table
 
 
 
 

1.  getConfigMap(F:any,cachekey:symbol,metaKey:symbol):Map 收集元数据到Map
2.  staticgetColumns():EnhancedTableColumn[] 得到table可用column信息。

 
 
 
 

  
  
  
  
const App = () => { 
  
  
  
  
  const columns = Person.getColumns(); 
  
  
  
  
  const getListFun = useCallback((param: PageParams) => { 
  
  
  
  
    return Person.getList(param) 
  
  
  
  
  }, []) 
  
  
  
  
  return  columns={columns} getListFun={getListFun}/> 
  
  
  
  
}
 
 
 
 

 效果很明显，不是吗？7行写一个table page。

Form表单页

表单，自然就是字段的name，label，require，validate，以及提交数据的转换。

Form表单我们使用Formik + Tea Form Component + yup(数据校验)。Formik 使用React Context来提供表单控件所需的各种方法数据，然后借助提供的Field等组件，你可以很方便的封装你的业务表单组件。

 
 
 
 

  
  
  
  
import React, { FC } from 'react' 
  
  
  
  
import { Field, Form, Formik, FormikProps } from 'formik'; 
  
  
  
  
import { Form as TeaForm, FormItemProps } from "tea-component/lib/form"; 
  
  
  
  
import { Input, InputProps } from "tea-component/lib/input"; 
  
  
  
  
import { Select } from 'tea-component/lib/select'; 
  
  
  
  
type CustomInputProps = Partial & Pick; 
  
  
  
  
type CustomSelectProps = Partial & Pick & { 
  
  
  
  
  options: string[] 
  
  
  
  
} 
  
  
  
  
export const CustomInput:FC = props => { 
  
  
  
  
  return ( 
  
  
  
  
     
  
  
  
  
      { 
  
  
  
  
        ({ 
  
  
  
  
          field, // { name, value, onChange, onBlur } 
  
  
  
  
          form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc. 
  
  
  
  
          meta, 
  
  
  
  
        }) => { 
  
  
  
  
          return ( 
  
  
  
  
             
  
  
  
  
               { 
  
  
  
  
                field.onChange(ctx.event) 
  
  
  
  
              }} /> 
  
  
  
  
             
  
  
  
  
          ) 
  
  
  
  
        } 
  
  
  
  
      } 
  
  
  
  
     
  
  
  
  
  ) 
  
  
  
  
} 
  
  
  
  
export const CustomSelect:FC = props => { 
  
  
  
  
  return ( 
  
  
  
  
     
  
  
  
  
      { 
  
  
  
  
        ({ 
  
  
  
  
          field, // { name, value, onChange, onBlur }
  
  
  
  
          form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc. 
  
  
  
  
          meta, 
  
  
  
  
        }) => { 
  
  
  
  
          return ( 
  
  
  
  
             
  
  
  
  
              ({value}))} onChange={(value,ctx)=> { 
  
  
  
  
                field.onChange(ctx.event) 
  
  
  
  
              }} /> 
  
  
  
  
             
  
  
  
  
          ) 
  
  
  
  
        } 
  
  
  
  
      } 
  
  
  
  
     
  
  
  
  
  ) 
  
  
  
  
}
 
 
 
 

照猫画虎，我们还是先收集form所需的元数据

 
 
 
 

  
  
  
  
import * as Yup from 'yup'; 
  
  
  
  
export interface FormPropertyConfig { 
  
  
  
  
  validationSchema?: any; 
  
  
  
  
  label?: string; 
  
  
  
  
  handleSubmitData?: (data:any,key:string) => {[key:string]: any}, 
  
  
  
  
  required?: boolean; 
  
  
  
  
  initValue?: any; 
  
  
  
  
  options?: string[] 
  
  
  
  
} 
  
  
  
  
const formConfig = CreateProperDecoratorF() 
  
  
  
  
export const Form = formConfig.properDecoratorF; 
  
  
  
  
@EnhancedClass({}) 
  
  
  
  
export class Person extends Base { 
  
  
  
  
  static sexOptions = ['male' , 'female' , 'unknow']; 
  
  
  
  
  @Type({ 
  
  
  
  
    handle: 'ID' 
  
  
  
  
  }) 
  
  
  
  
  id: number = 0 
  
  
  
  
  @Form({ 
  
  
  
  
    label:"Name", 
  
  
  
  
    validationSchema: Yup.string().required('Name is required'), 
  
  
  
  
    handleSubmitData(data,key) { 
  
  
  
  
      return { 
  
  
  
  
        [key]: (data[key] as string).toUpperCase()
  
  
  
  
      } 
  
  
  
  
    }, 
  
  
  
  
    required: true, 
  
  
  
  
    initValue:'test name' 
  
  
  
  
  }) 
  
  
  
  
  name:string = '' 
  
  
  
  
  @Form({ 
  
  
  
  
    label:"Age", 
  
  
  
  
    validationSchema: Yup.string().required('Age is required'), 
  
  
  
  
    handleSubmitData(data,key) { 
  
  
  
  
      return { 
  
  
  
  
        [key]: parseInt(data[key] || '0')
  
  
  
  
      } 
  
  
  
  
    }, 
  
  
  
  
    required: true, 
  
  
  
  
  }) 
  
  
  
  
  age:number = 0 
  
  
  
  
  @Form({ 
  
  
  
  
    label:"Sex", 
  
  
  
  
    options: Person.sexOptions 
  
  
  
  
  }) 
  
  
  
  
  sex: 'male' | 'female' | 'unknow' = 'unknow' 
  
  
  
  
}
 
 
 
 

有了元数据，我们可以在EnhancedClass中生成form所需：

•  initialValues
•  数据校验的validationSchema
•  各个表单组件所需的，name，label，required等
•  提交表单的数据转换handle函数

 
 
 
 

  
  
  
  
export type FormItemConfigType = { 
  
  
  
  
  [key in keyof T]: { 
  
  
  
  
    validationSchema?: any; 
  
  
  
  
    handleSubmitData?: FormPropertyConfig['handleSubmitData']; 
  
  
  
  
    form: { 
  
  
  
  
      label: string; 
  
  
  
  
      name: string; 
  
  
  
  
      required: boolean; 
  
  
  
  
      message?: string; 
  
  
  
  
      options: string[]; 
  
  
  
  
    }; 
  
  
  
  
  }; 
  
  
  
  
}; 
  
  
  
  
export function EnhancedClass(config: ClassConfig) { 
  
  
  
  
  return function(Target) { 
  
  
  
  
    return class EnhancedClass extends Target {
  
  
  
  
      [cacheTypeConfigkey]: Map | null 
  
  
  
  
      /** 
  
  
  
  
       * table column config 
  
  
  
  
       */ 
  
  
  
  
      static get formConfig(): Map {
  
  
  
  
        return getConfigMap(EnhancedClass, cacheTypeConfigkey,formConfig.metaKey) 
  
  
  
  
      } 
  
  
  
  
      /** 
  
  
  
  
       * get form init value 
  
  
  
  
       */ 
  
  
  
  
      static getFormInitValues(item?: T): Partial { 
  
  
  
  
        const data:any  = {}; 
  
  
  
  
        const _item = new EnhancedClass({}); 
  
  
  
  
        EnhancedClass.formConfig.forEach((config,key) => { 
  
  
  
  
          if (item && key in item) { 
  
  
  
  
            data[key]  = item[key] 
  
  
  
  
          } else if ('initValue' in config) { 
  
  
  
  
            data[key]  = config.initValue 
  
  
  
  
          } else { 
  
  
  
  
            data[key] = _item[key] || '' 
  
  
  
  
          } 
  
  
  
  
        }); 
  
  
  
  
        return data as Partial 
  
  
  
  
      }  
  
  
  
  
      static getFormItemConfig(overwriteConfig?: { 
  
  
  
  
        [key: string]: any; 
  
  
  
  
      }): FormItemConfigType { 
  
  
  
  
        const formConfig: any = {}; 
  
  
  
  
        EnhancedClass.formConfig.forEach((config,key) => { 
  
  
  
  
          formConfig[key] = { 
  
  
  
  
            form: { 
  
  
  
  
              label: String(config.label || key), 
  
  
  
  
              name: String(key), 
  
  
  
  
              required: !!config.validationSchema, 
  
  
  
  
              options: config.options || [], 
  
  
  
  
              ...overwriteConfig
  
  
  
  
            } 
  
  
  
  
          }; 
  
  
  
  
          if (config.validationSchema) { 
  
  
  
  
            formConfig[key].validationSchema = config.validationSchema; 
  
  
  
  
          } 
  
  
  
  
          if (config.handleSubmitData) { 
  
  
  
  
            formConfig[key].handleSubmitData = config.handleSubmitData; 
  
  
  
  
          } 
  
  
  
  
        }) 
  
  
  
  
        return formConfig as FormItemConfigType 
  
  
  
  
      }
  
  
  
  
      static handleToFormData(item: T) { 
  
  
  
  
        let data = {} 
  
  
  
  
        EnhancedClass.formConfig.forEach((config,key)=> { 
  
  
  
  
          if (item.hasOwnProperty(key)) { 
  
  
  
  
            data = { 
  
  
  
  
              ...data,
  
  
  
  
              ...(EnhancedClass.formConfig 
  
  
  
  
                .get(key).handleSubmitData ? EnhancedClass.formConfig 
  
  
  
  
                .get(key).handleSubmitData(item, key) : { 
  
  
  
  
                [key]: item[key] || '' 
  
  
  
  
              }) 
  
  
  
  
            }; 
  
  
  
  
          }       
  
  
  
  
         }) 
  
  
  
  
        return data 
  
  
  
  
      } 
  
  
  
  
    } 
  
  
  
  
  } 
  
  
  
  
}
 
 
 
 

在FormPage中使用

 
 
 
 

  
  
  
  
export const PersonForm:FC<{ 
  
  
  
  
  onClose: () => void 
  
  
  
  
}> = props => { 
  
  
  
  
  const initialValues = Person.getFormInitValues() 
  
  
  
  
  const formConfig = Person.getFormItemConfig(); 
  
  
  
  
  const&nb            

                标题名称：前端元编程：使用注解加速你的前端开发
                

                分享地址：http://www.mswzjz.com/qtweb/news8/187158.html
            
            

                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
            

                广告
                
            
            

                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联