高频面试题:filters?
答案:filters
类似于管道流可以将上一个过滤函数的结果作为下一个过滤函数的第一个参数,又可以在其中传递参数让过滤器更灵活。
// main.js文件
import Vue from "vue";
Vue.filter("filterEmpty", function(val) {
return val || "";
});
Vue.filter("filterA", function(val) {
return val + "平时周末的";
});
Vue.filter("filterB", function(val, info, fn) {
return val + info + fn;
});
new Vue({
el: "#app",
template: `<div>{{msg | filterEmpty | filterA | filterB('爱好是', transformHobby('chess'))}}</div>`,
data() {
return {
msg: "张三"
};
},
methods: {
transformHobby(type) {
const map = {
bike: "骑行",
chess: "象棋",
game: "游戏",
swimming: "游泳"
};
return map[type] || "未知";
}
}
});
其中我们对msg
通过filterEmpty
、filterA
和filterB('爱好是', transformHobby('chess'))}
进行三层过滤,
一、filters
函数全局的注册
其中的Vue.filter
是在全局执行initGlobalAPI(Vue)
的时候通过initAssetRegisters
进行定义:
const ASSET_TYPES = [
'component',
'directive',
'filter'
]
export function initAssetRegisters (Vue: GlobalAPI) {
/**
* Create asset registration methods.
*/
ASSET_TYPES.forEach(type => {
Vue[type] = function (
id: string,
definition: Function | Object
): Function | Object | void {
if (!definition) {
return this.options[type + 's'][id]
} else {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && type === 'component') {
validateComponentName(id)
}
if (type === 'component' && isPlainObject(definition)) {
definition.name = definition.name || id
definition = this.options._base.extend(definition)
}
if (type === 'directive' && typeof definition === 'function') {
definition = { bind: definition, update: definition }
}
this.options[type + 's'][id] = definition
return definition
}
}
})
}
ASSET_TYPES
中有component
、directive
和filter
,这里先看filter
逻辑,通过this.options[type + 's'][id] = definition
的方式定义到当前的this.options
中,在全局进行调用。
二、编译阶段
当前例子在ast
生成阶段会执行文本解析的逻辑,如果存在|
,会执行解析过滤器的逻辑parseFilters
:
// filter-parser.js文件
const validDivisionCharRE = /[\w).+\-_$\]]/
export function parseFilters (exp: string): string {
let inSingle = false
let inDouble = false
let inTemplateString = false
let inRegex = false
let curly = 0
let square = 0
let paren = 0
let lastFilterIndex = 0
let c, prev, i, expression, filters
for (i = 0; i < exp.length; i++) {
prev = c
c = exp.charCodeAt(i)
if (inSingle) {
if (c === 0x27 && prev !== 0x5C) inSingle = false
} else if (inDouble) {
if (c === 0x22 && prev !== 0x5C) inDouble = false
} else if (inTemplateString) {
if (c === 0x60 && prev !== 0x5C) inTemplateString = false
} else if (inRegex) {
if (c === 0x2f && prev !== 0x5C) inRegex = false
} else if (
c === 0x7C && // pipe
exp.charCodeAt(i + 1) !== 0x7C &&
exp.charCodeAt(i - 1) !== 0x7C &&
!curly && !square && !paren
) {
if (expression === undefined) {
// first filter, end of expression
lastFilterIndex = i + 1
expression = exp.slice(0, i).trim()
} else {
pushFilter()
}
} else {
switch (c) {
case 0x22: inDouble = true; break // "
case 0x27: inSingle = true; break // '
case 0x60: inTemplateString = true; break // `
case 0x28: paren++; break // (
case 0x29: paren--; break // )
case 0x5B: square++; break // [
case 0x5D: square--; break // ]
case 0x7B: curly++; break // {
case 0x7D: curly--; break // }
}
if (c === 0x2f) { // /
let j = i - 1
let p
// find first non-whitespace prev char
for (; j >= 0; j--) {
p = exp.charAt(j)
if (p !== ' ') break
}
if (!p || !validDivisionCharRE.test(p)) {
inRegex = true
}
}
}
}
if (expression === undefined) {
expression = exp.slice(0, i).trim()
} else if (lastFilterIndex !== 0) {
pushFilter()
}
function pushFilter () {
(filters || (filters = [])).push(exp.slice(lastFilterIndex, i).trim())
lastFilterIndex = i + 1
}
if (filters) {
for (i = 0; i < filters.length; i++) {
expression = wrapFilter(expression, filters[i])
}
}
return expression
}
function wrapFilter (exp: string, filter: string): string {
const i = filter.indexOf('(')
if (i < 0) {
// _f: resolveFilter
return `_f("${filter}")(${exp})`
} else {
const name = filter.slice(0, i)
const args = filter.slice(i + 1)
return `_f("${name}")(${exp}${args !== ')' ? ',' + args : args}`
}
}
1、filters
生成
例子中通过for
循环的方式,在遇到|
的时候分别进行进行逻辑的处理,当前例子中的exp
可以做如下的模拟:
(1)第一次遇到|
第一次执行符合逻辑expression === undefined
条件,通过expression = exp.slice(0, i).trim()
为expression
赋值为msg
。
(2)第二次遇到|
第二次遇到|
执行pushFilter
,将filters
赋值为[]
,并将filterEmpty
推入其中。
此时,filters = ['filterEmpty']
(2)第三次遇到|
第三次遇到|
执行pushFilter
,将filterA
推入其中。
此时,filters = ['filterEmpty', 'filterA']
(3)处理剩余部分
在整个循环结束后会执行以下逻辑进行剩余部分的处理:
if (expression === undefined) {
expression = exp.slice(0, i).trim();
} else if (lastFilterIndex !== 0) {
pushFilter();
}
执行pushFilter
,将filterB('爱好是', transformHobby('chess'))
推入其中。
此时,filters = ['filterEmpty', 'filterA','filterB('爱好是', transformHobby('chess'))']
2、嵌套字符串拼接
有了filters
就会通过循环的方式从索引值为0
开始不断的将filters
进行expression = wrapFilter(expression, filters[i])
求值,当前例子中expression
初始为msg
,循环过程中会将expression
作为参数求得的值覆盖expression
,如此反复,实现函数套函数的字符串。
初始状态:expression === 'msg'
;
index === 0
:expression === '_f("filterEmpty")(msg)'
;
index === 1
:expression === '_f("filterA")(_f("filterEmpty")(msg))'
;
index === 2
:expression === '_f("filterB")(_f("filterA")(_f("filterEmpty")(msg)),'爱好是', transformHobby('chess'))'
;
至此,就完成了核心逻辑,将msg | filterEmpty | filterA | filterB('爱好是', transformHobby('chess'))
字符串转换成了'_f("filterB")(_f("filterA")(_f("filterEmpty")(msg)),'爱好是', transformHobby('chess'))'
。
三、vNode
编译生成的render
为:
with(this) {
return _c('div', [_v(_s(_f("filterB")(_f("filterA")(_f("filterEmpty")(msg)), '爱好是', transformHobby('chess'))))])
}
明显可以看出msg
作为参数传入filterEmpty
执行,执行的结果作为filterA
的参数传入执行,执行的结果作为filterB
的第一个参数,第二个参数'爱好是'
,第三个参数transformHobby('chess')
,执行获得最终的vNode
中包含text: "张三平时周末的爱好是象棋"
。
总结
数组结构可以很好的描述嵌套关系,filters
的管道模式就是利用其特性,通过|
进行分割,前一个执行结果是后一个的第一个参数,并利用其他参数进行过滤灵活性的扩展。
后记
如果有点帮助,点赞鼓励下吆❤