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;
},
複製程式碼- 如果el-from對沒有
model或者當前el-form-item沒有設定prop的話，不計算fieldValue - 會根據
prop計算得出path，然後由path把getPropByPath(model, path, true).v作為當前的fieldValue - 如果
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的校驗規則就是：
- 如果有自身規則就是自身規則+是否必填，
- 否則就是表單裡的規則+是否必填。
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》