element-ui表單源碼解析之el-form-item

element-ui表單源碼解析系列總共有三篇，上一篇《element-ui表單源碼解析之el-form》，掘金傳送門：《element-ui表單源碼解析之el-form》。這個系列2個月前寫在個人我的網站道招網，1個月前貼了第一篇，前幾天閱讀量寥寥無幾，多是掘金這樣的源碼分析文章太多了，亦或是本身寫的很差。當時心灰意冷，不許備在掘金貼後面的了。今天回來掘金看了下，發現仍是有很多網友看了，因此仍是決定把剩下的兩篇也貼過來吧。

上一篇看了el-form，功能比較簡單，如今來看看el-form-item

<!--el-form-item源碼-->
<template>
  <div class="el-form-item" :class="[{ 'el-form-item--feedback': elForm && elForm.statusIcon, 'is-error': validateState === 'error', 'is-validating': validateState === 'validating', 'is-success': validateState === 'success', 'is-required': isRequired || required, 'is-no-asterisk': elForm && elForm.hideRequiredAsterisk }, sizeClass ? 'el-form-item--' + sizeClass : '' ]">
    <label :for="labelFor" class="el-form-item__label" :style="labelStyle" v-if="label || $slots.label">
      <slot name="label">{{label + form.labelSuffix}}</slot>
    </label>
    <div class="el-form-item__content" :style="contentStyle">
      <slot></slot>
      <transition name="el-zoom-in-top">
        <slot v-if="validateState === 'error' && showMessage && form.showMessage" name="error" :error="validateMessage">
          <div class="el-form-item__error" :class="{ 'el-form-item__error--inline': typeof inlineMessage === 'boolean' ? inlineMessage : (elForm && elForm.inlineMessage || false) }" >
            {{validateMessage}}
          </div>
        </slot>
      </transition>
    </div>
  </div>
</template>
複製代碼

結構也很簡單，兩個插槽，一個是label，一個匿名插槽放內容， transition時用做校驗信息的動畫。

mixins: [emitter],

provide() {
	return {
		elFormItem: this
	};
},

inject: ['elForm'],
複製代碼

這裏看出form-item支持this.dispatch和this.broadcast來實現向上發送事件和向下廣播事件。根據上一篇已經知道這裏確定會inject父組件elForm的，同時它還把本身給provide出去了。 它的props相對簡單，就不單獨講了。

看到watch裏面有####

// el-form-item源碼
watch: {
	error: {
		immediate: true,
			handler(value) {
			this.validateMessage = value;
			this.validateState = value ? 'error' : '';
		}
	},
		validateStatus(value) {
			this.validateState = value;
		}
},
複製代碼

上面的error和validateStatus就是props裏面的，說明若是有外部組件經過傳參改變這個兩個信息的話， el-form-item會優先遵從外部值。

接下來看看computed####

computed: {
      labelFor() {
        return this.for || this.prop;
      },
      labelStyle() {
        const ret = {};
        if (this.form.labelPosition === 'top') return ret;
        const labelWidth = this.labelWidth || this.form.labelWidth;
        if (labelWidth) {
          ret.width = labelWidth;
        }
        return ret;
      },
      contentStyle() {
        const ret = {};
        const label = this.label;
        if (this.form.labelPosition === 'top' || this.form.inline) return ret;
        if (!label && !this.labelWidth && this.isNested) return ret;
        const labelWidth = this.labelWidth || this.form.labelWidth;
        if (labelWidth) {
          ret.marginLeft = labelWidth;
        }
        return ret;
      },
      form() {
        let parent = this.$parent;
        let parentName = parent.$options.componentName;
        while (parentName !== 'ElForm') {
          if (parentName === 'ElFormItem') {
            this.isNested = true;
          }
          parent = parent.$parent;
          parentName = parent.$options.componentName;
        }
        return parent;
      },
      fieldValue() {
        const model = this.form.model;
        if (!model || !this.prop) { return; }

        let path = this.prop;
        if (path.indexOf(':') !== -1) {
          path = path.replace(/:/, '.');
        }

        return getPropByPath(model, path, true).v;
      },
      isRequired() {
        let rules = this.getRules();
        let isRequired = false;

        if (rules && rules.length) {
          rules.every(rule => {
            if (rule.required) {
              isRequired = true;
              return false;
            }
            return true;
          });
        }
        return isRequired;
      },
      _formSize() {
        return this.elForm.size;
      },
      elFormItemSize() {
        return this.size || this._formSize;
      },
      sizeClass() {
        return this.elFormItemSize || (this.$ELEMENT || {}).size;
      }
    },
