vue中的filters(源码分析)
admin
2024-04-02 06:37:03
0

高频面试题: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: `
{{msg | filterEmpty | filterA | filterB('爱好是', transformHobby('chess'))}}
`,data() {return {msg: "张三"};},methods: {transformHobby(type) {const map = {bike: "骑行",chess: "象棋",game: "游戏",swimming: "游泳"};return map[type] || "未知";}} });

其中我们对msg通过filterEmptyfilterAfilterB('爱好是', 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 || iddefinition = this.options._base.extend(definition)}if (type === 'directive' && typeof definition === 'function') {definition = { bind: definition, update: definition }}this.options[type + 's'][id] = definitionreturn definition}}})
} 

ASSET_TYPES中有componentdirectivefilter,这里先看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 = falselet inDouble = falselet inTemplateString = falselet inRegex = falselet curly = 0let square = 0let paren = 0let lastFilterIndex = 0let c, prev, i, expression, filtersfor (i = 0; i < exp.length; i++) {prev = cc = 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 && // pipeexp.charCodeAt(i + 1) !== 0x7C &&exp.charCodeAt(i - 1) !== 0x7C &&!curly && !square && !paren) {if (expression === undefined) {// first filter, end of expressionlastFilterIndex = i + 1expression = 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 - 1let p// find first non-whitespace prev charfor (; 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: resolveFilterreturn `_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)第一次遇到|

(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();} 

2、嵌套字符串拼接

有了filters就会通过循环的方式从索引值为0开始不断的将filters进行expression = wrapFilter(expression, filters[i])求值,当前例子中expression初始为msg,循环过程中会将expression作为参数求得的值覆盖expression,如此反复,实现函数套函数的字符串。初始状态:expression === 'msg';index === 0expression === '_f("filterEmpty")(msg)';index === 1expression === '_f("filterA")(_f("filterEmpty")(msg))';index === 2expression === '_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的管道模式就是利用其特性,通过|进行分割,前一个执行结果是后一个的第一个参数,并利用其他参数进行过滤灵活性的扩展。

最后

最近还整理一份JavaScript与ES的笔记,一共25个重要的知识点,对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识,提升工作效率。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

相关内容

热门资讯

安卓系统所有手机通用,揭秘所有... 你有没有发现,现在市面上各种各样的手机,品牌琳琅满目,让人挑花了眼?不过,不管你用的是哪个品牌的手机...
安卓系统变ios系统好用吗,体... 你有没有想过,为什么有些人从安卓手机换到了苹果的iPhone,而且好像换了之后整个人都精神焕发呢?没...
华为安卓系统文件删除,轻松掌握... 你有没有遇到过这种情况?手机里的文件突然不见了,尤其是华为安卓系统里的那些重要文件,真是让人心头一紧...
安卓1.5系统软件,初代智能革... 你有没有想过,手机里的那些看似普通的系统,其实背后藏着无数的故事呢?今天,就让我带你走进安卓1.5系...
安卓 代替系统音效设置,打造个... 你有没有发现,手机里的那些系统音效有时候真的让人有点烦躁呢?比如那个每次接电话时“叮咚”一声,或者是...
安卓系统整体性,构建移动设备的... 你知道吗?在智能手机的世界里,安卓系统就像是个全能的魔术师,它不仅拥有丰富的魔法,还能让各种神奇的魔...
安卓系统能玩鬼泣么?,畅享动作... 你有没有想过,在安卓系统上玩《鬼泣》这款游戏会是怎样的体验呢?没错,就是那个让你热血沸腾、挑战极限的...
安卓系统手机编曲软件,音乐创作... 你有没有想过,用手机也能轻松编曲?没错,就是那个你每天不离手的安卓系统手机!现在,我就要给你揭秘几款...
车载导航显示安卓系统,车载导航... 你有没有发现,现在的车载导航系统越来越智能了?尤其是那些搭载了安卓系统的车载导航,简直就像是个贴心的...
安卓系统启动黑屏,安卓系统启动... 手机屏幕突然黑了,这可怎么办?别急,今天就来和你聊聊安卓系统启动黑屏这个让人头疼的问题。你知道吗,这...
怎么解除订阅安卓系统,安卓系统... 你是不是也和我一样,手机里订阅了好多服务,结果现在想解除订阅,却一头雾水?别急,今天就来手把手教你如...
安卓系统停用怎么开启,轻松恢复... 亲爱的手机控们,你是否曾经遇到过安卓系统突然停用的情况,让你手忙脚乱,不知所措?别担心,今天就来教你...
安卓系统电池健康度,电池健康度... 你有没有发现,你的安卓手机最近是不是有点儿不给力了?电池续航能力大不如前,充电速度也慢了不少?别急,...
安卓系统按键怎么截图,安卓系统... 你是不是也和我一样,有时候想截个图分享给朋友,却发现安卓手机的截图功能有点神秘呢?别急,今天就来手把...
购票系统安卓源代码,架构设计与... 你有没有想过,那些我们每天离不开的购票系统,它们背后的秘密是什么呢?今天,就让我带你一探究竟,揭开购...
安卓手机系统后台测试,深度解析... 你有没有发现,你的安卓手机后台总是悄悄地忙碌着?别小看了这些后台程序,它们可是手机系统稳定运行的关键...
安卓系统重启的图标,解锁设备新... 手机突然重启,是不是心里有点慌?别急,今天就来和你聊聊安卓系统重启的图标,让你一眼就能认出它,再也不...
车载智慧屏安卓系统,智能出行新... 你有没有发现,现在的车载智慧屏越来越智能了?尤其是那些搭载了安卓系统的,简直就像是个移动的小电脑,不...
安卓系统连上网权限,解锁设备无... 你有没有发现,你的安卓手机里有些应用总是偷偷连上网?别小看这个小小的网络权限,它可是能影响你隐私、消...
安卓谷歌操作系统,探索安卓谷歌... 你知道吗?在智能手机的世界里,有一个操作系统可是无人不知、无人不晓,那就是安卓谷歌操作系统。它就像一...