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

开发 前端
现在的前端开发,我们有了世界一流的UI库React,Vue,Angular,有了样式丰富的UI组件库Tea , 有了方便强大的脚手架工具。但是我们在真正业务代码之前,通常还免不了写大量的样板代码。

[[411676]]

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

“天下苦秦久矣”~~

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

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来支持: 

  1.  
  2.     "compilerOptions": {  
  3.         "target": "ES5",  
  4.         "experimentalDecorators": true  
  5.     }  

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

  1. // offer type  
  2. abstract class Base {  
  3.   log() {}  
  4.  
  5. function EnhanceClass() {  
  6.   return function(Target) {  
  7.     return class extends Target {  
  8.       log() {  
  9.         console.log('---log---')  
  10.       }  
  11.     }  
  12.   }  
  13.  
  14. @EnhanceClass()  
  15. class Person extends Base { } 
  16. const person = new Person()  
  17. person.log()   
  18. // ---log--- 

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

Reflect

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

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

  1. const _list  = [1,2,3]  
  2. const pList = new Proxy(_list,{  
  3.   get(target, key,receiver) {  
  4.     console.log('get value reflect:', key)  
  5.     return Reflect.get(target, key, receiver) 
  6.   },  
  7.   set(target,key,value,receiver) {  
  8.     console.log('set value reflect',key,value)  
  9.     return Reflect.set(target,key,value,receiver)  
  10.   }  
  11. })  
  12. pList.push(4)  
  13. // get value reflect:push  
  14. // get value reflect:length  
  15. // set value reflect 3 4  
  16. // 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拿到属性类型: 

  1. function Type(): PropertyDecorator {  
  2.   return function(target,key) {  
  3.     const type = Reflect.getMetadata('design:type',target,key)  
  4.     console.log(`${key} type: ${type.name}`);  
  5.   }  
  6.  
  7. class Person extends Base {  
  8.   @Type()  
  9.   name:string = ''  
  10.  
  11. // 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 解说这个方案。

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

  1. function CreateProperDecoratorF<T>() {  
  2.   const metaKey = Symbol();  
  3.   function properDecoratorF(config:T): PropertyDecorator {  
  4.     return function (target, key) {  
  5.       Reflect.defineMetadata(metaKey, config, target, key);  
  6.     };  
  7.   }  
  8.   return { metaKey, properDecoratorF}  

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

  1. export function EnhancedClass(config: ClassConfig) {  
  2.   return function(Target) {  
  3.     return class EnhancedClass extends Target {  
  4.     }  
  5.   }  

API Model 映射

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

  1. export interface TypePropertyConfig {  
  2.   handle?: string | ServerHandle  
  3.  
  4. const typeConfig = CreateProperDecoratorF<TypePropertyConfig>()  
  5. export const Type = typeConfig.properDecoratorF;  
  6. @EnhancedClass({})  
  7. export class Person extends Base { 
  8.   static sexOptions = ['male' , 'female' , 'unknow'];  
  9.   @Type({  
  10.     handle: 'ID'  
  11.   })  
  12.   id: number = 0  
  13.   @Type({})  
  14.   name:string = ''  
  15.   @Type({  
  16.     handle(data,key)  {  
  17.       return parseInt(data[key] || '0')  
  18.     }  
  19.   })  
  20.   age:number = 0  
  21.   @Type({  
  22.     handle(data,key)  {  
  23.       return Person.sexOptions.includes(data[key]) ? data[key] : 'unknow'  
  24.     }  
  25.   })  
  26.   sex: 'male' | 'female' | 'unknow' = 'unknow'  

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

  1. export function EnhancedClass(config: ClassConfig) {  
  2.   return function(Target) {  
  3.     return class EnhancedClass extends Target {  
  4.       constructor(data) {  
  5.         super(data)  
  6.         Object.keys(this).forEach(key => {  
  7.           const config:TypePropertyConfig = Reflect.getMetadata(typeConfig.metaKey,this,key)  
  8.           this[key] = config.handle ? typeof config.handle === 'string' ? data[config.handle]:config.handle(data,key): data[key];  
  9.         })  
  10.       }  
  11.     }  
  12.   }  

列表页TablePage

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

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

  1. import {TableColumn} from 'tea-component/lib/table'  
  2. export type EnhancedTableColumn<T> = TableColumn<T>
  3. export type ColumnPropertyConfig = Partial<EnhancedTableColumn<any>> 
  4. const columnConfig = CreateProperDecoratorF<ColumnPropertyConfig>()  
  5. export const Column = columnConfig.properDecoratorF;  
  6. @EnhancedClass({})  
  7. export class Person extends Base {  
  8.   static sexOptions = ['male' , 'female' , 'unknow']; 
  9.   id: number = 0  
  10.   @Column({  
  11.     header: 'person name'  
  12.   })  
  13.   name:string = ''  
  14.   @Column({  
  15.     header: 'person age' 
  16.   })  
  17.   age:number = 0  
  18.   @Column({})  
  19.   sex: 'male' | 'female' | 'unknow' = 'unknow'  

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

  1. function getConfigMap<T>(F: any, cachekey: symbol,metaKey: symbol): Map<string,T> {  
  2.   if (F[cachekey]) {  
  3.     return F[cachekey]!;  
  4.   }  
  5.   const item = new F({});  
  6.   F[cachekey] = Object.keys(item).reduce((pre,cur) => {  
  7.     const config: T = Reflect.getMetadata(  
  8.       metaKey,  
  9.       item,  
  10.       cur  
  11.     ); 
  12.     if (config) {  
  13.       pre.set(cur, config);  
  14.     }  
  15.     return pre  
  16.   }, new Map<string, T>());  
  17.   return F[cachekey];  
  18.   
  19. export function EnhancedClass(config: ClassConfig) {  
  20.   const cacheColumnConfigKey = Symbol('cacheColumnConfigKey');  
  21.   return function(Target) {  
  22.     return class EnhancedClass extends Target {  
  23.       [cacheColumnConfigKey]: Map<string,ColumnPropertyConfig> | null  
  24.       /**  
  25.        * table column config  
  26.        */  
  27.       static get columnConfig(): Map<string,ColumnPropertyConfig> {  
  28.         return getConfigMap<ColumnPropertyConfig>(EnhancedClass, cacheColumnConfigKey,columnConfig.metaKey)  
  29.       }  
  30.       /**  
  31.        * get table colums  
  32.        */  
  33.       static getColumns<T>(): EnhancedTableColumn<T>[] {  
  34.         const list : EnhancedTableColumn<T>[] = []  
  35.         EnhancedClass.columnConfig.forEach((config, key) => {  
  36.           list.push({  
  37.             key,  
  38.             header: key, 
  39.             ...config  
  40.           })  
  41.         })  
  42.         return list  
  43.       }  
  44.     }  
  45.   }  
  46.  

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

  1. export interface PageParams {  
  2.   pageIndex: number;  
  3.   pageSize: number;  
  4.  
  5. export interface Paginabale<T> {  
  6.   total: number;  
  7.   list: T[]  
  8.  
  9. export function EnhancedClass(config: ClassConfig) {  
  10.   return function(Target) { 
  11.     return class EnhancedClass extends Target {  
  12.        static async getList<T>(params: PageParams): Promise<Paginabale<T>> {  
  13.         const result = await getPersonListFromServer(params)  
  14.         return {  
  15.           total: result.count,  
  16.           list: result.data.map(item => new EnhancedClass(item))  
  17.         }  
  18.       } 
  19.     }  
  20.   }  

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

  1. import { Table as TeaTable } from "tea-component/lib/table";  
  2. import React, { FC ,useEffect, useState} from "react";  
  3. import { EnhancedTableColumn, Paginabale, PageParams } from './utils'  
  4. import { Person } from "./person.service";  
  5. function Table<T>(props: {  
  6.   columns: EnhancedTableColumn<T>[]; 
  7.   getListFun: (param:PageParams) => Promise<Paginabale<T>>  
  8. }) {  
  9.   const [isLoading,setIsLoading] = useState(false)  
  10.   const [recordData,setRecordData] = useState<Paginabale<T>>()  
  11.   const [pageIndex, setPageIndex] = useState(1);  
  12.   const [pageSize, setPageSize] = useState(20);  
  13.   useEffect(() => {  
  14.     (async () => {  
  15.       setIsLoading(true)  
  16.       const result = await props.getListFun({  
  17.         pageIndex,  
  18.         pageSize  
  19.       })  
  20.       setIsLoading(false)  
  21.       setRecordData(result)  
  22.     })();  
  23.   },[pageIndex,pageSize]); 
  24.    return (  
  25.     <TeaTable   
  26.       columns={props.columns}   
  27.       records={recordData ? recordData.list : []}   
  28.       addons={[  
  29.         TeaTable.addons.pageable({  
  30.             recordCount:recordData ? recordData.total : 0, 
  31.              pageIndex,  
  32.             pageSize,  
  33.             onPagingChange: ({ pageIndex, pageSize }) => {  
  34.               setPageIndex(pageIndex || 0);  
  35.               setPageSize(pageSize || 20);  
  36.             }  
  37.           }),  
  38.       ]}  
  39.     />  
  40.  
  41.  
  42. export default Table 
  1.  getConfigMap<T>(F:any,cachekey:symbol,metaKey:symbol):Map<string,T> 收集元数据到Map
  2.  staticgetColumns<T>():EnhancedTableColumn<T>[] 得到table可用column信息。 
  1. const App = () => {  
  2.   const columns = Person.getColumns<Person>();  
  3.   const getListFun = useCallback((param: PageParams) => {  
  4.     return Person.getList<Person>(param)  
  5.   }, [])  
  6.   return <Table<Person> columns={columns} getListFun={getListFun}/>  

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

Form表单页

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

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

  1. import React, { FC } from 'react'  
  2. import { Field, Form, Formik, FormikProps } from 'formik';  
  3. import { Form as TeaForm, FormItemProps } from "tea-component/lib/form";  
  4. import { Input, InputProps } from "tea-component/lib/input";  
  5. import { Select } from 'tea-component/lib/select';  
  6. type CustomInputProps = Partial<InputProps> & Pick<FormItemProps, "label" | "name"> 
  7. type CustomSelectProps = Partial<InputProps> & Pick<FormItemProps, "label" | "name"> & {  
  8.   options: string[]  
  9.  
  10. export const CustomInput:FC<CustomInputProps> = props => {  
  11.   return (  
  12.     <Field name={props.name}>  
  13.       {  
  14.         ({  
  15.           field, // { name, value, onChange, onBlur }  
  16.           form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.  
  17.           meta,  
  18.         }) => {  
  19.           return (  
  20.             <TeaForm.Item label={props.label} required={props.required} status={meta.touched &&  meta.error ? 'error': undefined } message={meta.error}>  
  21.               <Input type="text" {...field} onChange={(value,ctx)=> {  
  22.                 field.onChange(ctx.event)  
  23.               }} />  
  24.             </TeaForm.Item>  
  25.           )  
  26.         }  
  27.       }  
  28.     </Field>  
  29.   )  
  30.  
  31. export const CustomSelect:FC<CustomSelectProps> = props => {  
  32.   return (  
  33.     <Field name={props.name}>  
  34.       {  
  35.         ({  
  36.           field, // { name, value, onChange, onBlur } 
  37.           form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.  
  38.           meta,  
  39.         }) => {  
  40.           return (  
  41.             <TeaForm.Item label={props.label} required={props.required} status={meta.touched &&  meta.error ? 'error': undefined } message={meta.error}>  
  42.               <Select  {...field} options={props.options.map(value=>({value}))} onChange={(value,ctx)=> {  
  43.                 field.onChange(ctx.event)  
  44.               }} />  
  45.             </TeaForm.Item>  
  46.           )  
  47.         }  
  48.       }  
  49.     </Field>  
  50.   )  

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

  1. import * as Yup from 'yup';  
  2. export interface FormPropertyConfig {  
  3.   validationSchema?: any;  
  4.   label?: string;  
  5.   handleSubmitData?: (data:any,key:string) => {[key:string]: any},  
  6.   required?: boolean;  
  7.   initValue?: any;  
  8.   options?: string[]  
  9.  
  10. const formConfig = CreateProperDecoratorF<FormPropertyConfig>()  
  11. export const Form = formConfig.properDecoratorF;  
  12. @EnhancedClass({})  
  13. export class Person extends Base {  
  14.   static sexOptions = ['male' , 'female' , 'unknow'];  
  15.   @Type({  
  16.     handle: 'ID'  
  17.   })  
  18.   id: number = 0  
  19.   @Form({  
  20.     label:"Name",  
  21.     validationSchema: Yup.string().required('Name is required'),  
  22.     handleSubmitData(data,key) {  
  23.       return {  
  24.         [key]: (data[key] as string).toUpperCase() 
  25.       }  
  26.     },  
  27.     required: true,  
  28.     initValue:'test name'  
  29.   })  
  30.   name:string = ''  
  31.   @Form({  
  32.     label:"Age",  
  33.     validationSchema: Yup.string().required('Age is required'),  
  34.     handleSubmitData(data,key) {  
  35.       return {  
  36.         [key]: parseInt(data[key] || '0') 
  37.       }  
  38.     },  
  39.     required: true,  
  40.   })  
  41.   age:number = 0  
  42.   @Form({  
  43.     label:"Sex",  
  44.     options: Person.sexOptions  
  45.   })  
  46.   sex: 'male' | 'female' | 'unknow' = 'unknow'  

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

  •  initialValues
  •  数据校验的validationSchema
  •  各个表单组件所需的,name,label,required等
  •  提交表单的数据转换handle函数 
  1. export type FormItemConfigType<T extends any> = {  
  2.   [key in keyof T]: {  
  3.     validationSchema?: any;  
  4.     handleSubmitData?: FormPropertyConfig['handleSubmitData'];  
  5.     form: {  
  6.       label: string;  
  7.       name: string;  
  8.       required: boolean;  
  9.       message?: string;  
  10.       options: string[];  
  11.     };  
  12.   };  
  13. };  
  14. export function EnhancedClass(config: ClassConfig) {  
  15.   return function(Target) {  
  16.     return class EnhancedClass extends Target { 
  17.       [cacheTypeConfigkey]: Map<string,FormPropertyConfig> | null  
  18.       /**  
  19.        * table column config  
  20.        */  
  21.       static get formConfig(): Map<string,FormPropertyConfig> { 
  22.         return getConfigMap<FormPropertyConfig>(EnhancedClass, cacheTypeConfigkey,formConfig.metaKey)  
  23.       }  
  24.       /**  
  25.        * get form init value  
  26.        */  
  27.       static getFormInitValues<T extends EnhancedClass>(item?: T): Partial<T> {  
  28.         const data:any  = {};  
  29.         const _item = new EnhancedClass({});  
  30.         EnhancedClass.formConfig.forEach((config,key) => {  
  31.           if (item && key in item) {  
  32.             data[key]  = item[key]  
  33.           } else if ('initValue' in config) {  
  34.             data[key]  = config.initValue  
  35.           } else {  
  36.             data[key] = _item[key] || ''  
  37.           }  
  38.         });  
  39.         return data as Partial<T>  
  40.       }   
  41.       static getFormItemConfig<T extends EnhancedClass>(overwriteConfig?: {  
  42.         [key: string]: any;  
  43.       }): FormItemConfigType<T> {  
  44.         const formConfig: any = {};  
  45.         EnhancedClass.formConfig.forEach((config,key) => {  
  46.           formConfig[key] = {  
  47.             form: {  
  48.               label: String(config.label || key),  
  49.               name: String(key),  
  50.               required: !!config.validationSchema,  
  51.               options: config.options || [],  
  52.               ...overwriteConfig 
  53.             }  
  54.           };  
  55.           if (config.validationSchema) {  
  56.             formConfig[key].validationSchema = config.validationSchema;  
  57.           }  
  58.           if (config.handleSubmitData) {  
  59.             formConfig[key].handleSubmitData = config.handleSubmitData;  
  60.           }  
  61.         })  
  62.         return formConfig as FormItemConfigType<T>  
  63.       } 
  64.       static handleToFormData<T extends EnhancedClass>(item: T) {  
  65.         let data = {}  
  66.         EnhancedClass.formConfig.forEach((config,key)=> {  
  67.           if (item.hasOwnProperty(key)) {  
  68.             data = {  
  69.               ...data, 
  70.               ...(EnhancedClass.formConfig  
  71.                 .get(key).handleSubmitData ? EnhancedClass.formConfig  
  72.                 .get(key).handleSubmitData(item, key) : {  
  73.                 [key]: item[key] || ''  
  74.               })  
  75.             };  
  76.           }        
  77.          })  
  78.         return data  
  79.       }  
  80.     }  
  81.   }  

在FormPage中使用 

  1. export const PersonForm:FC< 
  2.   onClose: () => void  
  3. }> = props => {  
  4.   const initialValues = Person.getFormInitValues<Person>()  
  5.   const formConfig = Person.getFormItemConfig<Person>();  
  6.   const schema = Object.entries(formConfig).reduce((pre, [key, value]) => {  
  7.     if (value.validationSchema) {  
  8.       pre[key] = value.validationSchema;  
  9.     }  
  10.     return pre;  
  11.   }, {});  
  12.   const validationSchema = Yup.object().shape(schema);  
  13.   function onSubmit(values) {  
  14.     const data = Person.handleToFormData(values);  
  15.     setTimeout(() => { 
  16.       console.log('---send to server', data)  
  17.       props.onClose()  
  18.     },10000)  
  19.   }  
  20.   return (  
  21.     <Formik  
  22.        initialValues={initialValues}   
  23.       onSubmit={onSubmit}   
  24.       validationSchema={validationSchema}  
  25.     >  
  26.       {(formProps:FormikProps<any>) => {  
  27.         return (  
  28.           <TeaForm >  
  29.             <CustomInput {...formConfig.name.form} />  
  30.             <CustomInput {...formConfig.age.form} />  
  31.             <CustomSelect {...formConfig.sex.form} />  
  32.             <Button type="primary" htmlType="submit" onClick={() => {  
  33.               formProps.submitForm()  
  34.             }} >Submit</Button>  
  35.           </TeaForm> 
  36.         )  
  37.       }}  
  38.     </Formik>  
  39.   )  

40行,我们有了个一个功能完备表单页

效果参阅:

https://stackblitz.com/edit/ts-model-decorator?embed=1&file=index.tsx&theme=dark

元编程减少样板代码Demo:

https://stackblitz.com/edit/ts-model-decorator

效果

上文包含了不少的代码,但是大部头在如何将元数据转换成为页面组件可用的数据,也就是元编程的部分。

而业务页面,7行的Table页面,40行的Form页面,已经非常精简功能完备了。根据笔者实际项目中估计,可以节省至少40%的代码量。

元编程 vs. 配置系统

写到尾声,你大概会想到某些配置系统,前端CRUD这个从古就有的需求,自然早就有方案,用的最多的就是配置系统,在这里不会过多讨论。

简单来说,就是一个单独的系统,配置类似上文的元信息,然后使用固定模版生成代码。

思路实际上和本文的元编程类似,只是元编程成本低,你不需要单独做一个系统,更加轻量灵活,元编程代码在运行时,想象空间更大……

总结

上面只是table,form页面的代码展示,由此我们可以引申到很多类似的地方,甚至API的调用代码都可以在元编程中处理。

img

元编程——将元数据转换成为页面组件可用的数据,这部分恰恰可以在团队内非常好共享也需要共同维护的部分,带来的好处也很明显:

  •  最大的好处自然就是生产效率的提高了,而且是低成本的实现效率的提升(相比配置系统)。一些简单单纯的CURD页面甚至都不用写代码了。
  •  更易维护的代码:
  1.  “瘦View“,专注业务,
  2.  更纯粹的Model,你可以和redux,mobx配合,甚至,你可以从React,换成Angular)
  •  最后更重要的是,元编程是一个低成本,灵活,渐进的方案。它是一个运行时的方案,你不需要一步到罗马,徐徐图之…… ……

    img

最后,本文更多是一次实践,一种思路,一种元编程在前端开发中的应用场景,最重要的还是抛砖引玉,希望前端小伙伴们能形成自己团队的的元编程实践,来解放生产力,更快搬砖~

 

责任编辑:庞桂玉 来源: 前端大全
相关推荐

2018-01-27 21:19:06

前端Rust Service

2020-03-16 09:45:09

前端docker代码

2021-10-09 11:17:54

前端函数编程

2020-09-01 12:23:01

CDN加速前端

2020-06-22 07:27:57

前端开发工具

2022-04-29 08:55:43

前端开发规范

2016-09-08 16:04:59

JavaDocker前端

2020-09-24 17:15:11

前端Web移动

2020-07-22 08:27:26

函数监控前端

2021-06-01 05:16:49

前端开发技术热点

2024-01-29 00:51:39

前端开发利器

2011-05-11 10:53:18

2012-09-29 11:13:15

Node.JS前端开发Node.js打包

2013-09-04 14:49:10

移动Web前端开发设计理念

2019-07-29 10:39:39

前端性能优化缓存

2019-07-17 22:07:14

前端开发框架

2012-07-13 00:03:08

WEB前端开发WEB开发

2011-09-30 10:18:50

Web

2012-06-21 11:02:43

前端开发

2020-03-08 21:37:13

JavaScript前端工具
点赞
收藏

51CTO技术栈公众号