複製代碼

其中labelStyle和contentStyle都會根據this.form.labelPosition，this.form.inline ，this.labelWidth以及接下來說的this.isNested來設置lable和內容對應的樣式 計算this.form會經過遞歸查找父組件來找到它最近的el-form組件，而且會根據父組件是否含有el-form-item來判斷自身是否備嵌套。 computed裏面的fieldValue以爲有畢竟講一下

fieldValue() {
	const model = this.form.model;
	if (!model || !this.prop) { return; }

	let path = this.prop;
	if (path.indexOf(':') !== -1) {
		path = path.replace(/:/, '.');
	}

	return getPropByPath(model, path, true).v;
},
複製代碼

1. 若是el-from對沒有model或者當前el-form-item沒有設置prop的話，不計算fieldValue
2. 會根據prop計算得出path，而後由path把getPropByPath(model, path, true).v做爲當前的fieldValue
3. 若是prop已是含有冒號的話，直接使用prop做爲path，不然若是有小數點須要將小數點.替換成/以後做爲path使用。 敲黑板！！！接下來要看getPropByPath方法，也就是這個方法容易報出please transfer a valid prop path to form item! 代碼很少，直接貼出來說清楚

//element-ui/src/utils/util源
export function getPropByPath(obj, path, strict) {
  let tempObj = obj;
  path = path.replace(/\[(\w+)\]/g, '.$1');
  path = path.replace(/^\./, '');

  let keyArr = path.split('.');
  let i = 0;
  for (let len = keyArr.length; i < len - 1; ++i) {
    if (!tempObj && !strict) break;
    let key = keyArr[i];
    if (key in tempObj) {
      tempObj = tempObj[key];
    } else {
      if (strict) {
        throw new Error('please transfer a valid prop path to form item!');
      }
      break;
    }
  }
  return {
    o: tempObj,
    k: keyArr[i],
    v: tempObj ? tempObj[keyArr[i]] : null
  };
};
複製代碼

裏面的path.replace(/\[(\w+)\]/g, '.$1');是將相似obj[key]的path轉換爲 obj.key path.replace(/^\./, '')就是去掉path前面的第一個.。 等到path的轉換工做完成了，就將其按照.分割獲得keyArr。

let i = 0;
  for (let len = keyArr.length; i < len - 1; ++i) {
    if (!tempObj && !strict) break;
    let key = keyArr[i];
    if (key in tempObj) {
      tempObj = tempObj[key];
    } else {
      if (strict) {
        throw new Error('please transfer a valid prop path to form item!');
      }
      break;
    }
  }
複製代碼

keyArr除了最後一個外都進行for循環，在strict爲true的狀況下，循環不會break，同時從新賦值tempObj，而且若是keyArr的元素不在tempObj裏面就會報錯了，這就是你們常見的please transfer a valid prop path to form item! 最後返回

return {
    o: tempObj,
    k: keyArr[i],
    v: tempObj ? tempObj[keyArr[i]] : null
};
複製代碼

裏面的對象的o就是最終的tempObj，k就是keyAr裏面的最後一個元素，v就是k對應的key在tempObj的value。

一氣呵成，咱們再看看其它使用getPropByPath的方法：

getRules獲取校驗規則

getRules() {
	let formRules = this.form.rules;
	const selfRules = this.rules;
	const requiredRule = this.required !== undefined ? { required: !!this.required } : [];

	const prop = getPropByPath(formRules, this.prop || '');
	formRules = formRules ? (prop.o[this.prop || ''] || prop.v) : [];

	return [].concat(selfRules || formRules || []).concat(requiredRule);
},
複製代碼

