美文网首页
informed源码解析

informed源码解析

作者: shuta | 来源:发表于2019-02-25 17:41 被阅读0次

    informed的源码有三个重点: FormController和FieldController以及withFieldStuff函数。他们的关系如下所示:


    image.png

    FormController

    FormController是核心。它有三个属性: valuesfield,以及errorsvalueserrors的数据类型ObjectMap(为什么要用这个数据格式我没有搞懂),fieldmap类型,一个fieldName绑定一个对应的fieldController。FormController 继承EventEmitter,继承这个库在以下功能中都有用到。这里主要介绍setValue/getValue/register方法

    ObjectMap

    ObjectMap的数据类型有三个属性:objects, map,pathpath的格式是这样的

    {
          'a.b.c':[a,b,c],
          'a.b[1]':[a, b, 1]
    }
    

    objects就是fieldNamevalue的一一对应,比如:

    {
           a:{
                b:{
                    c: 'hello'
                }
          }
    }
    

    map的数据格式如下所示

    image.png

    这个class有还有getset方法。基本上就是遍历设置和获取对应field的值。
    这里我有一个疑问了,我刷了整个informed的方法,用到map的寥寥无几,这个属性有存在的必要吗?

    values

    values中存储的是每一个包含在form表单中组件的值。它是一个特殊的数据格式(ObjectMap)
    和这个属性相关的有两个函数: setValuegetValue,顾名思义。

    • setValue
      setValue的代码如下:
    this.values.set(
          field,
          fieldController.config.mask ? fieldController.config.mask(value) : value
        ); 
    ...
    this.emit('change', this.state);
    this.emit('values', this.state.values);
    this.emit('field', field);
    

    重点是这三个事件changevaluesfield。那么接收change事件调用的函数在Form组件中的constructor

     this.controller.on('change', () => this.forceUpdate());
    

    调用的是react的forceUpdate方法。会让form下的所有子组件重新渲染。
    接收field事件的函数,是在withFieldStuff函数中。

    const buildFieldState = (formApi, field) => {
      return {
        value: formApi.getValue(field),
        touched: formApi.getTouched(field), //touch并不知道干嘛用的
        error: formApi.getError(field),
        asyncError: formApi.getAsyncError(field)
      };
    };
    ....
    const updateMe = name => {
         if (name === formApi.getFullField(field)) {
                  //重新获取field对应新的value的值
                  this.setState(buildFieldState(formApi, field));
        }
     };
    
    controller.on('field', updateMe);
    

    以上代码,当接收到field事件时,每一个包裹Field的input,都会从FormController中重新获取当前field的最新的值。

    FieldController

    FieldController的代码如下所示:

    
    class FieldController {
      constructor(field, api, config) {
        this.field = field;
        this.config = config;
        this.api = api;
      }
      validate(values) {
        if (this.config.validate) {
          return this.config.validate(this.api.getValue(), values);
        }
      }
      asyncValidate(values) {
        if (this.config.asyncValidate) {
          return this.config.asyncValidate(this.api.getValue(), values);
        }
      }
      updateConfig(config) {
        this.config = config;
      }
    }
    

    FieldController主要对传入的this.config.validate函数进行一层封装。创建FieldController函数的代码如下所示:

    this.fieldController = new FieldController(
                  formApi.getFullField(field),
                  this.fieldApi,
                  {
                    validateOnBlur,
                    validateOnChange,
                    validate,
                    onValueChange,
                    asyncValidate,
                    asyncValidateOnBlur,
                    initialValue,
                    validateOnMount,
                    notify,
                    mask
                  }
                );
    
    

    Field初始化时(constructor ),会为每一个field创建一个controller。
    那什么时候使用这个constroller的valiate函数呢?在formControllersetValuesetTouched函数都有,前提要配置一些参数

    setValue函数中的,如果配置了validateOnChange

    ...
     if (fieldController.config.validateOnChange) {
          this.errors.set(field, fieldController.validate(this.state.values));
          // We changed so notify all other fields
          this.notify(fieldController.config.notify);
        }
    ...
    

    setTouched函数,如果配置了validateOnBlur

    if (fieldController.config.validateOnBlur) {
          this.errors.set(field, fieldController.validate(this.state.values));
          // We changed so notify all other fields
          this.notify(fieldController.config.notify);
        }
    

    withFieldStuff函数

    withFieldStuff函数是连接FieldControllerFormController之间的桥梁。同时也从formApi中获取本field相关的函数和值。主要的函数是register函数。该函数会在Field组件componentDidMount中调用

    class Field extends PureComponent  {
     constructor(props) {
        super(props);
        this.me = React.createRef();
      }
    
     componentDidMount() {
      
        this.props.register();
      }
    
    }
    

    接下来看register函数的流程。

    image.png

    整个informed源码的重点部分就说完了

    问题:
    1.如果我在组件A中需要用到组件B的值?(这个在表单中非常常见)
    2.作者创建一个objectMap数据类型意义何在?

    以后的话:
    我看的这个版本的informed源码是比较老。新的版本又出了,使用了hook的技术。所以这个系列未完待续。

    `

    相关文章

      网友评论

          本文标题:informed源码解析

          本文链接:https://www.haomeiwen.com/subject/qxabdqtx.html