• 如何设计好一个组件

    思路

    1. 分析主要功能
    2. 分析所有功能点
    3. 拆分组件（单一原则）
    4. 设计组件API接口（props、event、slot）
    5. 将各个功能散发到各个组件（解耦）
    6. 构建关系（组件通信）

    具体（通过Form表单来验证）

    一、分析主要功能

    用以收集、校验、提交数据。

    二、分析所有功能点

    • 单个表单数据的校验
    • 所有表单数据的校验
    • 清空所有表单数据
    • 清空单个表单数据

    三、拆分组件（单一原则）

    • Form 作为表单控件，用来管理整体数据的收集提交。按照单一原则来领取 Form 组件功能。（所有表单数据的校验、清空所有表单数据）。
    • 输入框、选择器、单选框、多选框等控件用来绑定数据，当数据改变之后需要去校验数据。按照单一原则不应该由表单内部来认领校验功能，如果校验给到表单，那么其他地方只是想用表单控件不需要校验数据。
    • FormItem 作为表单控件的包裹层，用来分担校验功能。认领单个表单数据的校验、清空单个表单数据。

    四、设计组件API

    Form：作为数据收集和数据校验数据

    一、props

    • 数据：model
    • 校验：rules

    二、event：

    • 不需要，是由用户主动调动，而不是触发事件返回给用户。

    三、slot

    • 作为 FormItem 的分发地

    FormItem：作为校验单项表单

    一、props

    • 需要校验值：prop

    二、event：

    • 不需要，由 Form 组件主动调起。

    三、slot

    • 需要，作为最后一层，一方面是承载表单控件。
    • 另一方面完成80%的功能，剩下20%留给用户。

    五、设计用例

    // 用例

    
        
    
    
        
    