先設置formRules的初始值爲el-form的rules，設置selfRules爲el-form-item本身的rules，本身判斷是否爲必填項，轉換爲對應的格式{ required: !!this.required }，而後從新計算賦值formRules 上面的prop就是getPropByPath的返回值。prop.o就是以前提到的tempObj的，裏面若是有this.prop的屬性的話就賦值給formRules，不然用prop.v的值賦值給formRules。最終這個el-form-item的校驗規則就是：

1. 若是有自身規則就是自身規則+是否必填，
2. 不然就是表單裏的規則+是否必填。

resetField重置表單

getPropByPath的方法的使用套路基本同樣，一樣將返回值賦值給prop。 重置操做pro的值也是經過修改返回的值來完成的

if (Array.isArray(value)) {
	prop.o[prop.k] = [].concat(this.initialValue);
} else {
	prop.o[prop.k] = this.initialValue;
}
複製代碼

順便說一下初始值initialValue是怎麼獲取的。 在mounted生命週期裏面

let initialValue = this.fieldValue;
if (Array.isArray(initialValue)) {
	initialValue = [].concat(initialValue);
}
Object.defineProperty(this, 'initialValue', {
	value: initialValue
});

複製代碼

利用Object.defineProperty使得initialValue建立後不得改變了，畢竟後續的重置就靠它了。 繼續看computed裏面的，剩下_formSize，elFormItemSize以及sizeClass比較簡單，邏輯都是隻有el-form-item設置了使用el-form-item的值，不然使用el-form的值。只是裏面有個this.$ELEMENT不知道是什麼，也沒搜到哪裏給賦值了一個$ELEMENT，有知道的童鞋能夠告知下，謝謝了。

接下來看看methods####

在看最重要的validate以前，咱們先看看其它的準備工做的方法 getRules前面已經講到了。getFilteredRule是根據指定的trigger來過濾相應的rules而且用的深複製返回的，由於後面會看到delete rule.trigger;。 好，咱們能夠看到validate方法了

validate(trigger, callback = noop) {
	this.validateDisabled = false;
	const rules = this.getFilteredRule(trigger);
	if ((!rules || rules.length === 0) && this.required === undefined) {
		callback();
		return true;
	}

	this.validateState = 'validating';

	const descriptor = {};
	if (rules && rules.length > 0) {
		rules.forEach(rule => {
			delete rule.trigger;
		});
	}
	descriptor[this.prop] = rules;

	const validator = new AsyncValidator(descriptor);
	const model = {};

	model[this.prop] = this.fieldValue;

	validator.validate(model, { firstFields: true }, (errors, invalidFields) => {
		this.validateState = !errors ? 'success' : 'error';
		this.validateMessage = errors ? errors[0].message : '';

		callback(this.validateMessage, invalidFields);
		this.elForm && this.elForm.$emit('validate', this.prop, !errors, this.validateMessage || null);
	});
},
複製代碼

首先是根據指定的trigger拿到須要校驗的rules，若是沒有或者是否是必填項，直接執行回調，而且校驗經過。將descriptor轉換成相似下面的格式，並依次生成實例validator。const validator = new AsyncValidator(descriptor)。

descriptor = {
	userName: [{
		required: true,
	}]
}
複製代碼

剩下的校驗就經過validator校驗了。又興趣的能夠直接看看async-validator的源碼。 methods裏面剩下的都比較簡單了

onFieldBlur() {
	this.validate('blur');
},
onFieldChange() {
	if (this.validateDisabled) {
		this.validateDisabled = false;
		return;
	}

	this.validate('change');
}
複製代碼

都是觸發某個事件後，而後根據該事件進行相應的校驗了。 而相應的時間都是在mounted生命週期裏面開始監聽的。

this.dispatch('ElForm', 'el.form.addField', [this]);
if (rules.length || this.required !== undefined) {
	this.$on('el.form.blur', this.onFieldBlur);
	this.$on('el.form.change', this.onFieldChange);
}
複製代碼

以及

beforeDestroy() {
	this.dispatch('ElForm', 'el.form.removeField', [this]);
}
複製代碼

今天寫了很多了，我的感受分析的仍是挺具體的，部分省略的都過於簡單，就不浪費時間了。 下一篇就該分享el-input了，看看它是怎麼和el-form和el-form-item聯繫在一塊兒的。

若有更新會及時在原文上面更新的。歡迎訪問原文《element-ui表單源碼解析之el-form-item》