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的相关知识,提升工作效率。



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

相关内容

热门资讯

安卓系统音乐软件推荐,五大热门... 你有没有发现,手机里音乐软件那么多,挑一款适合自己的真心不容易啊!安卓系统上的音乐软件更是五花八门,...
安卓系统刷三星系统,轻松刷入最... 你有没有想过,你的安卓手机其实可以变身成三星的旗舰机呢?没错,就是那种屏幕大、性能强、系统流畅的旗舰...
塞班系统可以转为安卓,跨越时代... 你知道吗?现在科技的发展真是让人眼花缭乱,连我们曾经熟悉的塞班系统也能华丽转身,变成安卓系统呢!是不...
安卓系统如何录像剪辑,录像剪辑... 亲爱的手机控们,你是否有过这样的经历:在某个瞬间,你捕捉到了一段令人难忘的画面,却因为没来得及记录而...
安卓系统强行提高配置,配置提升... 最近你的安卓手机是不是感觉有点儿“发烧”了?没错,就是那种配置突然“升级”的感觉。你是不是也觉得,手...
安卓系统能做设计吗,探索安卓系... 你有没有想过,安卓系统竟然也能做设计?是的,你没听错,这个我们日常使用的手机操作系统,竟然也能成为设...
安卓系统几年后使用,探索多年使... 你有没有想过,那些陪伴我们多年的安卓手机,它们现在过得怎么样了呢?安卓系统,这个曾经让我们爱恨交加的...
平板安卓苹果双系统,安卓与苹果... 你有没有想过,拥有一台既能运行安卓系统,又能使用苹果系统的平板电脑,那该是多么酷炫的事情啊!想象一边...
嘉和病历系统安卓,便捷医疗信息... 你有没有听说过嘉和病历系统安卓版?这可是医疗行业的一大神器呢!想象医生们拿着手机就能轻松管理病历,患...
安卓10更改系统号,揭秘系统编... 你知道吗?最近安卓系统又来了一次大更新,安卓10正式上线了!这次更新可是带来了不少新功能,其中最引人...
小米墨水屏 安卓系统,融合科技... 你知道吗?在科技日新月异的今天,电子阅读器市场也迎来了新的活力。而小米,这个我们熟悉的品牌,最近推出...
系统软件最少的安卓系统,基于最... 你有没有想过,手机系统就像是我们生活的操作系统,有时候太复杂了,让人感觉头都大了。今天,我要给你介绍...
安卓系统关闭应用推荐,安卓系统... 你有没有发现,手机里的安卓系统最近有点儿“小情绪”,总是给你推荐一些你根本不感兴趣的应用?别急,今天...
车载安卓系统如何用,智能驾驶体... 你有没有想过,你的车载安卓系统其实是个隐藏的宝库呢?没错,就是那个你每天开车时几乎不离手的那个屏幕,...
安卓系统更新如何取消,```p... 你有没有遇到过这种情况:安卓手机的系统更新推送得让人有点头疼,有时候更新后的系统还各种不适应。别急,...
安卓系统源码修改练习,从零开始... 亲爱的技术爱好者,你是否曾梦想过深入安卓系统的内核,亲手修改源码,让手机变得更加个性化?那就让我们一...
安卓考勤系统论文,基于安卓平台... 你有没有想过,每天打卡上班,是不是也能变得有趣起来呢?没错,就是那个我们每天都要面对的安卓考勤系统。...
安卓系统哪家流畅度,安卓系统流... 手机里的安卓系统,就像是每个人的小世界,各有各的风采。但说到流畅度,这可是大家最关心的问题了。今天,...
安卓开不了定位系统,安卓设备定... 最近是不是发现你的安卓手机定位系统突然罢工了?别急,别慌,今天就来给你详细解析一下这个问题,让你轻松...
安卓系统怎么设置airpod,... 你有没有发现,自从AirPods问世以来,它就成为了科技界的宠儿?这款无线耳机不仅音质出众,而且连接...