data() {
    return {
        info: {
            username: '',
            password: ''
        },
        rules: {
            username: [
                {required: true, message: '用户名不能为空', trigger: 'blur'},
            ],
            password: [
                {required: true, message: '密码不能为空', trigger: 'blur'},
            ]
        }
    }
}

    五、将各个功能散发到各个组件（解耦）

    Form

    • 整体校验：validates() {}
    • 整体重置：resetFields() {}

    FormItem

    • 单个表单校验：validate() {}
    • 单个表单重置：resetField() {}

    六、构建关系（组件通信）

    一、问题：

    1. 问题：FormItem 保存单前表单的校验，那么 Form 如何能够主动通知 FormItem 去校验当前表单数据。
    2. 解决：通过在组件渲染过程中，Form 去收集每一个 FormItem 的实例。

    1. 问题：FormItem 在校验数据过程中，如何获取到当前表单传入的数据和规则。
    2. 解决：通过依赖注入，FormItem 去获取 Form 的实例，来获取数据和规则。

    1. 问题：FormItem 如何知道自己什么时候进行校验数据。
    2. 解决：表单控件（Input）在数据改变之后去通知 FormItem 去进行校验一次数据。

    实践

    带着上面的思路来分析下面的 form 表单

    1. // App.js
    2. "form" :model="info" :rules="rules">
    3.     <i-form-item prop="username">
    4.         <i-input v-model="info.username">i-input>
    5.     i-form-item>
    6.     <i-form-item prop="password">
    7.         <i-input v-model="info.password">i-input>
    8.     i-form-item>
    10.  
    11.  
    12. data() {
    13.     return {
    14.         info: {
    15.             username: '',
    16.             password: ''
    17.         },
    18.         rules: {
    19.             username: [
    20.                 {required: true, message: '用户名不能为空', trigger: 'blur'},
    21.             ],
    22.             password: [
    23.                 {required: true, message: '密码不能为空', trigger: 'blur'},
    24.             ]
    25.         }
    26.     }
    27. },
    28. methods: {
    29.   handleSubmit() {
    30.       this.$refs.form.validate((valid) => {
    31.           if (valid) {
    32.               window.alert('成功');
    33.           } else {
    34.               window.alert('表单校验失败');
    35.           }
    36.       })
    37.   }
    38. }
    1. // Form.vue
    3.  
    4. <script>
    5. export default {
    6.     name: 'iForm',
    7.     provide() {
    8.         return {
    9.             form: this
    10.         }
    11.     },
    12.     props: {
    13.         model: {
    14.             type: Object
    15.         },
    16.         rules: {
    17.             type: Object
    18.         }
    19.     },
    20.     beforeCreate() {
    21.         console.log('form-beforeCreate');
    22.     },
    23.     created() {
    24.         this.$on('on-form-item-add', (field) => {
    25.             if (field) this.fields.push(field);
    26.         })
    27.         this.$on('on-form-item-remove', (field) => {
    28.             if (field.prop) {
    29.                 this.fields.splice(this.fields.indexOf(field), 1);
    30.             }
    31.         })
    32.     },
    33.     methods: {
    34.         resetFields() {
    35.             this.fields.forEach(field => {
    36.                 field.resetFields();
    37.             })
    38.         },
    39.         validate(callback) {
    40.             return new Promise(resolve => {
    41.                 let valid = true;
    42.                 let count = 0;
    43.                 this.fields.forEach(field => {
    44.                     field.validate('', errors => {
    45.                         if (errors) {
    46.                             valid = false;
    47.                         }
    48.                         if (++count === this.fields.length) {
    49.                             // 全部完成
    50.                             resolve(valid);
    51.                             if (typeof callback === 'function') {
    52.                                 callback(valid);
    53.                             }
    54.                         }
    55.                     })
    56.                 })
    57.             })
    58.         }
    59.     },
    60.     data() {
    61.         return {
    62.             fields: []
    63.         }
    64.     },
    65.     mounted() {
    66.     }
    67. }
    68. script>
    69.  
    70. <style>
    71.  
    72. style>
    1. // formItem.vue
    3.  
    4. <script>
    5. import AsyncValidator from 'async-validator';
    6. import Emitter from '../../mixins/emitter';
    7. export default {
    8.     name: 'iFormItem',
    9.     mixins: [ Emitter ],
    10.     inject: [
    11.         'form'
    12.     ],
    13.     props: {
    14.         label: {
    15.             type: String,
    16.             default: ''
    17.         },
    18.         // username 还需要拿到对应的值
    19.         prop: {
    20.             type: String
    21.         }
    22.     },
    23.     // 组件渲染时，将实例缓存在 Form 中
    24.     mounted() {
    25.         if (this.prop) {
    26.             this.dispatch('iForm', 'on-form-item-add', this);
    27.  
    28.             this.initialValue = this.fieldValue;
    29.  
    30.             this.setRules;
    31.         }
    32.     },
    33.     beforeDestroy() {
    34.         this.dispatch('iForm', 'on-form-item-remove', this);
    35.     },
    36.     data() {
    37.         return {
    38.             validateState: '',
    39.             validateMessage: '',
    40.             isRequired: false
    41.         }
    42.     },
    43.     computed: {
    44.         // 从 Form 的 model 中动态得到当前表单组件的数据
    45.         fieldValue() {
    46.             return this.form.model[this.prop];
    47.         }
    48.     },
    49.     methods: {
    50.         setRules() {
    51.             let rules = this.getRules();
    52.             if (rules.length) {
    53.                 rules.every((rule) => {
    54.                     // 如果当前校验规则中有必填项，则标记出来
    55.                     this.isRequired = rule.required;
    56.                 })
    57.             }
    58.             this.$on('on-form-blur', this.onFieldBlur);
    59.             this.$on('on-form-change', this.onFieldChange);
    60.         },
    61.         onFieldBlur() {
    62.             console.log('onFieldBlur');
    63.             // 接收到改变之后进行校验
    64.             this.validate('blur');
    65.         },
    66.         onFieldChange() {
    67.             console.log('onFieldChange');
    68.             this.validate('change');
    69.         },
    70.         // 从 Form 的 rules 属性中，获取当前 FormItem 的校验规则
    71.         getRules() {
    72.             let formRules = this.form.rules;
    73.             formRules = formRules ? formRules[this.prop] : [];
    74.             return [].concat(formRules || []);
    75.         },
    76.         // 只支持 blur 和 change, 过滤出符合要求的 rule 规则
    77.         getFilteredRule (trigger) {
    78.             const rules = this.getRules();
    79.             return rules.filter(rule => !rule.trigger || rule.trigger.indexOf(trigger) !== -1);
    80.         },
    81.         // 重置数据
    82.         resetField() {
    83.             this.validateState = '';
    84.             this.validateMessage = '';
    85.             this.form.model[this.prop] = this.initialValue;
    86.         },
    87.         validate(trigger, callback = function() {}) {
    88.             // 交给数据校验  看看是不是符合
    89.             // 查看类型
    90.             let rules = this.getFilteredRule(trigger);
    91.  
    92.             if (!rules || rules.length === 0) {
    93.                 return true;
    94.             }
    95.             
    96.             // 设置状态
    97.             this.validateState = 'validating';
    98.  
    99.             // 调用别人库来进行校验
    100.             let descriptor = {};
    101.             descriptor[this.prop] = rules;
    102.  
    103.             const validator = new AsyncValidator(descriptor);
    104.             let model = {};
    105.             model[this.prop] = this.fieldValue;
    106.             console.log(model);
    107.             validator.validate(model, { firstFields: true }, errors => {
    108.                 this.validateState = !errors ? 'success' : 'error';
    109.                 this.validateMessage = errors ? errors[0].message : '';
    110.                 callback(this.validateMessage);
    111.             })
    112.         }
    113.     }
    114. }
    115. script>
    116. <style>
    117.   .i-form-item-label-required:before {
    118.     content: '*';
    119.     color: red;
    120.   }
    121.   .i-form-item-message {
    122.     color: red;
    123.   }
    124. style>
    1. // input.vue