Vue filter過濾器的實現方式

<
!-- 在雙花括號中 --
>
}<
!-- 在 `v-bind`
中 --
>
"rawid | formatid"
>
<
/div>

filters:
}

在**執行後，message將作為第乙個引數傳入filters中對應的函式中，將處理後的資料return一下就行了。

function
parsefilters
(exp)
}else
if(indouble)
}else
if(intemplatestring)
}else
if(inregex)
}elseif(
c ===
0x7c
&&// pipe
exp.
charcodeat
(i +1)
!==0x7c
&&        exp.
charcodeat
(i -1)
!==0x7c
&&!curly &&
!square &&
!paren
)else
}else}if
(c ===
0x2f)}
if(!p ||
!validdivisioncharre.
test
(p))}}
}if(expression === undefined)
else
if(lastfilterindex !==0)
function
pushfilter()
if(filters)
}return expression
}function
wrapfilter
(exp, filter)
else
}

這兩段**看似很複雜，其實一點都不難理解，這兩個函式實現了乙個最簡單的功能將message|capitalize轉換成_f("capitalize")(message)這種形式。對於使用多個通道符號的字串，也可以將上乙個結果作為引數傳給下乙個_f(*)(_fn(*)(arg))，舉個例子：parsefilters('arg1|fn1|fn2|fn3')對於這樣乙個過濾語句，parsefilters會處理成這樣的乙個字串"_f("fn3")(_f("fn2")(_f("fn1")(arg1)))"，這樣就做了多個過濾器也就可以使用了。這段字串有什麼作用呢？_f（）函式是幹嘛用的呢？

function
installrenderhelpers
(target)
function
resolvefilter
(id)

在vue中定義了這麼個往物件中新增輔助方法的功能。這裡的parsefilter返回的值中的_f()就是這個resolvefilter這個函式將掛載在vue.filter上的過濾器函式[id]返回了，然後將引數傳給該方法，結果傳給下乙個filter，這樣就完成了這個過濾的功能，最終將結果渲染在頁面上。

當然這裡僅僅討論了filter在}的實現方式，還有在bind中的實現，本文，僅僅簡單討論了這部分功能，和這種程式設計的思路，這樣方便以後我們在實際業務中遇到類似的情況，我們有這種思路可以去解決問題。

Vue filter過濾器的實現方式

vue filter過濾器的用法

vue filter物件 vue 過濾器

vue filter過濾器用法

Vue filter過濾器的實現方式

vue filter過濾器的用法

vue filter物件 vue 過濾器

vue filter過濾器用法

相關推薦