vue中rules校验是验证首字符_小白也能秒懂Vue源码中那些精细设计(选项处理)...
我"崩"不住了,在彭凡同志鍥而不舍的催促下這篇文章終于"蛋"生了。 說正經(jīng)的這篇文章不好寫,不好寫的原因是我不太擅長寫這些類比文,但它還是寫出來了。 相信大部分人都有開發(fā)過功能插件,在寫插件的時(shí)候普遍應(yīng)用基本思想是以"默認(rèn)配置為優(yōu)先,以用戶配置為覆蓋"。如果你覺得簡單先別著急穿褲子走人繼續(xù)往下看看。
Validator插件
$之前寫過一個輕量級數(shù)據(jù)校驗(yàn)插件使用非常簡單,你只需要找到form表單節(jié)點(diǎn)調(diào)用調(diào)用Validator 方法即可,就能在文本框中輸入值進(jìn)行自定校驗(yàn)。
$當(dāng)然也會給用戶相對的自由度如"校驗(yàn)事件、錯誤提示信息 ..."你只需要按照規(guī)定來配置就好了。
*********************分割線**********************
在寫Vue代碼的小伙伴同樣要寫很多的選項(xiàng):"el、data、props、template、render、mounted..." 那Vue在處理這些選項(xiàng)也是使用"非黑即白"的處理思想嗎?明確的說沒有 Vue 在處理選項(xiàng)有非常多限制如:
- el 只在用 new 創(chuàng)建實(shí)例時(shí)生效。
- data 組件的定義只接受function。
- 直接在 DOM中使用組件時(shí),組件名只有是 kebab-case 才有效。
- 生命周期鉤子...
也就是說在Vue 中"非黑即白"的思想并不適用,Vue需要針對特殊選項(xiàng)做不同的處理,有的選項(xiàng)處理邏輯是再此能不能用,有的選項(xiàng)處理邏輯是校驗(yàn)Value合法性,有的選項(xiàng)的邏輯是需要合并處理。.... 這種處理方式比較官方的說法叫"選項(xiàng)自定義策略處理"。
選項(xiàng)自定義策略處理
在講選擇自定義策略處理之前先說說vm.$option實(shí)例屬性,它是用于當(dāng)前 Vue 實(shí)例的初始化選項(xiàng)。需要在選項(xiàng)中包含自定義屬性時(shí)會有用處:
var輸出vm.$option:
{有沒有感覺奇怪在實(shí)例初始化選項(xiàng)中data的值是一個對象,為什么vm.$option中data的值變成一個函數(shù)了?開始揭秘...
Vue構(gòu)造函數(shù)
function在創(chuàng)建Vue實(shí)例的時(shí)候你傳遞進(jìn)來的自定義選項(xiàng)對象會傳遞給this._init這個方法。
Vuevm.$options 屬性定義在Vue.prototype._init 原型方法中。 vm.$options的值是調(diào)用mergeOptions函數(shù)的返回值。
mergeOptions
function先來看看調(diào)用mergeOptions的三個參數(shù)。
- resolveConstructorOptions - 這個函數(shù)的作用是用來獲取當(dāng)前實(shí)例構(gòu)造者的 options 屬性(注:涉及到組件相關(guān)的內(nèi)容暫時(shí)不解釋,在此你可以默認(rèn)他傳遞是一個純對象)
- options - 自定義選項(xiàng)對象
- vm - Vue實(shí)例
mergeOptions 最終返回的是在函數(shù)內(nèi)置的options純對象。 options 所擁有的屬性就是調(diào)用mergeField函數(shù)傳遞進(jìn)來的key。
舉個栗子:
你在創(chuàng)建Vue的根實(shí)例,并且傳遞了一個自定義選項(xiàng)對象。
var自定義選項(xiàng)對象會作為實(shí)參傳遞給mergeOptions函數(shù)的child形參。
for通過for..in.. 語句把child對象上可枚舉的屬性名作為參數(shù)傳遞給mergeField。
hasOwn是檢測關(guān)于組件中父實(shí)例中是否key屬性如果有將不會重復(fù)的調(diào)用mergeField,因?yàn)楦缸咏M件實(shí)例中相同的屬性只需要做一次策略處理就可以了。(注:不擴(kuò)展講解)
當(dāng)前栗子中"el"、"data"、"count" 這三個屬性名作為字符串會作為參數(shù)傳遞給mergeField函數(shù)。那在mergeField函數(shù)中會給options 擴(kuò)展 options.el = undefined 、 options.data = undefined 、 options.count = undefined 三個屬性,為什么這三個屬性的值都是undefined的呢?
原因是他們的value都需要通過調(diào)用 strat(parent[key], child[key], vm, key) 函數(shù)返回值來確定所以都暫定undefined,那strat 是什么?
varstrats是自定義策略對象,strats[key]是檢測在這個自定義策略對象上有沒有[key]這個屬性,如果有就表示針對[key]屬性寫了策略函數(shù)反之就沒寫。
defaultStrat 默認(rèn)策略函數(shù)
var默認(rèn)策略函數(shù)要弄懂它你只需要明白parentVal 、childVal 這兩個參數(shù)。
- parentVal 就是在調(diào)用strat 傳遞進(jìn)來的parent[key],因?yàn)槲覀兡J(rèn)parent為純函數(shù)所以parentVal 永遠(yuǎn)為undefined。
- childVal 就是在調(diào)用strat 傳遞進(jìn)來的childVal[key],也就是自定義選項(xiàng)對象中的[key]屬性的值。
strats 自定義策略對象
varstrats 是獲取了config 全局配置對象上optionMergeStrategies屬性的值。
var你是不是覺得奇怪為什么不直接通過字面量方式創(chuàng)建一個純對象賦值給strats,而要通過Object.create(null)創(chuàng)建純對象。這樣不麻煩了嗎? 問題暫時(shí)保留。往下看Vue中自定義的策略函數(shù)。
strats可以看到Vue中對"el", "data","watch","props"等等....選項(xiàng)都寫了策略函數(shù)。 在回歸到mergeField函數(shù)你是否能頓悟了。
function如果某個選項(xiàng)寫了策略函數(shù)那么就會調(diào)用這個策略函數(shù),返回值會成為options[key] 的value。最后:mergeOptions 函數(shù)執(zhí)行完畢返回options引用給到vm.$options。
現(xiàn)在來解釋剛剛的那個問題。為什么不直接通過字面量方式創(chuàng)建一個純對象賦值給strats,而要通過Object.create(null)創(chuàng)建純對象?原因是Vue想給用戶自定義選項(xiàng)自由度,也能添加策略函數(shù)。
舉個栗子:
你在創(chuàng)建Vue的根實(shí)例,并且傳遞了一個自定義選項(xiàng)對象。
var vm = new Vue({el: "#app",data: {message: "hello Vue",},count: 9, })我想針對count寫個添加策略函數(shù)怎么辦。
Vue這個策略函數(shù)很簡單,監(jiān)聽childVal的值: 如果大于99返回本身,小于99 返回99。count策略函數(shù)返回值給到vm.$options.count。
那Vue.config是怎么訪問到的呢?
function你細(xì)品這個代碼。 看不懂留言請相信我一定會假裝看不見。
總結(jié)
以上是生活随笔為你收集整理的vue中rules校验是验证首字符_小白也能秒懂Vue源码中那些精细设计(选项处理)...的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: js获取精确宽度/高度(带小数位像素)
- 下一篇: vue 计算属性_lt;Vue 源码笔记